Python实例---抽屉热搜榜前端代码分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到FTL的网站</title>
    <style>
        /*------------------------------------头部信息开始------------------------*/
        * { margin: 0;        padding: 0;       }
        a {
            /*去除连接下面的横线*/
            text-decoration: none;
        }
        body {
            font: 14px Tahoma,Verdana,Arial,Helvetica,"\5b8b\4f53",sans-serif;
            color: #333;
        }
        .head-box {
            background-color: #2459a2;
            /*如果我们设定这个导航栏固定的时候,必须设定top和left为0*/
            top: 0;                       /*0不用带px,默认就是*/
            left: 0;
            height: 44px;                 /*设置行高*/
            width:100%;
            position: fixed;
        }
        .head-content {
            margin: 0 auto;      /*设定居中*/
            background-color: #2459a2;
            width: 1016px;
            height: 44px;
            line-height: 44px;
            position: relative;  /*方便后面调试注册,登录*/
        }
        .logo {
            width: 121px;       /*设定宽度,否则无法显示图片*/
            height: 23px;       /*设定高度,否则无法显示图片*/
            background: url("http://dig.chouti.com/images/logo.png") no-repeat 0 0;
            float: left;         /*顶着第二个head-content框显示*/
            margin-top: 11px;    /*设定距离顶部多少距离*/
        }
        .action-menu{
            float: left;       /* 跟float:left 同样的效果: display: inline-block; */
            /*margin-top: 11px;  !*head-content里面设置了line-height,已经确保了文字在中间,此行可省略*!*/
            margin-left: 20px;
        }
        /*action-menu下面的class为tb的a标签*/
        .action-menu a.tb {
            color: #c0cddf;;
            /*消除了元素与元素之间的间隔【2个图片,a标签之间都有默认间隔】,保证2个标签之间只有padding没有margin*/
            margin-left: -3px;
            padding: 0 13px 0 16px;
            /*a标签是一个内联标签,所以是用多少显示多少*/
            display: inline-block;
            /*background-color: #FF6600;      显示颜色用的*/
        }
        /*设置标签悬浮的伪类*/
        .action-menu a.active, .action-menu a.active:hover, .action-menu a.tb:hover {
            color: #fff;
            background-color: #204982;
        }
        .key-sera{
            float: right;
            margin-top: 7px;
        }
        .key-sera .search-txt-s, .key-sera a.i {
            float: left;
            border: 1px solid #e0e0e0;
            background-color: #f4f4f4;
        }
        .key-sera .search-txt-s{
            width: 91px;
            height: 25px;
            color: #333;
            padding: 2px 2px 2px 5px;
        }
        .key-sera a.i{
            width: 30px;
            height: 29px;
            display: inline-block;
            background-color: #f4f4f4;
            border-left: 0;
        }
        .key-sera a.i .icon {
            background: url("http://dig.chouti.com/images/icon.png") no-repeat 0 -197px;
            width: 11px;
            height:12px;
            display: inline-block;
            margin-left: 11px;
            margin-bottom: 7px;
        }
        .action-nav{
            position: absolute;
            right: 200px;
        }
        .action-nav a{
            color: #c0cddf;
            padding: 0 20px;
            margin-left: -5px;
            display: inline-block;
        }
        .action-nav a:hover{
            color: #f4f4f4;
            background-color: #204982;
        }
    /*-----------------------------------头部信息结束----------------------------*/
        .main-content-band{
            width: 100%;
            background-color: #ededed;
            padding-top: 44px;
        }
        .main-content {
            margin: 0 auto;
            background-color: #fff;
            width: 960px;
            overflow: hidden;
            height: auto !important; /*高度根据内容去自适应,同时防止高度被覆盖*/
            min-height: 700px;       /*即使显示的内容不够,也可以自己去适应最小显示700px*/
            padding: 6px 28px 60px;
        }
        .content-L{
            float: left;
            width: 630px;
            /*border: solid 2px red;*/
        }
        .nav-top-area{
            border-bottom: 1px solid #ccdcef;
            overflow: hidden;  /*消除: 子级别的标签都float了,所以内容为空导致下面设置的border-bottom显示在上面了*/
        }
        .child-nav, .sort-nav{
            float: left;
            padding: 10px;
        }
        .publish-btn{
            float: right;
            padding: 10px;
        }
        .child-nav a {
            display: inline-block;
            width: 60px;
            height: 26px;
            line-height: 26px;
            margin-top: 3px;
            margin-bottom: 13px;
            color: #369;
            font-size: 12px;
            font-weight: 900;  /*范围[1-900]*/
            text-align: center;
        }
        .child-nav .active {
            background: url("http://dig.chouti.com/images/tip.png?v=2.9") no-repeat 0 -299px;
            color: #333333;
        }
        .sort-nav{
            margin-left: 144px;
            margin-top: 10px;
        }
        .sort-nav .active {
            color: #b4b4b4;
        }
        .sort-nav a {
            margin-left: 10px;
            color: #390;
            text-align: center;
        }
        .publish-btn{
            background-color: #84a42b;
            border: 1px solid #8aab30;
            width: 75px;
            height:15px;
            font-size: 14px;
            line-height:15px;
            text-align: center;
            margin-top: 5px;
            color: #fff;
        }
        /*--------------------------------------------导航栏结束-----------------------*/
        .content-list .item{
            border-bottom: 1px solid #abb6d2;
        }
        .item .news-pic{
            float: right;
            margin-top: 5px;
            margin-left: 9px;
        }
        .content-list .item .news-pic img {
            width: 60px;
            height: 60px;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 1px;
            vertical-align: top;
        }

        .news-content .part2 {
            padding-top: 6px;
            color: #ccc;
            margin-bottom: 12px;
        }
        .hand-icon{
            background: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13") no-repeat 0 0 ;
            display: inline-block;
            width: 18px;
            height: 18px;
        }
        .content-list .item .news-content .part2 .icon-digg {
            background-position: 0 -40px;
            vertical-align: -1px;
        }
        .content-list .item .news-content .part2 .icon-discus {
            background-position: 0 -100px;
            vertical-align: -1px;
        }
        .content-list .item .news-content .part2 .icon-collect {
            background-position: 0 -160px;
            vertical-align: -1px;  /*设置图片的垂直距离,正数表示向上,负数表示向下*/
        }
        .content-list .item .news-content .part2 .user-a{
            vertical-align: -1px;
        }
        .part2 a{
            margin-left: 7px;
        }
        .content-list .item .news-content .part2 .digg-a b {
            padding-right: 2px;
            color: #99aecb;
            vertical-align: 4px;
        }
        .content-list .item .news-content .part2 .discus-a b {
            padding-right: 2px;
            color: #99aecb;
            vertical-align: 4px;
        }
        .content-list .item .news-content .part2 .collect-a b {
            padding-right: 2px;
            color: #99aecb;
            vertical-align: 4px;
        }
        .content-list .item .news-content .part2 .time-a b {
            padding-right: 2px;
            color: #99aecb;
            vertical-align: 4px;
        }
        .content-list .item .news-content .part2 .user-a b {
            padding-right: 2px;
            color: #99aecb;
            vertical-align: 4px;
        }
        .content-list .item .news-content .part2 .time-into i {
            font-weight: 400;
            vertical-align: 4px;
            _vertical-align: 3px;
        }
        .part1 .content-source, .part1 .n2{
            padding-right: 2px;
            color: #99aecb;
            vertical-align: -2px;
        }
        .part1 .content-source {
            text-decoration: underline;
        }
        .share-site-to .share-icon a{
            background: url("share_icon.png") no-repeat;
            height: 14px;
            display: inline-block;
            width: 17px;
            margin-left: 0;
            opacity: 0.3;
        }
         .share-site-to .share-icon a.icon-sina {
                background-position: 0 -90px;
            }
            .share-site-to .share-icon a.icon-douban {
                background-position: 0 -105px;
            }
            .share-site-to .share-icon a.icon-qqzone {
                background-position: 0 -120px;
            }
            .share-site-to .share-icon a.icon-tenxun {
                background-position: 0 -136px;
            }
            .share-site-to .share-icon a.icon-renren {
                background-position: 0 -151px;
            }
            .share-site-to{
              font-weight: 400;
              vertical-align: 4px;
            }
        .share-icon a:hover{
            opacity: 1;
        }

        /*------------------------设置翻页-----------------------------*/
        .dig_lcpage ul li, .ct_page_edge{                 /*设置的时候,必须按照大范围到小范围的顺序,否则不显示*/
            display:inline-block;
            padding-left: 10px;
            float: left;
            color: #369;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 34px;
            border: 1px solid #e1e1e1;
            margin-left: 3px;
            border-radius: 20%;   /*设置圆角*/
        }
        /*设置翻页标签的边距*/
        .dig_lcpage {
            margin-left: 8px;
            margin-top: 8px;
      }
        .ct_page_edge{
            width:60px;
            color: #369;
        }
        .dig_lcpage ul li:hover, .ct_page_edge:hover{
            color: white!important;
            background-color: #2559a4;
        }
        /*设置底部*/
        .footer-band .foot-nav {
            padding-top: 15px;
            text-align: center;
            border-top: 1px solid #ccdcef;
            position: relative;
        }
    </style>

