HTML设计一个图书管理网页

html 专栏收录该内容
1 篇文章 0 订阅

HTML设计简单网页

ps:代码运行时图片不能显示,您需将 background: url(aaa/zcx.jpg)~<body background=“aaa/timg.jpg”~<img src=“aaa/010.jpg” ~中的aaa/xx.jpg,换成你的图片,
解决:
(1)可以新建目录,然后把照片放入目录中,就可以改为目录名/图片名,
(2)或者直接与该html文件粘贴在同个目录下(不推荐,图片多的话瞅着乱不规整)
该代码图片可设为学校校徽或公司logo <img src=“aaa/010.jpg”
缺点:logo有白边最好用ps整完直接引入背景图片(然后就可以把<img~删了,记得把style中的img{}也删了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSDN</title>
    <style>
        span{
            font-family:"楷体";
            font-size:70px;
            text-align:center;
            color:red;
        }
        body {
            font-family: "楷体";
            margin: 0px;
            padding: 0px;
        }
        div{
            float:left;
            margin-left: 70px;
        }
        img{
            position:absolute;
            left:1100px;
            top:30px;

        }
        #nnn{
            font-size:25px;
        }
        #shuosuo{
            width:50px;
            height:40px;
        }
        a{
            text-decoration:none;
        }
        a:hover{
            color:red ;
            text-decoration: none;
        }
        nav{
            font-size:20px;
            float:initial;
            margin: 0 0 0 0;
            padding: 0 0 0 0 ;
        }
        nav ul li {
            float:left;
            display: inline;
        }
        nav ul li a {
            float: left;
            padding: 11px 20px;
            font-size: 14px;
            text-align: center;
            text-decoration: none;
            background: url(aaa/zcx.jpg)
            center left  no-repeat;
            color: #fff;
            outline: none;
        }
    </style>

</head>
<h1><span>&nbspXXX图书管理系统</span></h1>
<p><nav>
    <ul>
        <li><a href="#" title="个人信息" target="_blank">个人信息</a></li>
        <li><a href="#" title="图书借阅" target="_blank">图书借阅</a></li>
        <li><a href="#" title="图书退还" target="_blank">图书退还</a></li>
        <li><a href="#" title="图书信息管理" target="_blank">图书信息管理</a></li>
        <li><a href="#" title="新书入馆" target="_blank">新书入馆</a></li>
        <li><a href="#" title="联系我们" target="_blank">联系我们</a></li>
    </ul>
</nav>
</p>
<p><h2>&nbsp&nbsp&nbsp&nbsp&nbsp
    <input id="nnn" type="search" name="shousuo" placeholder="图书搜索"/>
    <button id="shuosuo" type="button" name="queding" onclick="window.location.href='https://www.baidu.com'" >搜索</button>
</h2></p>
<body>
      <body background="aaa/timg.jpg"
       style="background-repeat:no-repeat ;
       background-size:100% 100%;
       background-attachment: fixed;">
      </body>
      </br>
      <img src="aaa/010.jpg" width="200" height="200" />
      <div><h1><a href="ccc.html" target="_blank">科技类</a></h1>
     <ul>
         <li><a href="ccc.html">《最新科学技术全书》</a></li>
         <li><a href="ccc.html">《科学技术发展简史》</a></li>
         <li><a href="ccc.html">《科学探索者》</a></li>
         <li><a href="ccc.html">《时间简史》</a></li>
         <li><a href="ccc.html">......</a></li>
     </ul>
          <h1><a href="ccc.html">文学类</a></h1>
          <ul>
              <li><a href="ccc.html">《麦田里的守望者》</a></li>
              <li><a href="ccc.html">《羊脂球》</a></li>
              <li><a href="ccc.html">《到灯塔去》</a></li>
              <li><a href="ccc.html">《诗经》</a></li>
              <li><a href="ccc.html">......</a></li>
          </ul>
      </div>
      <div><h1><a href="ccc.html">艺术类</a></h1>
     <ul>
         <li><a href="ccc.html">《艺术的故事》 </a></li>
         <li><a href="ccc.html">《美的历程》</a></li>
         <li><a href="ccc.html">《西方美学史》</a></li>
         <li><a href="ccc.html">《艺术发展史》</a></li>
         <li><a href="ccc.html">......</a></li>
     </ul>
          <h1><a href="ccc.html">医学类</a></h1>
          <ul>
              <li><a href="ccc.html">《生命科学史》</a></li>
              <li><a href="ccc.html">《医学方法论》</a></li>
              <li><a href="ccc.html">《医学的历史》</a></li>
              <li><a href="ccc.html">《本草纲目》</a></li>
              <li><a href="ccc.html">......</a></li>
          </ul>
      </div>
      <div>
          <h1><a href="ccc.html">哲学类</a></h1>
      <ul>
          <li><a href="ccc.html">《哲学的故事》</a></li>
          <li><a href="ccc.html">《哲学与人生》</a></li>
          <li><a href="ccc.html">《大问题》</a></li>
          <li><a href="ccc.html">《西方哲学史》</a></li>
          <li><a href="ccc.html">......</a></li>
      </ul>
          <h1><a href="ccc.html">经济类</a></h1>
          <ul>
              <li><a href="ccc.html">《经济学原理》</a></li>
              <li><a href="ccc.html">《统计学原理》</a></li>
              <li><a href="ccc.html">《微观经济学》</a></li>
              <li><a href="ccc.html">《宏观经济学》</a></li>
              <li><a href="ccc.html">......</a></li>
          </ul>
      </div>
      <div><h1><a href="ccc.html">计算机类</a></h1>
      <ul>
          <li><a href="ccc.html">《代码大全》</a></li>
          <li><a href="ccc.html">《程序眼修炼之道》</a></li>
          <li><a href="ccc.html">《c程序设计语言》</a></li>
          <li><a href="ccc.html">《算法导论》</a></li>
          <li><a href="ccc.html">......</a></li>
      </ul>
          <h1><a href="ccc.html">人文类</a></h1>
          <ul>
              <li><a href="ccc.html">《陈序经》</a></li>
              <li><a href="ccc.html">《波风与波谷》</a></li>
              <li><a href="ccc.html">《伟大的海》</a></li>
              <li><a href="ccc.html">《幻境中相逢》</a></li>
              <li><a href="ccc.html">......</a></li>
          </ul>
      </div>
</body>
</html>

效果如下:
在这里图片描述

  • 14
    点赞
  • 3
    评论
  • 94
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值