Python之路【第二十篇】:python项目之旧版抽屉新热榜

旧版抽屉新热榜

代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 
  7     <style>
  8         *{
  9             margin: 0;
 10             padding: 0;
 11         }
 12 
 13         a{
 14             text-decoration: none;
 15         }
 16 
 17         body{
 18             font-family: "Times New Roman";
 19             font-size:12px;
 20         }
 21 
 22 /*-----------------------head部分开始*--------------------------*/
 23 
 24         .head-box{
 25             background-color: #2459a2;
 26             height: 44px;
 27             width: 100%;
 28             position: fixed;
 29             top: 0;
 30             left: 0;
 31         }
 32 
 33 
 34         .head-content{
 35             width: 1016px;
 36             /*background-color: ;*/
 37             height: 44px;
 38             line-height: 44px;
 39             margin: 0 auto;
 40             /*border: 1px solid red;*/
 41             position: relative;
 42         }
 43         .head-content .logo{
 44             display: inline-block;
 45             background: url("images/logo.png");
 46             width: 121px;
 47             height: 23px;
 48             float: left;
 49             margin: 11px;
 50 
 51         }
 52 
 53         .head-content .action-menu{
 54             float: left;
 55             margin-left: 5px;
 56         }
 57 
 58         .head-content .action-menu a.tb{
 59             display: inline-block;
 60             margin-left: -3px;
 61             padding: 0 16px 0 13px;
 62             color: darkgray;
 63         }
 64 
 65         .head-content .action-menu a.tb:hover{
 66             color: white;
 67             background-color: #396bb3;
 68         }
 69 
 70         .head-content .action-menu a.active,.head-content .action-menu a.active:hover{
 71             color: white;
 72             background-color: #204982;
 73         }
 74 
 75         .key-search{
 76             float: right;
 77             margin-top: 5px;
 78         }
 79 
 80         .key-search .search-txt{
 81             float: left;
 82             width: 91px;
 83             height: 25px;
 84             padding: 2px 2px 2px 5px;
 85 
 86         }
 87 
 88         .key-search a{
 89             display: inline-block;
 90             width: 31px;
 91             height: 32px;
 92             background-color: #f4f4f4;
 93         }
 94 
 95         .key-search a span.ico{
 96             display: inline-block;
 97             width: 11px;
 98             height: 13px;
 99             background: url("images/icon.png") no-repeat 0 -197px ;
100             /*border: 1px solid red;*/
101             margin-left: 10px;
102             margin-top: -5px;
103 
104         }
105 
106         .action-nav{
107             position: absolute;
108             right: 150px;
109 
110         }
111 
112         .action-nav a{
113             display: inline-block;
114             line-height: 44px;
115             color: white;
116             padding: 0 20px;
117             margin: 0 5px;
118         }
119 
120         .action-nav a:hover{
121             background-color: #396bb3;
122         }
123 /*-------------------head部分结束*-------------------------*/
124 /*-------------------content部分开始*-------------------------*/
125 
126         .main-content-box{
127             background-color: lightgrey;
128             padding-top: 44px;
129         }
130 
131         .main-content{
132             background-color: white;
133             margin: 0 auto;
134             width: 1016px;
135             height: auto!important;
136             min-height: 700px;
137             overflow: hidden;
138 
139         }
140         .main-content .content-L{
141             float: left;
142             width: 630px;
143             margin-top: 10px;
144             margin-left: 5px;
145 
146         }
147 
148         .content-L .top-area{
149             border-bottom: 1px solid #b4b4b4;
150             height: 40px;
151 
152 
153         }
154 
155         .top-area .child-nav{
156             float: left;
157         }
158 
159         .top-area .child-nav a{
160             display: inline-block;
161             width: 60px;
162             height: 26px;
163             line-height: 26px;
164             color: #369;
165             text-align: center;
166 
167         }
168 
169         .top-area .child-nav .active{
170             background: url("images/tip.png") no-repeat 0 -299px;
171             color: black;
172             font-weight: bold;
173         }
174 
175 
176         .sort-nav{
177             float: left;
178             margin-left: 120px;
179             margin-top: 7px;
180         }
181 
182         .sort-nav a {
183             display: inline-block;
184             text-align: center;
185             color: #390;
186             margin-left: 10px;
187         }
188 
189         .sort-nav .active{
190             color: #b4b4b4;
191         }
192 
193         .publish-btn{
194             float: right;
195             display: inline-block;
196             width: 136px;
197             height: 32px;
198             background-color: #84a42b;
199             color: white;
200             font-size: 16px;
201             text-align: center;
202             line-height: 32px;
203         }
204 
205         .content-list .item{
206             border-bottom: 1px solid #b4b4b4;
207             padding-top: 10px;
208         }
209 
210         .content-list .item .news-pic{
211             float: right;
212         }
213 
214         .content-list .item .part1{
215             line-height: 20px;
216         }
217 
218         .content-list .item .part1:hover .show-content{
219             text-decoration: underline;
220         }
221 
222         .content-list .item .part2{
223             padding: 10px 0px;
224             color: #99aecb;
225         }
226 
227         .part2 .hand-icon{
228             background: url("images/icon_18_118.png") no-repeat 0 0;
229             /*background-position: ;*/
230             display: inline-block;
231             width: 18px;
232             height: 18px;
233         }
234 
235         .part2 .icon-recommend{
236             background-position: 0 -40px;
237 
238 
239         }
240 
241         .part2 .recommend:hover .icon-recommend{
242             background-position: 0 -20px;
243         }
244 
245 
246         .part2 .icon-discuss{
247             background-position: 0 -100px;
248 
249 
250         }
251 
252         .part2 .discuss:hover .icon-discuss{
253             background-position: 0 -80px;
254         }
255 
256         .part2 .icon-collect{
257             background-position: 0 -160px;
258 
259 
260         }
261 
262         .part2 .collect:hover .icon-collect{
263             background-position: 0 -140px;
264         }
265 
266 
267         .part2 a{
268             margin-left: 8px;
269         }
270 
271         .part2 a b,.part2 span i{
272             /*竖直间距*/
273             vertical-align: 4px;
274             font-size: 14px;
275         }
276 
277         .share-site-to{
278             float: right;
279         }
280 
281         .share-site-to .share-icon a{
282             display: inline-block ;
283             background: url("images/share_icon.png") no-repeat 0 0;
284             opacity: .3;
285         }
286 
287         /*注意优先级问题*/
288         .share-icon a.icon-sina{
289             background-position: 0 -90px;
290             width: 17px;
291             height: 14px;
292         }
293 
294         .share-icon a.icon-douban{
295             background-position: 0 -105px;
296             width: 17px;
297             height: 14px;
298         }
299 
300         .share-icon a.icon-qqzone{
301             background-position: 0 -120px;
302             width: 17px;
303             height: 14px;
304         }
305 
306         .share-icon a.icon-renren{
307             background-position: 0 -151px;
308             width: 17px;
309             height: 14px;
310         }
311 
312         .share-icon a.icon-tenxun{
313             background-position: 0 -136px;
314             width: 17px;
315             height: 14px;
316         }
317 
318 
319         .share-site-to{
320             display: none;
321         }
322         .item:hover .share-site-to{
323             display: inline-block;
324 
325         }
326 
327         .share-site-to .share-icon a:hover{
328             opacity: 1;
329         }
330 
331         .page-area ul li{
332             display: inline-block;
333         }
334 
335         .page-area ul li a{
336             display: inline-block;
337             width: 34px;
338             height: 34px;
339             color: #369;
340             line-height: 34px;
341             text-align: center;
342             border: 1px solid #e1e1e1;
343             border-radius: 15%;
344             margin-left: 5px;
345         }
346 
347         .page-area ul li a.page-next{
348             width: 90px;
349         }
350 
351         .page-area ul li a:hover{
352             background-color: #369;
353             color: white;
354         }
355 
356         .page-area{
357             margin-left: 40px;
358             /*margin: 0 auto;*/
359         }
360 
361 
362         .main-content .content-R{
363             float: left;
364         }
365 
366         .footer-box{
367             clear: both;
368             margin: 0 auto;
369             width: 960px;
370             background-color: #fff;
371             border-top: 1px solid #dce7f4;
372         }
373 
374         .footer-box .foot-nav{
375             padding-top: 15px;
376             text-align: center;
377             border-top: 1px solid #ccdcef;
378         }
379 
380         .footer-box .foot-nav2{
381             padding-top: 6px;
382             margin-bottom: 15px;
383             text-align: center;
384         }
385 
386         .foot_b{
387             color: #999;
388             font-size: 12px;
389         }
390 
391 
392     </style>
393 </head>
394 <body>
395 
396 
397 <div class="head-box">
398 
399     <div class="head-content">
400 
401         <a href="#" class="logo"></a>
402 
403         <div class="action-menu">
404 
405                     <a href="#" class="tb active">全部</a>
406                     <a href="#" class="tb">42区</a>
407                     <a href="#" class="tb">段子</a>
408                     <a href="#" class="tb">图片</a>
409                     <a href="#" class="tb">挨踢1024</a>
410                     <a href="#" class="tb">你问我答</a>
411 
412         </div>
413 
414         <div class="key-search">
415 
416                 <form action="/" method="post">
417 
418                     <input type="text" class="search-txt">
419 
420                     <a href="#" class="i" >
421                         <span class="ico"></span>
422                     </a>
423 
424                 </form>
425 
426         </div>
427 
428         <div class="action-nav">
429                 <a href="#" class="register-btn">注册</a>
430                 <a href="#" class="login-btn">登录</a>
431         </div>
432 
433     </div>
434 </div>
435 
436 <div class="main-content-box">
437 
438     <div class="main-content">
439 
440         <div class="content-L">
441 
442             <div class="top-area">
443 
444                 <div class="child-nav">
445 
446                     <a href="#"  class="hotbtn active" >最热</a>
447                     <a href="#"  class="newbtn"    >最新</a>
448                     <a href="#"  class="personbtn" >人类发布</a>
449 
450                 </div>
451 
452                 <div class="sort-nav">
453                     <a href="#"  class="sortbtn active" >即时排序</a>
454                     <a href="#"  class="newbtn" >24小时</a>
455                     <a href="#"  class="newbtn" >3天</a>
456                 </div>
457 
458                 <a href="#" class="publish-btn">
459                     <span class="n2">+ &nbsp;&nbsp;发布</span>
460                 </a>
461 
462             </div>
463 
464             <div class="content-list">
465 
466 
467                   <div class="item">
468 
469                             <div class="news-pic">
470                                 <img src="images/news.jpg" alt="抽屉新热榜">
471                             </div>
472 
473                             <div class="news-content">
474                                 <div class="part1">
475                                         <a href="#" class="show-content" target="_blank">
476                                                 @伊涅斯科：梅西接受每体采访完整版，非常长，没想到他话这么少的人还能说这么多，
477                                             谈到了自己的伤病问题，谈了上个赛季欧冠的失败，谈到了今夏的新援，谈了内马尔签约的问题，
478                                             谈到了自己离队的传闻，谈了自己的感情，谈了和C罗的饭局，说了很多很多，采访者问的问题基本都回了，
479                                             感觉这个赛季他都不会再说什么话了…
480                                         </a>
481 
482                                         <span class="content-source">-ww4.sinaimg.cn</span>
483                                         <a href="#" class="n2">
484                                             <span class="content-kind">42区</span>
485                                         </a>
486                                 </div>
487 
488                                 <div class="part2">
489 
490 
491                                         <a href="#" class="recommend" title="推荐">
492                                             <span class="hand-icon icon-recommend"></span>
493                                             <b>4</b>
494                                         </a>
495 
496 
497                                         <a href="javascript:;" class="discuss">
498                                             <span class="hand-icon icon-discuss"></span>
499                                             <b>5</b>
500                                         </a>
501 
502 
503                                         <a href="javascript:;" class="collect" title="加入私藏">
504                                             <span class="hand-icon icon-collect"></span>
505                                             <b>私藏</b>
506                                         </a>
507 
508 
509                                         <a href="#" class="user-a">
510                                             <span>
511                                                 <img src="images/13.png">
512                                             </span>
513                                             <b>乱太郎</b>
514                                         </a>
515 
516                                     <span class="left time-into">
517                                         <a class="time-a" href="#" target="_blank">
518                                             <b>4分钟前</b>
519                                         </a>
520                                         <i>入热榜</i>
521                                     </span>
522 
523                                     <span class="share-site-to">
524                                         <i>分享到</i>
525                                         <span class="share-icon">
526                                             <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
527                                             <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
528                                             <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
529                                             <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
530                                             <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
531 
532                                         </span>
533                                     </span>
534 
535                                 </div>
536                             </div>
537 
538                   </div>
539                   <div class="item">
540 
541                             <div class="news-pic">
542                                 <img src="images/news.jpg" alt="抽屉新热榜">
543                             </div>
544 
545                             <div class="news-content">
546                                 <div class="part1">
547                                         <a href="#" class="show-content" target="_blank">
548                                                 【剑桥哥大两研究生欲造登月电梯：称32万公里电缆只需10亿美元】8月25日两位
549                                             剑桥、哥大天文学研究生在arXiv上发表研究称，“月球太空电梯”在技术上和经济上
550                                             具备可行性，只需大约10亿美元成本。研究称，建造月球空间电梯会比运用火箭技术更
551                                             经济，能够将原材料从月球矿山带回地球。
552                                         </a>
553 
554                                         <span class="content-source">-ww4.sinaimg.cn</span>
555                                         <a href="#" class="n2">
556                                             <span class="content-kind">42区</span>
557                                         </a>
558                                 </div>
559 
560                                 <div class="part2">
561 
562 
563                                         <a href="#" class="recommend" title="推荐">
564                                             <span class="hand-icon icon-recommend"></span>
565                                             <b>4</b>
566                                         </a>
567 
568 
569                                         <a href="javascript:;" class="discuss">
570                                             <span class="hand-icon icon-discuss"></span>
571                                             <b>5</b>
572                                         </a>
573 
574 
575                                         <a href="javascript:;" class="collect" title="加入私藏">
576                                             <span class="hand-icon icon-collect"></span>
577                                             <b>私藏</b>
578                                         </a>
579 
580 
581                                         <a href="#" class="user-a">
582                                             <span>
583                                                 <img src="images/13.png">
584                                             </span>
585                                             <b>乱太郎</b>
586                                         </a>
587 
588                                     <span class="left time-into">
589                                         <a class="time-a" href="#" target="_blank">
590                                             <b>4分钟前</b>
591                                         </a>
592                                         <i>入热榜</i>
593                                     </span>
594                                     <!-- 分享各微博的按钮 -->
595 
596                                     <span class="share-site-to">
597                                         <i>分享到</i>
598                                         <span class="share-icon">
599                                             <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
600                                             <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
601                                             <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
602                                             <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
603                                             <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
604                                             <a class="share-none"> </a>
605 
606                                         </span>
607                                     </span>
608 
609                                 </div>
610                             </div>
611 
612                   </div>
613                   <div class="item">
614 
615                             <div class="news-pic">
616                                 <img src="images/news.jpg" alt="抽屉新热榜">
617                             </div>
618 
619                             <div class="news-content">
620                                 <div class="part1">
621                                         <a href="#" class="show-content" target="_blank">
622                                                 【《轮到你了》的正确打开方式】从某个角度看，这是一部描写“邻人有病”的搞
623                                             笑剧，也是一部符合次时代观念的“爱情剧”。对于这样的电视剧，当作喜剧来看，或
624                                             当成动漫改编剧来看就好了，何必那么较真凶手是否可能呢？
625                                         </a>
626 
627                                         <span class="content-source">-ww4.sinaimg.cn</span>
628                                         <a href="#" class="n2">
629                                             <span class="content-kind">42区</span>
630                                         </a>
631                                 </div>
632 
633                                 <div class="part2">
634 
635 
636                                         <a href="#" class="recommend" title="推荐">
637                                             <span class="hand-icon icon-recommend"></span>
638                                             <b>4</b>
639                                         </a>
640 
641 
642                                         <a href="javascript:;" class="discuss">
643                                             <span class="hand-icon icon-discuss"></span>
644                                             <b>5</b>
645                                         </a>
646 
647 
648                                         <a href="javascript:;" class="collect" title="加入私藏">
649                                             <span class="hand-icon icon-collect"></span>
650                                             <b>私藏</b>
651                                         </a>
652 
653 
654                                         <a href="#" class="user-a">
655                                             <span>
656                                                 <img src="images/13.png">
657                                             </span>
658                                             <b>乱太郎</b>
659                                         </a>
660 
661                                     <span class="left time-into">
662                                         <a class="time-a" href="#" target="_blank">
663                                             <b>4分钟前</b>
664                                         </a>
665                                         <i>入热榜</i>
666                                     </span>
667                                     <!-- 分享各微博的按钮 -->
668 
669                                     <span class="share-site-to">
670                                         <i>分享到</i>
671                                         <span class="share-icon">
672                                             <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
673                                             <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
674                                             <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
675                                             <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
676                                             <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
677                                             <a class="share-none"> </a>
678 
679                                         </span>
680                                     </span>
681 
682                                 </div>
683                             </div>
684 
685                   </div>
686                   <div class="item">
687 
688                             <div class="news-pic">
689                                 <img src="images/news.jpg" alt="抽屉新热榜">
690                             </div>
691 
692                             <div class="news-content">
693                                 <div class="part1">
694                                         <a href="#" class="show-content" target="_blank">
695                                                 【美国版饿了么将上市，在美点外卖是种什么体验？】美国外卖市场被几家巨头瓜
696                                             分，各家市场份额在地区上有明显差异。GrubHub在东北区最受欢迎，而DoorDash在德州
697                                             遥遥领先，后起之秀Postmates则在洛杉矶占据了40%的市场，将于9月谋求上市，他同时
698                                             获得了机器人上路送餐的许可，将在LA进行测试。
699                                         </a>
700 
701                                         <span class="content-source">-ww4.sinaimg.cn</span>
702                                         <a href="#" class="n2">
703                                             <span class="content-kind">42区</span>
704                                         </a>
705                                 </div>
706 
707                                 <div class="part2">
708 
709 
710                                         <a href="#" class="recommend" title="推荐">
711                                             <span class="hand-icon icon-recommend"></span>
712                                             <b>4</b>
713                                         </a>
714 
715 
716                                         <a href="javascript:;" class="discuss">
717                                             <span class="hand-icon icon-discuss"></span>
718                                             <b>5</b>
719                                         </a>
720 
721 
722                                         <a href="javascript:;" class="collect" title="加入私藏">
723                                             <span class="hand-icon icon-collect"></span>
724                                             <b>私藏</b>
725                                         </a>
726 
727 
728                                         <a href="#" class="user-a">
729                                             <span>
730                                                 <img src="images/13.png">
731                                             </span>
732                                             <b>乱太郎</b>
733                                         </a>
734 
735                                     <span class="left time-into">
736                                         <a class="time-a" href="#" target="_blank">
737                                             <b>4分钟前</b>
738                                         </a>
739                                         <i>入热榜</i>
740                                     </span>
741                                     <!-- 分享各微博的按钮 -->
742 
743                                     <span class="share-site-to">
744                                         <i>分享到</i>
745                                         <span class="share-icon">
746                                             <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
747                                             <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
748                                             <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
749                                             <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
750                                             <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
751                                             <a class="share-none"> </a>
752 
753                                         </span>
754                                     </span>
755 
756                                 </div>
757                             </div>
758 
759                   </div>
760                   <div class="item">
761 
762                             <div class="news-pic">
763                                 <img src="images/news.jpg" alt="抽屉新热榜">
764                             </div>
765 
766                             <div class="news-content">
767                                 <div class="part1">
768                                         <a href="#" class="show-content" target="_blank">
769                                                 【不要再盲目“唱衰”服饰行业了】李宁的“时尚之心”已是众人皆知，但目前李
770                                             宁在研发上的支出非常微薄，研发费用占营收比重维持在2%的水平。而安踏这一块的投
771                                             入近几年却保持在5%以上，耐克更是达到9%。
772                                         </a>
773 
774                                         <span class="content-source">-ww4.sinaimg.cn</span>
775                                         <a href="#" class="n2">
776                                             <span class="content-kind">42区</span>
777                                         </a>
778                                 </div>
779 
780                                 <div class="part2">
781 
782 
783                                         <a href="#" class="recommend" title="推荐">
784                                             <span class="hand-icon icon-recommend"></span>
785                                             <b>4</b>
786                                         </a>
787 
788 
789                                         <a href="javascript:;" class="discuss">
790                                             <span class="hand-icon icon-discuss"></span>
791                                             <b>5</b>
792                                         </a>
793 
794 
795                                         <a href="javascript:;" class="collect" title="加入私藏">
796                                             <span class="hand-icon icon-collect"></span>
797                                             <b>私藏</b>
798                                         </a>
799 
800 
801                                         <a href="#" class="user-a">
802                                             <span>
803                                                 <img src="images/13.png">
804                                             </span>
805                                             <b>乱太郎</b>
806                                         </a>
807 
808                                     <span class="left time-into">
809                                         <a class="time-a" href="#" target="_blank">
810                                             <b>4分钟前</b>
811                                         </a>
812                                         <i>入热榜</i>
813                                     </span>
814                                     <!-- 分享各微博的按钮 -->
815 
816                                     <span class="share-site-to">
817                                         <i>分享到</i>
818                                         <span class="share-icon">
819                                             <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
820                                             <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
821                                             <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
822                                             <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
823                                             <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
824                                             <a class="share-none"> </a>
825 
826                                         </span>
827                                     </span>
828 
829                                 </div>
830                             </div>
831 
832                   </div>
833                   <div class="item">
834 
835                             <div class="news-pic">
836                                 <img src="images/news.jpg" alt="抽屉新热榜">
837                             </div>
838 
839                             <div class="news-content">
840                                 <div class="part1">
841                                         <a href="#" class="show-content" target="_blank">
842                                                 【沙特产油量可能减半，美国称必要时将动用紧急原油储备】事件发生后，沙特关
843                                             停了该国一半的石油生产。沙特阿美方面表示，这将影响每日近570万桶原油的产量，
844                                             约占到全球原油日产量的5%。由于全球市场周末休市，油价没有立即受到影响。但CNBC
845                                             新闻网分析称，最坏情况下，全球油价会因此上涨10美元/桶。
846                                         </a>
847 
848                                         <span class="content-source">-ww4.sinaimg.cn</span>
849                                         <a href="#" class="n2">
850                                             <span class="content-kind">42区</span>
851                                         </a>
852                                 </div>
853 
854                                 <div class="part2">
855 
856 
857                                         <a href="#" class="recommend" title="推荐">
858                                             <span class="hand-icon icon-recommend"></span>
859                                             <b>4</b>
860                                         </a>
861 
862 
863                                         <a href="javascript:;" class="discuss">
864                                             <span class="hand-icon icon-discuss"></span>
865                                             <b>5</b>
866                                         </a>
867 
868 
869                                         <a href="javascript:;" class="collect" title="加入私藏">
870                                             <span class="hand-icon icon-collect"></span>
871                                             <b>私藏</b>
872                                         </a>
873 
874 
875                                         <a href="#" class="user-a">
876                                             <span>
877                                                 <img src="images/13.png">
878                                             </span>
879                                             <b>乱太郎</b>
880                                         </a>
881 
882                                     <span class="left time-into">
883                                         <a class="time-a" href="#" target="_blank">
884                                             <b>4分钟前</b>
885                                         </a>
886                                         <i>入热榜</i>
887                                     </span>
888                                     <!-- 分享各微博的按钮 -->
889 
890                                     <span class="share-site-to">
891                                         <i>分享到</i>
892                                         <span class="share-icon">
893                                             <a class="icon-sina"    title="分享到新浪微博" href="#" ></a>
894                                             <a class="icon-douban"  title="分享到豆瓣"    href="#" ></a>
895                                             <a class="icon-qqzone"  title="分享到QQ空间"  href="#" ></a>
896                                             <a class="icon-tenxun"  title="分享到腾讯微博" href="#" ></a>
897                                             <a class="icon-renren"  title="分享到人人网"   href="#" ></a>
898                                             <a class="share-none"> </a>
899 
900                                         </span>
901                                     </span>
902 
903                                 </div>
904                             </div>
905 
906                   </div>
907 
908             </div>
909 
910             <div class="page-area">
911                  <ul>
912                      <li><span class="current_page">1</span></li>
913                      <li><a href="#" class="page-a">2</a></li>
914                      <li><a href="#" class="page-a">3</a></li>
915                      <li><a href="#" class="page-a">4</a></li>
916                      <li><a href="#" class="page-a">5</a></li>
917                      <li><a href="#" class="page-a">6</a></li>
918                      <li><a href="#" class="page-a">7</a></li>
919                      <li><a href="#" class="page-a">8</a></li>
920                      <li><a href="#" class="page-a">9</a></li>
921                      <li><a href="#" class="page-a">10</a></li>
922                      <li><a href="#" class="page-a page-next">下一页</a></li>
923                  </ul>
924             </div>
925 
926         </div>
927 
928         <div class="content-R"></div>
929 
930         <div class="footer-box">
931         <div class="foot-nav">
932             <a href="#" target="_blank">关于我们</a>
933             <span>|</span>
934             <a href="#" target="_blank">联系我们</a>
935             <span>|</span>
936             <a href="#" target="_blank">服务条款</a>
937             <span>|</span>
938             <a href="#" target="_blank">隐私政策</a>
939             <span>|</span>
940             <a href="#" target="_blank">抽屉新热榜工具</a>
941             <span>|</span>
942             <a href="#" target="_blank">下载客户端</a>
943             <span>|</span>
944             <a href="#" target="_blank">意见与反馈</a>
945             <span>|</span>
946             <a href="#" target="_blank">友情链接</a>
947             <span>|</span>
948             <a href="#" target="_blank">公告</a>
949         <a href="#"  style="margin-left:0;vertical-align:-2px;">
950             <img src="images/ct_rss.gif" width="36" height="14">
951         </a>
952         </div>
953 
954         <div class="foot-nav2">
955             <a target="_blank" href="#">
956                 <img class="foot_e" src="images/footer1.gif" width="36" height="14">
957             </a>
958             <span class="foot_d">旗下站点</span>
959             <span class="foot_a">©2016chouti.com</span>
960             <a target="_blank" href="#" class="foot_b">京ICP备09053974号-3 京公网安备 110102004562</a>
961             <div style="margin-top:6px;">版权所有：北京格致璞科技有限公司</div>
962 
963         </div>
964     </div>
965 
966     </div>
967 
968 </div>
969 
970 
971 </body>
972 </html>

页面展示：

 

posted @ 2019-09-15 21:06  Simon92  阅读(401)  评论(0)  编辑  收藏  举报