仿造虎扑步行街首页。

最新推荐文章于 2021-06-15 23:38:32 发布
最新推荐文章于 2021-06-15 23:38:32 发布
阅读量3.8k 收藏 5
点赞数 7
分类专栏： 实战 文章标签： 原创 HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44161401/article/details/103359867
版权

原网站 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

岛泪
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
写一写虎扑APP首页效果，jrs都进来看一眼！
aa4100123的博客
12-01 5402
首先先上效果图： 首先我们先考虑这个界面有什么难点： 1.日期悬停。      2.今日和其他日期在悬停布局上的处理      3.首次进入时，自动滑动到今日比赛      4.向上滑动向下滑动一定距离后，出现向上向下的图标，并滚动到今日的比赛界面      5.向上加载更多，向下加载更多，当然这个并不算是难点，只是比较新颖~。 好了，首先我们一项一项的开始解
Android项目源码基于Dagger2RxJavaRetrofit开发的虎扑体育
07-29
本项目是一个虎扑非官方客户端，根据虎扑新版api开发，基于Dagger2 RxJava Retrofit Material Design开发，使用mvp模式开发~纯练手之作，目前基本功能已完成。
android 开发打赏布局,Android自定义View模仿虎扑直播界面的打赏按钮功能
weixin_35715490的博客
05-26 366
Android自定义View模仿虎扑直播界面的打赏按钮功能发布时间：2020-09-28 12:15:53来源：脚本之家阅读：77作者：shenhuniurou前言作为一个资深篮球爱好者，我经常会用虎扑app看比赛直播，后来注意到文字直播界面右下角加了两个按钮，可以在直播过程中送虎扑币，为自己支持的球队加油。具体的效果如下图所示：我个人觉得挺好玩的，所以决定自己实现下这个按钮，废话不多说，先看实现...
Python3 爬虫实战 — 虎扑论坛步行街【requests、Beautiful Soup、MongoDB】
BOB'S BLOG
10-13 1695
爬取时间：2019-10-12 爬取难度：★★☆☆☆☆ 请求链接：https://bbs.hupu.com/bxj 爬取目标：爬取虎扑论坛步行街的帖子，包含主题，作者，发布时间等，数据保存到 MongoDB 数据库 涉及知识：请求库 requests、解析库 Beautiful Soup、数据库 MongoDB 的操作 完整代码：https://github.com/TRHX/Python3-...
Python爬取虎扑步行街,爆照区中的照片
optics's blog
08-19 1816
使用的是Python3+reqeusts 源码如下 #encoding:gbk import requests import re import time def get_pages(url):#拼凑每一页的url pages = [] for i in range(1,50,1):#爬取第1到50页的帖子 new_url=url+'-'+str(i)
仿造蜜雪冰城制作的App
12-30
仿造蜜雪冰城制作的App
小白仿造阅文首页前端练习
最新发布
04-21
html与css加上图片，没有js，因为没学，有时间补上
仿造win10-UI
08-18
【标题】"仿造win10-UI"项目是一个JavaScript实现的前端工程，旨在复刻Windows 10操作系统用户界面的外观和交互体验，尤其适用于平板电脑设备。它利用了现代浏览器对HTML5特性的良好支持，以创建一个与原生系统相似...
java仿造迅雷
04-03
在Java编程领域，"java 仿造迅雷" 指的是使用Java语言来实现一个类似迅雷下载工具的功能。迅雷是一款著名的多线程、断点续传的下载软件，其核心特性包括高效的文件分块下载、网络连接管理、多源下载以及智能调度等。...
可以仿造ip
12-25
我们知道，TCP/IP网络数据全部是通过封装在IP数据包中在Internet网上传送的，也就是封装建立起一个包含IP头和数据的IP数据报。一般来说，网络软件总是以多个32位字产生IP头，即使必须用附加的0填充IP头。...
hupu-frontend.github.io:虎扑前端技术博客
06-02
虎扑前端博客 虎扑前端博客
jQuery仿造星球大战激光剑效果水平进度条代码
06-10
很有创意使用彩色霓虹效果，jQuery仿造星球大战中的激光剑效果的水平进度条代码，jQuery百分比进度条动画特效。
新百度首页模仿.zip
05-10
仿造新的百度首页（加字体滚动...仿造新的百度首页（加字体滚动特效）仿造新的百度首页（加字体滚动特效）仿造新的百度首页（加字体滚动特效）仿造新的百度首页（加字体滚动特效）仿造新的百度首页（加字体滚动特效）
OBLOG 简洁灰仿造
12-19
"OBLOG 简洁灰仿造"是一个针对网页设计的项目，主要集中在创建一个以灰色调为主的简洁风格博客模板。这个模板可能适用于那些追求简约、低调和专业外观的个人或企业网站。在网页设计中，简洁的设计通常能提供更好的...
仿造京东的套餐购买列表
04-04
该源码案例是一个非常不错的仿造京东的套餐购买列表案例，源码DYCPackage，仿造京东的套餐购买，只是配色需要修改。
虎扑首页html制作,仿虎扑首页四级导航
weixin_34981046的博客
06-15 1634
摘要：首先用html和css将此四级下拉菜单的布局分布好，多次使用‘ul’、‘li’标签，并逐层嵌，一共有四层导航条，之后再添加jQuery代码部分，首先隐藏二级、三级以及四级下拉菜单，之后当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单，并设置与之对应的当鼠标移出包含二级菜单的一级菜单时隐藏当前二级菜单，之后三级菜单和四级菜单都做出类似的功能即可。完首先用html和css将此四级下拉...
java后台开发
jupiter_888的博客
07-24 171
技术要点 javaSE语言基本功。 javaEE语言基本功。 数据库。 linux基本操作。 接口开发框架。 基本的后台管理系统。一般都是用html搭建的。 jvm虚拟机 常用开发思维框架 常见设计模式。 ...
Chrome插件开发入门：如何实现一键上班赖皮
weixin_34217773的博客
12-15 431
很多人介绍过Chrome插件，但必须要说，插件开发就是摆弄一个小玩具，第一要素是实用，其次是好玩。 单纯罗列各种功能是非常无趣的。 所以把一篇旧文拿出来与大家分享。 人，活着就是为了赖皮。 作为一个合格的开发人员，把30%的时间用来赖皮（上班偷懒）是值得推荐的。 因为，如果你工作时间无法赖皮，并不能说明你工作认真，只能说明你的工作自动化...
Anroid(仿虎扑体育)ListView中数据按照时间\日期分组（分类）
qq_28690547的博客
11-15 8389
最近笔者在做一个项目。需求里面有一个特效是一个list：带日期标题（格式：yyyy-MM-dd）的时间树,item为（格式：HH:mm:ss），并且在滑动过程中，当日期标题滑动到顶部的时候，进行悬浮；下一个日期标题到达顶部的时候把前一个header顶上去，废话不多少，先上效果图。      首先是需求想要实现的效果，仿虎扑体育。 ；；        然后是笔者实现的效果（因
java web仿造当当网
11-30
仿造当当网是指在Java Web的基础上，通过学习当当网的功能和界面设计，开发一个类似于当当网的电子商务网站。 首先，需要搭建一个Java Web开发环境，可以使用Eclipse、IntelliJ IDEA等集成开发环境，并选择合适的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值