仿造虎扑步行街首页。

原网站 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>
整个项目源码
https://gitee.com/island_tears/copyHupu
仿造虎扑步行街首页。相关推荐

python网络爬虫-爬取虎扑步行街数据
前言由于虎扑页面的限制,因为访问虎扑步行街的第11个页面就需要用户进行登录,鉴于此时技术还没有学全,只能爬取1到10的页面. 抓取什么数据帖子名称帖子链接发帖人发帖人链接发帖时间帖子回复 ...
BeautifulSoup爬取虎扑步行街信息到Mysql
人生苦短,我用python 今天给大家爬取虎扑步行街的详细信息效果图如下: 首先根据虎扑步行街链接获取前十个页面链接 for i in range(1, 10):link = "https ...
python爬虫之虎扑步行街主题帖
前言 python爬虫的盛行让数据变得不在是哪么的难以获取.现在呢,我们可以根据我们的需求去寻找我们需要的数据,我们下来就利用python来写一个虎扑步行街主题帖的基本信息,主要包括:帖子主题(tit ...
爬取虎扑步行街——秋名山论美美女壁纸图片
最近学了学爬虫,由于平时笔者经常刷虎扑,于是决定实战一下,对虎扑上的美女图片进行爬取,特地来分享一下经验. 这次主要使用了request和BeautifulSoup两个库,使用urllib库对图片进行 ...
Python网络爬虫爬取虎扑步行街爆照区话题
Python网络爬虫爬取虎扑步行街爆照区话题作者:郜科科最近的任务挺多的,但是心情很烦躁,想做一些自己喜欢的东西,前些时候感觉Python爬虫很好玩,就自学了一下.本人比较喜欢逛街--虎扑步行街, ...
爬取虎扑步行街论坛数据保存到MySQL、MongoDB
本文内容围绕获取虎扑步行街论坛上所有帖子的数据开展的,爬取的内容包括帖子名称.帖子链接.作者.作者链接.创建时间.回复数.浏览数.最后回复用户和最后回复时间,将爬取的数据分别保存在MongoDB和My ...
requests爬虫实践之虎扑步行街主干道帖子数据并保存为txt文件（python实现）
1.先将网页代码信息汇总,如下: 地址数据名称 'ul',class_='for-list' 所有数据 'div',class_='titlelink box' 题目 'div',class_='t ...
Scrapy爬虫实战—虎扑步行街发帖爬取
0. 前言在B站上看了黑马的scrapy,老师讲的超细致,赞! 本文主要用scrapy的基本操作完成爬取,适合入门级学习. 1. scrapy scrapy有很多命令,在terminal输入scra ...
python爬虫爬取虎扑步行街爆照区图片
开始动手的时候毫无头绪,主要借鉴了以下帖子: https://blog.csdn.net/sinat_28797501/article/details/70195443 但是后来发现代码中还是有一些不 ...
仿造虎扑步行街首页。

仿造虎扑步行街首页。相关推荐

最新文章

热门文章