</head>
<body>
<!------------------------------------头部信息-------------------------------->
<div class="head-box">
     <div class="head-content">
         <!--这里设置logo标签, #表示为空-->
         <a class="logo" href="http://dig.chouti.com/"></a>
         <!--导航-->
         <div class="action-menu">
            <a href="http://dig.chouti.com/all/hot/recent/1"  class="tb active" >全部</a>
            <a href="http://dig.chouti.com/r/news/hot/1" class="tb">42区</a>
            <a href="http://dig.chouti.com/r/scoff/hot/1" class="tb">段子</a>
            <a href="http://dig.chouti.com/r/pic/hot/1" class="tb">图片</a>
            <a href="http://dig.chouti.com/r/tec/hot/1" class="tb">挨踢1024</a>
            <a href="http://dig.chouti.com/r/ask/hot/1" class="tb">你问我答</a>
         </div>
        <div class="key-sera">
            <form name="searchFrm2" id="searchFrm2" method="post" action="#">
                <input type="text" id="words" name="words" class="search-txt-s">
                <a href="#" class="i">
                    <span class="icon"></span>
                </a>
            </form>
        </div>
        <div class="action-nav">
                 <a>注册</a>
                 <a>登录</a>
         </div>

    </div>
</div>
<!-----------------------------------内容显示--------------------------------->
<div class="main-content-band">
    <div class="main-content">
        <div class="content-L">
            <!--导航栏-->
            <div class="nav-top-area">
                <div class="child-nav">
                    <a href="http://dig.chouti.com/all/hot/recent/1" hidefocus="false" class="hotbtn active icons" id="hotts-nav-btn">最热</a>
                    <a href="http://dig.chouti.com/all/discovery/sh/1" hidefocus="false" class="newbtn" id="newest-nav-btn">发现<span class="newIcon">new</span></a>
                    <a href="http://dig.chouti.com/all/man/1" hidefocus="false" class="personbtn" id="person-nav-btn">人类发布</a>
                </div>
                <div class="sort-nav">
					<a href="/all/hot/recent/1" hidefocus="false" class="active hotbtn" id="sort-nav-btn">即时排序</a>
					<a href="/all/hot/24hr/1" hidefocus="false" class="newbtn" id="sort24-nav-btn">24小时</a>
					<a href="/all/hot/72hr/1" hidefocus="false" class="newbtn" id="sort3-nav-btn">3天</a>
				</div>
				<a href="javascript:;" class="publish-btn" id="publishBtn" lang="all">
					<span class="ico n1"></span><span class="n2">发布</span>
				</a>
            </div>
            <!-- 内容显示区域 -->
            <div class="content-list">
                <div class="content-list" id="content-list0">
                    <div class="item">
                        <div class="news-pic"><img lang="16455376" original="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244=C120x120.jpg?quality=80" src="http://img3.chouti.com/CHOUTI_20180107/622EDBDB40B5433EB7663E3A9082D4E0_W586H586=C120x120.jpg?quality=80" alt="抽屉新热榜" /></div>
                        <div class="news-content" id="newsContent16455376">
                            <div class="part1">
                                    <a href="http://www.pearvideo.com/video_1243904" class="show-content color-chag" target="_blank" onMouseDown="linksClickStat(16455376);">
                                                【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。
                                    </a>
                                    <span class="content-source">-www.pearvideo.com</span>
                                <!-- 段子和谣言类别不显示类别名称 -->
                                    <a href="/r/news/hot/1" class="n2"><span class="content-kind">42区</span></a>
                                <!-- 来源手机客户端 -->
                            </div>
                            <!-- 显示摘要 -->
                            <div class="part2" share-pic="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244.jpg" share-title='【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。' share-summary='' share-linkid="16455376" share-subject="42区">
                                <a href="javascript:;" class="digg-a" title="推荐">
                                    <span class="hand-icon icon-digg"></span>
                                    <b>6</b>
                                    <i style="display:none">16455376</i>
                                </a>
                                <a href="javascript:;" class="discus-a" id="discus-a-16455376" timeToPool="11分钟前" lang="16455376"  >
                                    <span class="hand-icon icon-discus"></span>
                                    <b>7</b>
                                </a>
                                <a href="javascript:;" class="collect-a" id="collect-a-16455376" lang="16455376" title="加入私藏" destjid="" jid="419421509">
                                    <span class="hand-icon icon-collect"></span>
                                    <b>私藏</b>
                                </a>
                                <a href="/user/419421509/submitted/1" class="user-a">
                                    <span>
                                        <img src="http://img3.chouti.com/group11/M03/8B/10/wKgCPVUvH77C1OVpAAAZGHF-I84152=32x32.jpg?quality=80" />
                                    </span>
                                    <b>巴颜格日顺</b>
                                </a>
                                <span class="left time-into">
                                    <a class="time-a" href="/link/16455376" target="_blank">
                                        <b>11分钟前</b>
                                    </a>
                                    <i>入热榜</i>
                                </span>
                                <!-- 分享各微博的按钮 -->
                                <span class="share-site-to">
                                        <i>分享到</i>
                                        <span class="share-icon">
                                            <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
                                            <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
                                            <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
                                            <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
                                            <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
                                        </span>
                                </span>
                            </div>
                    </div>
        </div>
        </div>
                <div class="content-list" id="content-list1">
                        <div class="item">
                            <div class="news-pic"><img lang="16455376" original="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244=C120x120.jpg?quality=80" src="http://img3.chouti.com/CHOUTI_20180107/622EDBDB40B5433EB7663E3A9082D4E0_W586H586=C120x120.jpg?quality=80" alt="抽屉新热榜" /></div>
                            <div class="news-content" id="newsContent16455376">
                                <div class="part1">
                                        <a href="http://www.pearvideo.com/video_1243904" class="show-content color-chag" target="_blank" onMouseDown="linksClickStat(16455376);">
                                                    【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。
                                        </a>
                                        <span class="content-source">-www.pearvideo.com</span>
                                    <!-- 段子和谣言类别不显示类别名称 -->
                                        <a href="/r/news/hot/1" class="n2"><span class="content-kind">42区</span></a>
                                    <!-- 来源手机客户端 -->
                                </div>
                                <!-- 显示摘要 -->
                                <div class="part2" share-pic="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244.jpg" share-title='【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。' share-summary='' share-linkid="16455376" share-subject="42区">
                                    <a href="javascript:;" class="digg-a" title="推荐">
                                        <span class="hand-icon icon-digg"></span>
                                        <b>6</b>
                                        <i style="display:none">16455376</i>
                                    </a>
                                    <a href="javascript:;" class="discus-a" id="discus-a-16455376" timeToPool="11分钟前" lang="16455376"  >
                                        <span class="hand-icon icon-discus"></span>
                                        <b>7</b>
                                    </a>
                                    <a href="javascript:;" class="collect-a" id="collect-a-16455376" lang="16455376" title="加入私藏" destjid="" jid="419421509">
                                        <span class="hand-icon icon-collect"></span>
                                        <b>私藏</b>
                                    </a>
                                    <a href="/user/419421509/submitted/1" class="user-a">
                                        <span>
                                            <img src="//img3.chouti.com/group11/M03/8B/10/wKgCPVUvH77C1OVpAAAZGHF-I84152=32x32.jpg?quality=80" />
                                        </span>
                                        <b>巴颜格日顺</b>
                                    </a>
                                    <span class="left time-into">
                                        <a class="time-a" href="/link/16455376" target="_blank">
                                            <b>11分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->
                                    <span class="share-site-to">
                                            <i>分享到</i>
                                            <span class="share-icon">
                                                <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
                                                <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
                                                <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
                                                <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
                                                <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
                                            </span>
                                    </span>
                                </div>
                        </div>
            </div>
            </div>
                <div class="content-list" id="content-list2">
                        <div class="item">
                            <div class="news-pic"><img lang="16455376" original="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244=C120x120.jpg?quality=80" src="http://img3.chouti.com/CHOUTI_20180107/622EDBDB40B5433EB7663E3A9082D4E0_W586H586=C120x120.jpg?quality=80" alt="抽屉新热榜" /></div>
                            <div class="news-content" id="newsContent16455376">
                                <div class="part1">
                                        <a href="http://www.pearvideo.com/video_1243904" class="show-content color-chag" target="_blank" onMouseDown="linksClickStat(16455376);">
                                                    【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。
                                        </a>
                                        <span class="content-source">-www.pearvideo.com</span>
                                    <!-- 段子和谣言类别不显示类别名称 -->
                                        <a href="/r/news/hot/1" class="n2"><span class="content-kind">42区</span></a>
                                    <!-- 来源手机客户端 -->
                                </div>
                                <!-- 显示摘要 -->
                                <div class="part2" share-pic="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244.jpg" share-title='【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。' share-summary='' share-linkid="16455376" share-subject="42区">
                                    <a href="javascript:;" class="digg-a" title="推荐">
                                        <span class="hand-icon icon-digg"></span>
                                        <b>6</b>
                                        <i style="display:none">16455376</i>
                                    </a>
                                    <a href="javascript:;" class="discus-a" id="discus-a-16455376" timeToPool="11分钟前" lang="16455376"  >
                                        <span class="hand-icon icon-discus"></span>
                                        <b>7</b>
                                    </a>
                                    <a href="javascript:;" class="collect-a" id="collect-a-16455376" lang="16455376" title="加入私藏" destjid="" jid="419421509">
                                        <span class="hand-icon icon-collect"></span>
                                        <b>私藏</b>
                                    </a>
                                    <a href="/user/419421509/submitted/1" class="user-a">
                                        <span>
                                            <img src="//img3.chouti.com/group11/M03/8B/10/wKgCPVUvH77C1OVpAAAZGHF-I84152=32x32.jpg?quality=80" />
                                        </span>
                                        <b>巴颜格日顺</b>
                                    </a>
                                    <span class="left time-into">
                                        <a class="time-a" href="/link/16455376" target="_blank">
                                            <b>11分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->
                                    <span class="share-site-to">
                                            <i>分享到</i>
                                            <span class="share-icon">
                                                <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
                                                <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
                                                <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
                                                <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
                                                <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
                                            </span>
                                    </span>
                                </div>
                        </div>
            </div>
            </div>
                <div class="content-list" id="content-list3">
                        <div class="item">
                            <div class="news-pic"><img lang="16455376" original="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244=C120x120.jpg?quality=80" src="http://img3.chouti.com/CHOUTI_20180107/622EDBDB40B5433EB7663E3A9082D4E0_W586H586=C120x120.jpg?quality=80" alt="抽屉新热榜" /></div>
                            <div class="news-content" id="newsContent16455376">
                                <div class="part1">
                                        <a href="http://www.pearvideo.com/video_1243904" class="show-content color-chag" target="_blank" onMouseDown="linksClickStat(16455376);">
                                                    【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。
                                        </a>
                                        <span class="content-source">-www.pearvideo.com</span>
                                    <!-- 段子和谣言类别不显示类别名称 -->
                                        <a href="/r/news/hot/1" class="n2"><span class="content-kind">42区</span></a>
                                    <!-- 来源手机客户端 -->
                                </div>
                                <!-- 显示摘要 -->
                                <div class="part2" share-pic="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244.jpg" share-title='【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。' share-summary='' share-linkid="16455376" share-subject="42区">
                                    <a href="javascript:;" class="digg-a" title="推荐">
                                        <span class="hand-icon icon-digg"></span>
                                        <b>6</b>
                                        <i style="display:none">16455376</i>
                                    </a>
                                    <a href="javascript:;" class="discus-a" id="discus-a-16455376" timeToPool="11分钟前" lang="16455376"  >
                                        <span class="hand-icon icon-discus"></span>
                                        <b>7</b>
                                    </a>
                                    <a href="javascript:;" class="collect-a" id="collect-a-16455376" lang="16455376" title="加入私藏" destjid="" jid="419421509">
                                        <span class="hand-icon icon-collect"></span>
                                        <b>私藏</b>
                                    </a>
                                    <a href="/user/419421509/submitted/1" class="user-a">
                                        <span>
                                            <img src="//img3.chouti.com/group11/M03/8B/10/wKgCPVUvH77C1OVpAAAZGHF-I84152=32x32.jpg?quality=80" />
                                        </span>
                                        <b>巴颜格日顺</b>
                                    </a>
                                    <span class="left time-into">
                                        <a class="time-a" href="/link/16455376" target="_blank">
                                            <b>11分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->
                                    <span class="share-site-to">
                                            <i>分享到</i>
                                            <span class="share-icon">
                                                <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
                                                <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
                                                <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
                                                <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
                                                <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
                                            </span>
                                    </span>
                                </div>
                        </div>
            </div>
            </div>
                <div class="content-list" id="content-list4">
                        <div class="item">
                            <div class="news-pic"><img lang="16455376" original="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244=C120x120.jpg?quality=80" src="http://img3.chouti.com/CHOUTI_20180107/622EDBDB40B5433EB7663E3A9082D4E0_W586H586=C120x120.jpg?quality=80" alt="抽屉新热榜" /></div>
                            <div class="news-content" id="newsContent16455376">
                                <div class="part1">
                                        <a href="http://www.pearvideo.com/video_1243904" class="show-content color-chag" target="_blank" onMouseDown="linksClickStat(16455376);">
                                                    【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。
                                        </a>
                                        <span class="content-source">-www.pearvideo.com</span>
                                    <!-- 段子和谣言类别不显示类别名称 -->
                                        <a href="/r/news/hot/1" class="n2"><span class="content-kind">42区</span></a>
                                    <!-- 来源手机客户端 -->
                                </div>
                                <!-- 显示摘要 -->
                                <div class="part2" share-pic="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244.jpg" share-title='【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。' share-summary='' share-linkid="16455376" share-subject="42区">
                                    <a href="javascript:;" class="digg-a" title="推荐">
                                        <span class="hand-icon icon-digg"></span>
                                        <b>6</b>
                                        <i style="display:none">16455376</i>
                                    </a>
                                    <a href="javascript:;" class="discus-a" id="discus-a-16455376" timeToPool="11分钟前" lang="16455376"  >
                                        <span class="hand-icon icon-discus"></span>
                                        <b>7</b>
                                    </a>
                                    <a href="javascript:;" class="collect-a" id="collect-a-16455376" lang="16455376" title="加入私藏" destjid="" jid="419421509">
                                        <span class="hand-icon icon-collect"></span>
                                        <b>私藏</b>
                                    </a>
                                    <a href="/user/419421509/submitted/1" class="user-a">
                                        <span>
                                            <img src="//img3.chouti.com/group11/M03/8B/10/wKgCPVUvH77C1OVpAAAZGHF-I84152=32x32.jpg?quality=80" />
                                        </span>
                                        <b>巴颜格日顺</b>
                                    </a>
                                    <span class="left time-into">
                                        <a class="time-a" href="/link/16455376" target="_blank">
                                            <b>11分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->
                                    <span class="share-site-to">
                                            <i>分享到</i>
                                            <span class="share-icon">
                                                <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
                                                <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
                                                <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
                                                <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
                                                <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
                                            </span>
                                    </span>
                                </div>
                        </div>
            </div>
            </div>
                <div class="content-list" id="content-list5">
                        <div class="item">
                            <div class="news-pic"><img lang="16455376" original="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244=C120x120.jpg?quality=80" src="http://img3.chouti.com/CHOUTI_20180107/622EDBDB40B5433EB7663E3A9082D4E0_W586H586=C120x120.jpg?quality=80" alt="抽屉新热榜" /></div>
                            <div class="news-content" id="newsContent16455376">
                                <div class="part1">
                                        <a href="http://www.pearvideo.com/video_1243904" class="show-content color-chag" target="_blank" onMouseDown="linksClickStat(16455376);">
                                                    【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。
                                        </a>
                                        <span class="content-source">-www.pearvideo.com</span>
                                    <!-- 段子和谣言类别不显示类别名称 -->
                                        <a href="/r/news/hot/1" class="n2"><span class="content-kind">42区</span></a>
                                    <!-- 来源手机客户端 -->
                                </div>
                                <!-- 显示摘要 -->
                                <div class="part2" share-pic="http://img3.chouti.com/CHOUTI_20180106/2D8596D699C6404A9743D855F8CF5FE7_W244H244.jpg" share-title='【大运河遭人疯狂挖宝,惊现数千坑洞】1月4日,河北东光县,京杭大运河古河道沧州段,有人在河道中挖宝,河道内随处可见被挖的坑洞,数量达到上千个,长达四五百米。目前,警方已介入。' share-summary='' share-linkid="16455376" share-subject="42区">
                                    <a href="javascript:;" class="digg-a" title="推荐">
                                        <span class="hand-icon icon-digg"></span>
                                        <b>6</b>
                                        <i style="display:none">16455376</i>
                                    </a>
                                    <a href="javascript:;" class="discus-a" id="discus-a-16455376" timeToPool="11分钟前" lang="16455376"  >
                                        <span class="hand-icon icon-discus"></span>
                                        <b>7</b>
                                    </a>
                                    <a href="javascript:;" class="collect-a" id="collect-a-16455376" lang="16455376" title="加入私藏" destjid="" jid="419421509">
                                        <span class="hand-icon icon-collect"></span>
                                        <b>私藏</b>
                                    </a>
                                    <a href="/user/419421509/submitted/1" class="user-a">
                                        <span>
                                            <img src="//img3.chouti.com/group11/M03/8B/10/wKgCPVUvH77C1OVpAAAZGHF-I84152=32x32.jpg?quality=80" />
                                        </span>
                                        <b>巴颜格日顺</b>
                                    </a>
                                    <span class="left time-into">
                                        <a class="time-a" href="/link/16455376" target="_blank">
                                            <b>11分钟前</b>
                                        </a>
                                        <i>入热榜</i>
                                    </span>
                                    <!-- 分享各微博的按钮 -->
                                    <span class="share-site-to">
                                            <i>分享到</i>
                                            <span class="share-icon">
                                                <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
                                                <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
                                                <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
                                                <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
                                                <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
                                            </span>
                                    </span>
                                </div>
                        </div>
            </div>
            </div>
            </div>
            <!--分页内容显示-->
            <div class="page-area">
                <div class="dig_lcpage">
                    <ul>
                         <li><span class="ct_pagepw">1</span></li>
                         <li><a href="#" class="ct_pagepa">2</a></li>
                         <li><a href="#" class="ct_pagepa">3</a></li>
                         <li><a href="#" class="ct_pagepa">4</a></li>
                         <li><a href="#" class="ct_pagepa">5</a></li>
                         <li><a href="#" class="ct_pagepa">6</a></li>
                         <li><a href="#" class="ct_pagepa">7</a></li>
                         <li><a href="#" class="ct_pagepa">8</a></li>
                         <li><a href="#" class="ct_pagepa">9</a></li>
                         <li><a href="#" class="ct_pagepa">10</a></li>
                         <a href="#" class="ct_page_edge">下一页</a>
                     </ul>
                </div>
            </div>
        <!--右边内容的显示-->
        <div class="content-R">

        </div>
            <!-----------------------------------内容显示--------------------------------->
