全文用css和html编辑
github地址：/yangguangpangtong/note.git
静态网页首页，背景图是我拿ps乱做的。
二级页面，即点击古典文学后的页面。
三级网页，即红楼梦网页
这时候回到一级页面会发现之前点击过的位置的字体由黄色成为灰色，以及鼠标停留图片和文字会有位置和颜色的变化,此处鼠标位于“人文科学”这四个字上面。
GitHub：
首页的HTML代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" href="css.css" type="text/css"></head><body ><div id="bg"><h3 class="cc">咔咔小说网，看你喜欢看的书</h3><br><form><div id="search"><input type="text" placeholder="三体"><input type="submit" value="搜索"></div></form><br><ul type="None" class="list"><li><a href="list1.html" target="_blank">古典文学</a></li><li><a href="list2.html" target="_blank">科幻奇迹</a></li><li><a href="list3.html" target="_blank">人文科学</a></li><li><a href="list4.html" target="_blank">轻松一刻</a></li></ul><br><br><hr color="black" size="20px"><div class="cc"><h2 align="center">排行榜</h2></div><ul type="None" class="pic"><li><a href="西游记.html" target="_blank"><img src="image/西游记.PNG" alt="西游记"></a> </li><li><a href="红楼梦.html" target="_blank"><img src="image/红楼梦.PNG" alt="红楼梦"></a></li><li><a href="三国演义.html" target="_blank"><img src="image/三国演义.PNG" alt="三国演义"></a></li><li><a href="水浒传.html" target="_blank"><img src="image/水浒传.PNG" alt="水浒传"></a></li></ul><br><br><br><br><br><br><br><br><br><br><br><br><br><ul type="None" class="list"><li><a href="西游记.html" target="_blank">西游记</a> </li><li><a href="红楼梦.html" target="_blank">红楼梦</a></li><li><a href="三国演义.html" target="_blank">三国演义</a></li><li><a href="水浒传.html" target="_blank">水浒传</a></li></ul></div><div id="about"><h2 class="cc" align="left">关于我：</h2><ul id="abouts"><li>地址：宇宙银河火星</li><li>联系方式：10086</li><li>网址：</li></ul></div></body></html>
css代码：
/*以下为blog的css*/#bg{background-image: url("image/bg.PNG");background-size: cover;width: 1555px;height: 600px;}.cc{border-color: honeydew;color: #0020ff;}#search :hover{position: relative;color: coral;left: 1px;top: 2px;}.pic li{text-align: center;width: 350px;float: left;}.pic :hover{position: relative;left:1px;top:3px;}.list li{text-align: center;width: 350px;float: left;font-size: larger;}a{color: yellow;text-decoration: none}a:visited{color: #01;}a:hover{color: #022fff;}.list li:hover{position: relative;left:1px;top:3px;}#abouts li{text-align: left;width: 200px;float: left;}/*以下开始为list的css*/#biu{width: 2000px;height: 600px;background-image: url("image/bg.PNG");}.xiu{font-size: larger;color: #022fff;}.xiu li:hover{position: relative;left:1px;top:3px;}.xiu li{line-height: 50px;}
