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">©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实例---抽屉后台框架分析
作者：小a玖拾柒
-------------------------------------------
个性签名: 所有的事情到最後都是好的，如果不好，那說明事情還沒有到最後～
本文版权归作者【小a玖拾柒】和【博客园】共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利！
