Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="MobileOptimized" content="240"/>
<meta name="applicable-device" content="mobile"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>小说站手机首页</title>
<style>
body{background-color: #F4F4F4}
a{text-decoration:none;}
.cc{height:0px;clear:both;}
li{list-style: none;}
*{
margin: 0;
padding: 0;
}
.top{
height: 55px;
background-color: #285258;
}
.top ul li{
float: left;
width: 18%;
margin: 15px 2px;
/*padding:0px;*/
text-align: center;
font-size: 1.15em;
}
.top a{
color:white;
}
.fengmian{
border: 1px solid #ddd;
border-radius: 3px;
margin: 10px;
}
.tj1{
border-bottom-width: 1px;
border-bottom-style: solid;
padding: 5px 10px;
border-color: #E2E2E2;
}
.fengmian ul{
float:left;
padding-left: 15px;
list-style: none;
}
.fengmian li {
float: left;
width: 48%;
}
.fengmian img{
float: left;
width: 100%;
}
.fengmian span {
text-align: center;
margin-top: 145px;
height: 20px;
line-height: 20px;
}
.liebiao{
margin: 0 auto;
}
.menu{
background-color: #285258;
border: 1px solid #bbb;
line-height: 40px;
padding-left: 20px;
}
.menu li{
display: inline-block;
color: white;
width: 30%;
}
.content{
border: 1px solid #ccc;
}
.hide{
display: none;
}
.current{
background-color: #0099dd;
color: black;
}
.content ul {
margin: 5px;
border-bottom-width: 1px;
}
.footer{
margin-left: auto;
border: 1px solid #bbb;
}
.youqing{
border: 1px solid #bbb;
background-color: #285258;
}
</style>
</head>
<body>
<div class="top">
<ul>
<li><a href="">首页</a></li>
<li><a href="">排行</a></li>
<li><a href="">类别</a></li>
<li><a href="">全本</a></li>
<li><a href="">更新</a></li>
</ul>
<div class="cc"></div>
</div>
<div class="fengmian">
<div class="tj1">封面推荐</div>
<ul>
<li>
<a href=""><img src="1.jpg" alt=""></a><br/>
<span><a href="">神级保镖</a></span>
</li>
<li>
<a href=""><img src="2.jpg" alt=""></a><br/>
<span><a href="">鲜妻好甜</a></span>
</li>
<li>
<a href=""><img src="3.jpg" alt=""></a><br/>
<span><a href="">溺爱成婚</a></span>
</li>
<li>
<a href=""><img src="4.jpg" alt=""></a><br/>
<span><a href="">绝世护花高手</a></span>
</li>
</ul>
<div class="cc"></div>
</div>
<div class="liebiao">
<div class="menu">
<li index="gengxin" class="current" onclick="tab(this);">最近更新</li>
<li index="dianji" onclick="tab(this);">点击榜</li>
<li index="shoucang" onclick="tab(this);">收藏榜</li>
</div>
<div class="content">
<div id="gengxin">
<ul>
<li><span>1. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般
</li>
<li><span>2. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般
</li>
<li><span>3. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般
</li>
<li><span>4. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般
</li>
<li><span>5. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般
</li>
</ul>
</div>
<div id="dianji" class="hide">
<ul>
<li><span>1. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般</li>
<li><span>2. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般</li>
<li><span>3. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般</li>
<li><span>4. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般</li>
</ul>
</div>
<div id="shoucang" class="hide">
<ul>
<li><span>1. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般</li>
<li><span>2. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般</li>
<li><span>3. <a href="">武道大帝</a> - <a href="" class="xszz">忘情至尊</a></span><span class="xszk"><i>12-21 14:41</i></span></li>
<li class="zjgxjj"> 少年罗修出身卑微，天赋一般</li>
</ul>
</div>
<div class="cc"></div>
</div>
</div>
<script>
function tab(self) {
$(self)
.addClass("current")
.siblings()
.removeClass("current");
var box = "#" + $(self).attr("index");
$(box)
.removeClass("hide")
.siblings()
.addClass("hide");
}
</script>
<div class="footer">
<div class="youqing">友情链接</div>
<ul>
<a href="http://www.baidu.com">百度搜索</a>
<a href="http://www.so.com">360搜索</a>
<a href="http://www.sougou.com">搜狗搜索</a>
<a href="http://m.sm.cn/">神马搜索</a>
</ul>
</div>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
