第一个静态网页
2018-09-28 本文已影响0人
小兔哈尼
预览图
111.png
index.html文件
<!DOCTYPE html>
<html>
<head>
<title>电子书</title>
<link rel="stylesheet" type="text/css" href="style/mystyle.css">
</head>
<body style="overflow-x:hidden;overflow-y:scroll">
<div class="main">
<img id="titleimg" src="images/title01.png" alt="小兔哈尼看书"/>
<ul id="menu">
<li><a href="webs/junshi.htm">军事</a></li>
<li><a href="webs/wuxia.htm">武侠</a></li>
<li><a href="webs/yanqing.htm">言情</a></li>
<li><a href="webs/lishi.htm">历史</a></li>
<li><a href="webs/lishi.htm">小说</a></li>
<li><a href="webs/lishi.htm">散文</a></li>
<li><a href="webs/lishi.htm">诗歌</a></li>
<li><a href="webs/lishi.htm">音乐</a></li>
</ul>
</div>
<br/><br/>
<div class="divclear"></div>
<div class="main">
<img id="middleimg" src="images/0.png" alt="中间图片"/>
</div>
<div class="divclear"></div>
<div class="main">
<table class="booklist" border="0">
<caption class="tabletitle" align="top" border="1">华语言情风云版</caption>
<tr class="booktitle">
<td>霸道总裁爱上我</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>首长夫人这职业</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>莫少，亲够了吗</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>一遇总统定终身</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>奔波二八</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>哈哈哈哈</td>
<td class="bookdetail">持续更新</td>
</tr>
</table>
<table class="booklist" border="0">
<caption class="tabletitle" align="top" border="1">武侠世界</caption>
<tr class="booktitle">
<td>霸道总裁爱上我</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>首长夫人这职业</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>莫少，亲够了吗</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>一遇总统定终身</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>奔波二八</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>哈哈哈哈</td>
<td class="bookdetail">持续更新</td>
</tr>
</table>
<table class="booklist" border="0">
<caption class="tabletitle" align="top" border="1">月票排行榜</caption>
<tr class="booktitle">
<td>霸道总裁爱上我</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>首长夫人这职业</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>莫少，亲够了吗</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>一遇总统定终身</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>奔波二八</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>哈哈哈哈</td>
<td class="bookdetail">持续更新</td>
</tr>
</table>
</div>
<div class="divclear"></div>
<div class="main">
<table class="booklist" border="0">
<caption class="tabletitle" align="top" border="1">华语言情风云版</caption>
<tr class="booktitle">
<td>霸道总裁爱上我</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>首长夫人这职业</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>莫少，亲够了吗</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>一遇总统定终身</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>奔波二八</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>哈哈哈哈</td>
<td class="bookdetail">持续更新</td>
</tr>
</table>
<table class="booklist" border="0">
<caption class="tabletitle" align="top" border="1">武侠世界</caption>
<tr class="booktitle">
<td>霸道总裁爱上我</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>首长夫人这职业</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>莫少，亲够了吗</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>一遇总统定终身</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>奔波二八</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>哈哈哈哈</td>
<td class="bookdetail">持续更新</td>
</tr>
</table>
<table class="booklist" border="0">
<caption class="tabletitle" align="top" border="1">月票排行榜</caption>
<tr class="booktitle">
<td>霸道总裁爱上我</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>首长夫人这职业</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>莫少，亲够了吗</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>一遇总统定终身</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>奔波二八</td>
<td class="bookdetail">持续更新</td>
</tr>
<tr class="booktitle">
<td>哈哈哈哈</td>
<td class="bookdetail">持续更新</td>
</tr>
</table>
</div>
<div class="divclear"></div>
<div class="footer">
<p>联系我们 帮助中心 人才招聘
公共频道
</p>
<p>Power by 小兔哈尼</p>
</div>
</body>
</html>
mystyle.css文件
body {
background-color: #F6F6F6;
margin: 0px;
padding: 0px;
}
#menu li {
float: left;
list-style: none;
height: 40px;
line-height: 45px;
width: 120px;
background-color: #D8D8D8;
border-left: 2px solid #F2F2F2;
font-size: 25px;
display: block;
text-align: center;
}
#menu li a {
padding: 0;
margin: 0;
display: block;
color: #6E6E6E;
text-decoration: none
}
#menu li a:hover {
background: #146C9C;
color: #fff;
}
.main {
margin-left: 310px;
width: 1600px;
}
.divclear {
clear: both;
}
#middleimg {
width: 973px;
height: 90px;
margin-left: 42px;
padding: 1px;
}
.booklist {
float: left;
margin-left: 42px;
width: 297px;
background-color: white;
border-top: 2px solid #151515;
padding: 7px;
}
.tabletitle {
font-size: 25px;
font-weight: bold;
padding-bottom: 10px;
padding-top: 10px;
}
.bookdetail {
font-size: 4px;
padding-bottom: 0px;
color: #6E6E6E;
font-family: ��Բ;
}
#bottomhr {
height: 5em;
width: 70%;
}
.footer {
position: absolute;
bottom: 0;
height: 40px;
width: 100%;
text-align: center;
color: #6E6E6E;
}