<div class="footer-band">
            <div class="foot-nav">
            <div style="display:none"   id="y-destnick"></div>
            <a href="/help/about" target="_blank">关于我们</a><span>|</span><a href="/help/contact"
                                                                           target="_blank">联系我们</a><span>|</span><a href="/help/service" target="_blank">服务条款</a><span>|</span><a
                href="/help/privacy" target="_blank">隐私政策</a><span>|</span><a href="/help/tool"
                                                                              target="_blank">抽屉新热榜工具</a><span>|</span><!--<a href="http://img.chouti.com/toolsffcj.html"
                target="_blank">浏览器插件</a><span>|</span>--><a href="/download/model" target="_blank">下载客户端</a><span>|</span><a
                href="/feedback" target="_blank">意见与反馈</a><span>|</span><a href="/help/goodlink"
                                                                           target="_blank">友情链接</a><span>|</span><a
                href="http://www.shouye.com/Index.do?method=show&pageId=44251&jid=xinrebang@gozap.com"
                target="_blank">公告</a><!--<span>|</span><a href="/points/gifts" target="_blank">积分商城</a>-->
            <a href="http://dig.chouti.com/feed.xml" target="_blank" style="margin-left:0;vertical-align:-2px;"
               title="Rss订阅,Feed地址:http://dig.chouti.com/feed.xml"><img src="/images/ct_rss.gif" width="36" height="14"></a>
        </div>
            <div class="foot-nav2">
            <a target="_blank" href="http://www.gozap.com/"><img class="foot_e" src="/images/gozap-logo-50_15.gif"></a>
            <span class="foot_d">旗下站点</span>
            <span class="foot_a">&copy;2018
                chouti.com</span>
            <a target="_blank" href="http://www.miibeian.gov.cn/" class="foot_b">京ICP备09053974号-3 京公网安备 110102004562</a>
            <div style="margin-top:6px;">
                <span class="foot_d">违法和不良信息举报:</span>
                <span class="foot_a">电话:010-58302039  </span>
                <span class="foot_a" style="margin-left: 15px;">邮箱:<a style="color: #369;margin-right: 10px;" href="mailto:jubao@chouti.com">jubao@chouti.com</a> </span>
            </div>
            <div style="margin-top:6px;">版权所有:小a玖拾柒</div>
</div>
        </div>
    </div>


</div>
</body>
</html>
 
更多学习参考:
Python实例---抽屉后台框架分析
posted @ 2018-08-02 07:45  小a玖拾柒  阅读(719)  评论(0编辑  收藏  举报