原网站 https://bbs.hupu.com/all-gambia
我非常喜欢虎扑,所以我打算仿造一个虎扑论坛,这是仿造的第一个网页,也是虎扑步行街的首页,我仿造这个页面并对这个页面进行了优化,比如
1.放弃了浮动布局,全部采用了flex布局。
2.网站布局和特效纯采用html+css的方式实现,比原网站流畅了许多,比如关注虎扑、消息、重点是左边导航栏的特效比原网站流畅非常多。
3.加强了细节,特别是左边导航栏里的版块分类鼠标悬浮时弹出的版块信息,该版块信息用 ul 和 li 标签 实现的,li 标签之间的边框完美重合,li 标签与ul 标签的边框也完美重合,放大网页来看也毫无破绽,原版网页的这个版块信息的bottom边框是不重合的。
Chrome浏览器下完美,其它浏览器没测试过。
代码如下(不包含图片),仅供学习用途,禁止商用。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>虎扑社区</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit"/>
<link rel="shortcut icon" href="./image/favicon.ico" />
<style>
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,main{
display: block;
}
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 12px;
font-family: "lucida grande",tahoma,verdana,arial,\5b8b\4f53,sans-serif;
color: #444;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#header{
border-bottom: 1px solid #E3E3E3;
color:#999;
}
#header a {
color:#999;
}
#header-nav{
display: flex;
width: 1200px;
height: 19px;
margin: 0 auto;
justify-content: space-between;
}
#header-nav-left ,#header-nav-right{
display: flex;
}
#header-nav-left{
margin-left: -10px;
}
#header-nav-left>li>a:hover{
text-decoration: underline;
color:#A41F24;
}
#header-nav-right>li>a:hover{
text-decoration: underline;
color:#A41F24;
}
#header-nav li{
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
#header-nav .line{
color:#ececec;
padding: 0 !important;
}
.red{
color: #A41F24 !important;
}
main{
width: 1200px;
margin: 12px auto 10px auto;
}
#logo{
height: 52px;
width: 140px;
background: white;
margin-top: 7px;
}
#main-top{
display: flex;
}
#block{
display: flex;
flex-direction: column;
flex: 1;
margin-left: 15px;
height: 58px;
}
#block li{
display: flex;
padding: 0 8px;
justify-content: center;
align-items: center;
}
#block .line{
padding: 0 !important;
}
#block-one ,#block-two{
display: flex;
}
#block-one{
height: 30px;
background: #A41F24;
border-top:1px solid #A41F24;
border-bottom:1px solid white;
}
#block-one a{
color: white;
}
#block-one a:hover{
text-decoration:underline;
}
#block-two a:hover{
color: #A41F24;
}
#block-two a:hover{
text-decoration:underline;
}
#block-one .line{
color: #8e0d12;
}
#block-two{
background-color: #eff1f4;
background: -webkit-gradient(linear,0 0,0 bottom,from(#e3e7eb),to(#eff1f4));
background: -moz-linear-gradient(top,#e3e7eb,#eff1f4);
background: -o-linear-gradient(top,#e3e7eb,#eff1f4);
background: -ms-linear-gradient(top,#e3e7eb,#eff1f4);
flex: 1;
border-bottom: 1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
#main-nav{
margin-top: 7px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
border-bottom: 4px solid #A92229;
}
#main-nav-item{
display: flex;
}
#main-nav-item>li{
padding: 0 15px;
height: 31px;
display: flex;
justify-content: center;
align-items: center;
background: #ebeff1;
margin-right: 1px;
border:1px solid #ebeff1;
background: -webkit-gradient(linear,0 0,0 bottom,from(#fff),to(#ebeff1));
background: -moz-linear-gradient(top,#fff,#ebeff1);
background: -o-linear-gradient(top,#fff,#ebeff1);
background: -ms-linear-gradient(top,#fff,#ebeff1);
}
#main-nav-item a{
position: relative;
top:2px;
}
#main-nav-item a:hover{
text-decoration: underline;
}
.main-nav-select{
background: #A92229 !important;
border: 1px solid #A92229 !important;
}
.main-nav-select >a{
color: white;
}
.block-one-select{
background: -webkit-gradient(linear,0 0,0 bottom,from(#fff),to(#e3e7eb));
background: -moz-linear-gradient(top,#fff,#e3e7eb);
background: -ms-linear-gradient(top,#fff,#e3e7eb);
background: -o-linear-gradient(top,#fff,#e3e7eb);
margin-bottom: -1px;
/*height: 29px;*/
}
.block-one-select >a{
color: #444444!important;
font-weight: bold;
position: relative;
top:1px;
}
#search{
display: flex;
}
#search-input{
width: 198px;
height: 25px;
padding:0 4px;
border-top:1px solid #d2d5d8;
border-left:1px solid #d2d5d8;
border-bottom:1px solid #d2d5d8;
border-right:none;
}
#search-button{
height: 25px;
width: 23px;
border: 1px solid #d2d5d8;
background: url(./image/top_ico.png) 0 -247px no-repeat #eaeaea;
}
.icon-mobile{
width: 8px;
height: 12px;
background: url(./image/top_ico.png) 0 -167px no-repeat;
margin-right: 6px;
}
.midden{
display: flex;
align-items: center;
}
.triangle{
width:0;
height:0;
overflow:hidden;
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width:4px;
border-style:solid; /*ie6下会出现不透明的兼容问题*/
border-color:#999 transparent transparent transparent;
position: relative;
left:4px;
top:2px;
transition: all 0.2s
}
#main-body{
margin-top: 10px;
display: flex;
border-top:3px solid #E5E5E5;
}
#bbsPlate{
width: 146px;
padding: 10px 0 10px 15px;
background-color: #ECF1F4;
border-top: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
border-right: 1px solid #C2C7CA;
}
.myPlate{
padding-left: 10px;
height: 19px;
margin-bottom: 5px;
display: flex;
align-items: center;
margin-top: 10px;
}
.myPlateHeader{
font-size: 13px;
color: #b50000;
font-weight: 600;
margin-right: 5px;
}
.plateListA{
}
.plateListA>li{
height: 32px;
display: flex;
border-bottom: 1px solid white;
}
.plateListA>li:hover{
background-color: white;
border-left: 1px solid #C2C7CA;
border-right: 1px solid white;
border-top: 1px solid #C2C7CA;
border-bottom: 1px solid #C2C7CA;
position: relative;
top:-1px;
left:1px;
box-shadow: -3px 3px 0 #C2C7CA;
}
.plateListA>li:hover .showName{
color: red;
}
.plateListA>li>a{
padding-left: 10px;
white-space:nowrap;
overflow: hidden;
align-items: center;
display: flex;
width: 100%;
}
.showName{
margin-right: 5px;
}
.num{
font-style: italic;
}
#bbsArticle{
padding: 14px 14px;
width: 772px;
border-top: 1px solid #AAAAAA;
border-bottom:1px solid #AAAAAA;
}
#bbsArticle>h1{
font-size: 18px;
padding-left: 8px;
margin-bottom: 10px;
}
.articleList>h3{
background-color: #EAEEF0;
height: 26px;
display: flex;
align-items: center;
border-top: 1px solid #BCC4CB;
padding-left: 15px;
margin: 8px 0;
color:#b50000;
}
.articleList ul{
padding: 0 10px;
}
.articleList li{
height: 31px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #DDD;
}
.articleInfo {
display: flex;
}
.articleInfo a{
color:#b50000;
}
.articleInfo span{
margin-left: 5px;
color:#666;
}
#allPlate{
width: 282px;
border: 1px solid #AAAAAA;
padding: 47px 15px 0 15px;
}
#allPlate>h3{
height: 26px;
background-color: #EAEEF0;
border-top: 1px solid #AAAAAA;
padding-left: 10px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
#allPlate>h3>a{
color: #b50000;
}
.allPlateItem{
padding-left: 10px;
padding-bottom: 25px;
}
.allPlateItem a:hover{
color: #b50000;
text-decoration: underline;
}
.plateTitle{
border-bottom: 1px solid #d5d5d5;
color: #b50000;
height: 17px;
margin-bottom: 5px;
}
.allPlateItem ul{
display: flex;
flex-wrap: wrap;
}
.allPlateItem li{
height: 25px;
padding-left: 2px;
width: 78px;
display: flex;
align-items: center;
border-bottom: 1px dotted #DDD;
}
.articleList a:hover{
text-decoration: underline;
}
#concern{
position: relative;
border-left:1px solid transparent;
border-right:1px solid transparent;
}
#concern:hover{
background-color: #FAFAFA;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
/*border-bottom: 1px solid #FAFAFA;*/
}
#concern>a:hover{
color:#A41F24;
}
#concern:hover .triangle{
transform: rotate(180deg);
transform-origin:50% 25%;
transition: all 0.2s;
}
#concern:hover #concernDrop{
display: block;
}
#concernDrop{
display: none;
position: absolute;
top: 19px;
width: 100px;
background-color: #FAFAFA;
left:-23px;
border:1px solid #CCCCCC;
}
#concernDrop>li{
height: 26px;
justify-content: flex-start;
align-items: stretch;
padding-left: 0;
padding-right: 0;
}
#concernDrop a:hover{
color:#A41F24;
background-color:#EDF1F4;
}
#concernDrop a{
display: flex;
width: 100%;
align-items: center;
padding-left: 8px;
}
.icon-weiBo{
width: 16px;
height: 16px;
background: url(./image/top_ico.png) 0 -180px no-repeat;
margin-right: 5px;
}
.icon-weChat{
width: 16px;
height: 16px;
background: url(./image/top_ico.png) -64px -180px no-repeat;
margin-right: 5px;
}
.icon-instagram{
width: 16px;
height: 16px;
background: url(./image/top_ico.png) -80px -180px no-repeat;
margin-right: 5px;
}
#concern .whiteLine{
display: none;
position: absolute;
border-bottom: 1px solid #FAFAFA;
top:19px;
width: 76px;
height: 1px;
left: 0;
}
#concern:hover .whiteLine{
display: block;
}
#message{
position: relative;
border-left:1px solid transparent;
border-right:1px solid transparent;
}
#message >a{
text-decoration: none!important;
}
#message:hover >a{
color: #999!important;
}
#message:hover{
background-color: #FAFAFA;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
}
#message .whiteLine{
display: none;
position: absolute;
border-bottom: 1px solid #FAFAFA;
top:19px;
width: 44px;
height: 1px;
left: 0;
}
#message:hover .whiteLine{
display: block;
}
#message:hover #messageDrop{
display: block;
}
#messageDrop{
display: none;
position: absolute;
width: 120px;
top:19px;
left:-75px;
background-color: #FAFAFA;
border:1px solid #CCCCCC;
}
#messageDrop li{
height: 26px;
padding: 0;
justify-content: start;
align-items: stretch;
}
#messageDrop a{
width: 100%;
display: flex;
align-items: center;
padding-left: 10px;
}
#set{
position: relative;
border-left:1px solid transparent;
border-right:1px solid transparent;
}
#set:hover .triangle{
transform: rotate(180deg);
transform-origin:50% 25%;
transition: all 0.2s;
}
#set:hover{
background-color: #FAFAFA;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
}
#setDrop{
display: none;
position: absolute;
top:19px;
left:-47px;
background-color: #FAFAFA;
border:1px solid #CCCCCC;
width: 100px;
}
#setDrop li{
height: 26px;
justify-content: flex-start;
align-items: stretch;
padding: 0;
}
#setDrop a{
width: 100%;
display: flex;
align-items: center;
padding-left: 10px;
}
#setDrop a:hover{
background-color:#EDF1F4;
color:#A41F24;
}
#set:hover .whiteLine{
display: block;
}
#set:hover #setDrop{
display: block;
}
#set .whiteLine{
display: none;
position: absolute;
border-bottom: 1px solid #FAFAFA;
top:19px;
width: 52px;
height: 1px;
left: 0;
}
.from:hover a{
color: #b50000;
}
.plateListItem{
position: relative;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
border-left:1px solid transparent
}
.plateListItem .triangle{
width:0;
height:0;
overflow:hidden;
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width:4px;
border-style:solid; /*ie6下会出现不透明的兼容问题*/
border-color:transparent transparent transparent #C2C7CA;
position: relative;
left: -10px;
top:0;
transition: color 0.1s
}
.plateListItem .whiteLine{
display: none;
height: 30px;
position: absolute;
border-right: 1px solid #F1F1F1;
width: 1px;
left:127px;
}
.plateListItem:hover{
top:-1px;
left:1px;
background-color: #F1F1F1;
border-top:1px solid #8C8C8C;
border-bottom:1px solid #8C8C8C;
border-left:1px solid #8C8C8C;
}
.plateListItem:hover .whiteLine{
display: block;
}
.plateListItem:hover .plateListItemDrop{
display: flex;
}
.plateListItem:hover>a{
padding-left: 9px;
text-decoration: underline;
color: #B50000;
}
.plateListItem:hover>a>span{
position: relative;
top:1px;
color: inherit;
}
.plateListItem:hover .triangle{
position: relative;
top:1px;
left: -11px;
border-color:transparent transparent transparent #B50000;
}
.plateListItemDrop{
display: none;
position: absolute;
left:127px;
top:-1px;
background-color: #F1F1F1;
border: 1px solid #8C8C8C;
overflow: hidden;
width: 885px;
flex-direction: row;
flex-wrap: wrap;
}
.plateListItemDrop>li{
width: 221px;
height: 55px;
border-right: 1px solid #DEDEDE;
border-bottom: 1px solid #DEDEDE;
display: flex;
flex-direction: column;
margin-bottom: -1px;
}
.plateListItemDrop>li:nth-child(4n)
{
width: 220px;
border-right: none;
}
.plateListItemDrop>li:nth-child(4)~li{
padding-top: 1px;
height: 56px;
}
.borough >a{
display: block;
width: auto;
margin-right: 5px;
max-width: 80%;
color: #005eac;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.borough >a:hover{
color: white;
background-color:#77AADD;
}
.borough{
display: flex;
align-items: center;
}
.borough ,.newInvitation{
display: flex;
flex: 1;
padding-left: 10px;
}
.newInvitation{
justify-content: flex-start;
align-items: center;
}
.newInvitation>a{
display: block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.newInvitation>a:hover{
color: #B50000;
text-decoration: underline;
}
.plateListB>li{
height: 32px;
display: flex;
border-bottom: 1px solid white;
}
.plateListB >li>a{
padding-left: 10px;
white-space:nowrap;
overflow: hidden;
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
#toTop{
position: fixed;
right: 2%;
bottom: 100px;
height: 48px;
width: 48px;
background: url("./image/bbsImg.png") center/100% no-repeat;
z-index: 999;
}
footer>nav{
margin: 0 auto;
width: 1200px;
padding: 8px 0 20px;
border-top: 1px solid #e5e5e5;
}
footer>nav>ul{
display: flex;
justify-content: center;
}
footer>nav>ul>li{
margin-right: 4px;
color:#999;
}
footer a{
color:#999;
}
footer a:hover{
text-decoration: underline;
color: #b50000;
}
</style>
</head>
<body>
<header id="header">
<nav id="header-nav">
<ul id="header-nav-left">
<li>
<a href="javascript:void(0)" class="midden">
<i class="icon-mobile"></i>手机虎扑
</a>
</li>
<li class="line">|</li>
<li><a class="red" href="javascript:void(0)">虎扑客户端</a></li>
<li class="line">|</li>
<li id="concern">
<a class="midden" href="javascript:void(0)">关注虎扑<i class="triangle"></i></a>
<ul id="concernDrop">
<li><a href="javascript:void(0)"><i class="icon-weiBo"></i>新浪微博</a></li>
<li><a href="javascript:void(0)"><i class="icon-weChat"></i>官方微信</a></li>
<li><a href="javascript:void(0)"><i class="icon-instagram"></i>Instagram</a></li>
</ul>
<div class="whiteLine"></div>
</li>
</ul>
<ul id="header-nav-right">
<li>你好,<a href="javascript:void(0)">虎扑JR</a></li>
<li class="line">|</li>
<li><a href="javascript:void(0)">我的首页</a></li>
<li class="line">|</li>
<li id="message">
<a href="javascript:void(0)">消息</a>
<ul id="messageDrop">
<li><a href="javascript:void(0)">短消息</a></li>
</ul>
<div class="whiteLine"></div>
</li>
<li class="line">|</li>
<li><a href="javascript:void(0)">虎扑币</a></li>
<li class="line">|</li>
<li id="set">
<a class="midden" href="javascript:void(0)">设置<i class="triangle"></i></a>
<ul id="setDrop">
<li><a href="javascript:void(0)">设置</a></li>
<li><a href="javascript:void(0)">账号安全</a></li>
<li><a href="javascript:void(0)">银行</a></li>
<li><a href="javascript:void(0)">帮助</a></li>
<li><a href="javascript:void(0)">退出</a></li>
</ul>
<div class="whiteLine"></div>
</li>
</ul>
</nav>
</header>
<main>
<header id="main-top">
<a href="javascript:void(0)"><img id="logo" src="./image/hp_logo_sports.png" alt="虎扑"></a>
<div id="block">
<ul id="block-one">
<li>
<a href="javascript:void(0)" >虎扑首页</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >NBA</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >CBA</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >电竞</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >国际足球</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >中国足球</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >赛车</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >装备</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >识货</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >社区</a>
</li>
<li class="line">|</li>
<li class="block-one-select">
<a href="javascript:void(0)" >步行街</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >路人王</a>
</li>
<li class="line">|</li>
<li>
<a href="javascript:void(0)" >更多</a>
</li>
</ul>
<ul id="block-two">
<li>
<a href="javascript:void(0)" >首页</a>
</li>
</ul>
</div>
</header>
<nav id="main-nav">
<ul id="main-nav-item">
<li class="main-nav-select"><a href="javascript:void(0)">步行街热帖</a></li>
<li><a href="javascript:void(0)">步行街主干道</a></li>
<li><a href="javascript:void(0)">晒晒照片</a></li>
<li><a href="javascript:void(0)">影视</a></li>
<li><a href="javascript:void(0)">娱乐圈</a></li>
<li><a href="javascript:void(0)">数码</a></li>
<li><a href="javascript:void(0)">车友交流</a></li>
<li><a href="javascript:void(0)">啥破图都有</a></li>
<li><a href="javascript:void(0)">视频</a></li>
<li><a href="javascript:void(0)">家装房产</a></li>
<li><a href="javascript:void(0)">军事</a></li>
<li><a href="javascript:void(0)">旅游</a></li>
<li><a href="javascript:void(0)">ACG</a></li>
</ul>
<div id="search">
<input type="search" id="search-input" placeholder="搜索视频、帖子"/>
<input type="button" id="search-button">
</div>
</nav>
<section id="main-body">
<nav id="bbsPlate">
<p class="myPlate">
<span class="myPlateHeader">我关注的版块</span>
<span><a href="javascript:void(0)">管理</a></span>
</p>
<ul class="plateListA">
<li><a href="javascript:void(0)"><span class="showName">我关注的版块帖子</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">湿乎乎的话题</span><span class="num">88888</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">CBA专区</span><span class="num">88888</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">深蓝讨论群</span><span class="num">88888</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">步行街主干道</span><span class="num">110200</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">NBA2K专区</span><span class="num">88888</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">中国篮球话题区</span><span class="num">88888</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">FIBA-国际篮球</span><span class="num">88888</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">骑士专区</span><span class="num">88888</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">广东华南虎</span><span class="num">88888</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">ACG</span><span class="num">4055</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">开放区</span><span class="num"></span></a></li>
<li><a href="javascript:void(0)"><span class="showName">英雄联盟</span><span class="num">67899</span></a></li>
<li><a href="javascript:void(0)"><span class="showName">数码区</span><span class="num">10652</span></a></li>
</ul>
<p class="myPlate">
<span class="myPlateHeader">版块分类</span>
</p>
<ul class="plateListB">
<li class="plateListItem">
<a href="javascript:void(0)"><span class="showName">NBA论坛</span><i class="triangle"></i></a>
<ul class="plateListItemDrop">
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">勇士从巅峰跌落,用这个纪念杜兰特的视频纪念过去的三年</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">[流言板]快船得到150分而仅有4名球员得分上双,30年来首次</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
</ul>
<div class="whiteLine"></div>
</li>
<li class="plateListItem">
<a href="javascript:void(0)"><span class="showName">CBA论坛</span><i class="triangle"></i></a>
<ul class="plateListItemDrop">
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">勇士从巅峰跌落,用这个纪念杜兰特的视频纪念过去的三年</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">[流言板]快船得到150分而仅有4名球员得分上双,30年来首次</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
</ul>
<div class="whiteLine"></div>
</li>
<li class="plateListItem">
<a href="javascript:void(0)"><span class="showName">国际足球论坛</span><i class="triangle"></i></a>
<ul class="plateListItemDrop">
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">勇士从巅峰跌落,用这个纪念杜兰特的视频纪念过去的三年</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">[流言板]快船得到150分而仅有4名球员得分上双,30年来首次</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
</ul>
<div class="whiteLine"></div>
</li>
<li class="plateListItem">
<a href="javascript:void(0)"><span class="showName">中国足球论坛</span><i class="triangle"></i></a>
<ul class="plateListItemDrop">
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">勇士从巅峰跌落,用这个纪念杜兰特的视频纪念过去的三年</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">[流言板]快船得到150分而仅有4名球员得分上双,30年来首次</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
</ul>
<div class="whiteLine"></div>
</li>
<li class="plateListItem">
<a href="javascript:void(0)"><span class="showName">游戏电竞</span><i class="triangle"></i></a>
<ul class="plateListItemDrop">
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">勇士从巅峰跌落,用这个纪念杜兰特的视频纪念过去的三年</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">[流言板]快船得到150分而仅有4名球员得分上双,30年来首次</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
<li>
<p class="borough"><a href="javascript:void(0)">话题区a</a><span class="num">8</span></p>
<p class="newInvitation"><a href="javascript:void(0)">深圳的安保人员...</a></p>
</li>
</ul>
<div class="whiteLine"></div>
</li>
</ul>
</nav>
<article id="bbsArticle">
<h1>步行街热帖</h1>
<div class="articleList">
<h3>步行街</h3>
<ul>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">女朋友沙滩比基尼part2.</a>
<span>15亮288回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">李佳琦上《吐槽大会》:我比几百万人都努力。什么水平?</a>
<span>26亮79回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">挑战上海超大牛肉面,30分钟吃完免单</a>
<span>50亮464回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">为什么工厂里的女孩子看不上工厂里的男孩子? zt</a>
<span>50亮323回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">辩论名场面:罗永浩逻辑缜密步步紧逼,王自如心态崩溃放弃抵抗!</a>
<span>50亮446回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">官方吐槽最为致命!央视喷这些烂片什么水平?</a>
<span>34亮105回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">双方辩友都保持了极大克制,展现了极高素质 zt</a>
<span>45亮126回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">所谓成功 只是突破了那一段时间的平庸而已</a>
<span>17亮135回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">关于买两张票却用一个座位放行李是合法的?合个锤子法好吗?</a>
<span>40亮405回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">20092019, 减重70斤,博士期间发表SCI论文10篇,什么水平</a>
<span>9亮67回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">8K超清航拍洛杉矶的超级科技梦幻夜景!zt</a>
<span>18亮72回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">怒喷名场面!范志毅的经典足球圣经什么水平?</a>
<span>17亮69回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">如此前女友,我何以为报</a>
<span>50亮366回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">陈建斌演的曹操是什么水平?</a>
<span>23亮125回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">爆冷!</a>
<span>34亮122回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">转帖:2亿,比太阳热10倍!我国“人造太阳”预计明年投入运行</a>
<span>40亮221回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">帮闺蜜相个亲,坐标波士顿! 有意欢迎私信哦</a>
<span>16亮88回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">大半夜睡不着翻看女朋友手机</a>
<span>50亮737回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">白岩松:米其林还是专注于轮胎吧,我们的胃我们自己定位!zt</a>
<span>30亮181回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">讲个我室友保研失败的事</a>
<span>24亮76回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
</ul>
</div>
<div class="articleList">
<h3>步行街</h3>
<ul>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">女朋友沙滩比基尼part2.</a>
<span>15亮288回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">李佳琦上《吐槽大会》:我比几百万人都努力。什么水平?</a>
<span>26亮79回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">挑战上海超大牛肉面,30分钟吃完免单</a>
<span>50亮464回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">为什么工厂里的女孩子看不上工厂里的男孩子? zt</a>
<span>50亮323回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">辩论名场面:罗永浩逻辑缜密步步紧逼,王自如心态崩溃放弃抵抗!</a>
<span>50亮446回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">官方吐槽最为致命!央视喷这些烂片什么水平?</a>
<span>34亮105回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">双方辩友都保持了极大克制,展现了极高素质 zt</a>
<span>45亮126回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">所谓成功 只是突破了那一段时间的平庸而已</a>
<span>17亮135回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">关于买两张票却用一个座位放行李是合法的?合个锤子法好吗?</a>
<span>40亮405回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">20092019, 减重70斤,博士期间发表SCI论文10篇,什么水平</a>
<span>9亮67回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">8K超清航拍洛杉矶的超级科技梦幻夜景!zt</a>
<span>18亮72回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">怒喷名场面!范志毅的经典足球圣经什么水平?</a>
<span>17亮69回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">如此前女友,我何以为报</a>
<span>50亮366回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">陈建斌演的曹操是什么水平?</a>
<span>23亮125回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">爆冷!</a>
<span>34亮122回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">转帖:2亿,比太阳热10倍!我国“人造太阳”预计明年投入运行</a>
<span>40亮221回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">帮闺蜜相个亲,坐标波士顿! 有意欢迎私信哦</a>
<span>16亮88回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">大半夜睡不着翻看女朋友手机</a>
<span>50亮737回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">白岩松:米其林还是专注于轮胎吧,我们的胃我们自己定位!zt</a>
<span>30亮181回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">讲个我室友保研失败的事</a>
<span>24亮76回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
</ul>
</div>
<div class="articleList">
<h3>步行街</h3>
<ul>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">女朋友沙滩比基尼part2.</a>
<span>15亮288回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">李佳琦上《吐槽大会》:我比几百万人都努力。什么水平?</a>
<span>26亮79回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">挑战上海超大牛肉面,30分钟吃完免单</a>
<span>50亮464回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">为什么工厂里的女孩子看不上工厂里的男孩子? zt</a>
<span>50亮323回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">辩论名场面:罗永浩逻辑缜密步步紧逼,王自如心态崩溃放弃抵抗!</a>
<span>50亮446回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">官方吐槽最为致命!央视喷这些烂片什么水平?</a>
<span>34亮105回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">双方辩友都保持了极大克制,展现了极高素质 zt</a>
<span>45亮126回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">所谓成功 只是突破了那一段时间的平庸而已</a>
<span>17亮135回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">关于买两张票却用一个座位放行李是合法的?合个锤子法好吗?</a>
<span>40亮405回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">20092019, 减重70斤,博士期间发表SCI论文10篇,什么水平</a>
<span>9亮67回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">8K超清航拍洛杉矶的超级科技梦幻夜景!zt</a>
<span>18亮72回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">怒喷名场面!范志毅的经典足球圣经什么水平?</a>
<span>17亮69回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">如此前女友,我何以为报</a>
<span>50亮366回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">陈建斌演的曹操是什么水平?</a>
<span>23亮125回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">爆冷!</a>
<span>34亮122回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">转帖:2亿,比太阳热10倍!我国“人造太阳”预计明年投入运行</a>
<span>40亮221回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">帮闺蜜相个亲,坐标波士顿! 有意欢迎私信哦</a>
<span>16亮88回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">大半夜睡不着翻看女朋友手机</a>
<span>50亮737回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">白岩松:米其林还是专注于轮胎吧,我们的胃我们自己定位!zt</a>
<span>30亮181回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
<li>
<span class="articleInfo">
<a href="javascript:void(0)">讲个我室友保研失败的事</a>
<span>24亮76回复</span>
</span>
<span class="from">
<a href="javascript:void(0)">步行街主干道</a>
</span>
</li>
</ul>
</div>
</article>
<nav id="allPlate">
<h3><a href="javascript:void(0)">版块列表</a></h3>
<div class="allPlateItem">
<h4 class="plateTitle">步行街</h4>
<ul>
<li><a href="javascript:void(0)">步行街主干道</a></li>
</ul>
</div>
<div class="allPlateItem">
<h4 class="plateTitle">影音娱乐</h4>
<ul>
<li><a href="javascript:void(0)">娱乐圈</a></li>
<li><a href="javascript:void(0)">影视区</a></li>
<li><a href="javascript:void(0)">ACG区</a></li>
<li><a href="javascript:void(0)">音乐区</a></li>
</ul>
</div>
<div class="allPlateItem">
<h4 class="plateTitle">生活</h4>
<ul>
<li><a href="javascript:void(0)">数码区</a></li>
<li><a href="javascript:void(0)">家装房产</a></li>
<li><a href="javascript:void(0)">游戏圈</a></li>
<li><a href="javascript:void(0)">股票区</a></li>
<li><a href="javascript:void(0)">旅游区</a></li>
<li><a href="javascript:void(0)">车友交流</a></li>
<li><a href="javascript:void(0)">学府路</a></li>
<li><a href="javascript:void(0)">万事屋</a></li>
<li><a href="javascript:void(0)">文学区</a></li>
<li><a href="javascript:void(0)">情感区</a></li>
<li><a href="javascript:void(0)">健身和运动健</a></li>
</ul>
</div>
</nav>
<a id="toTop" href="javascript:void(0)"></a>
</section>
</main>
<footer>
<nav>
<ul>
<li>Copyright by 虎扑JRs &</li>
<li><a href="javascript:void(0)">虎扑</a></li>
<li>-</li>
<li><a href="javascript:void(0)">手机虎扑网</a></li>
<li>-</li>
<li><a href="javascript:void(0)">虎扑App</a></li>
<li>-</li>
<li><a href="javascript:void(0)">服务协议</a></li>
<li>-</li>
<li><a href="javascript:void(0)">网站地图</a></li>
<li>-</li>
<li><a href="javascript:void(0)">NBA</a></li>
<li>-</li>
<li><a href="javascript:void(0)">CBA</a></li>
<li>-</li>
<li><a href="javascript:void(0)">足球</a></li>
<li>-</li>
<li><a href="javascript:void(0)">电竞</a></li>
<li>-</li>
<li><a href="javascript:void(0)">赛车</a></li>
</ul>
</nav>
</footer>
</body>
</html>
整个项目源码