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> XXX图书管理系统</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>     
<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>
效果如下：
