旧版抽屉新热榜
代码如下：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 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">挨踢1024a> 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">+ 发布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.cnspan> 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>4b> 494 a> 495 496 497 <a href="javascript:;" class="discuss"> 498 <span class="hand-icon icon-discuss">span> 499 <b>5b> 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.cnspan> 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>4b> 566 a> 567 568 569 <a href="javascript:;" class="discuss"> 570 <span class="hand-icon icon-discuss">span> 571 <b>5b> 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.cnspan> 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>4b> 639 a> 640 641 642 <a href="javascript:;" class="discuss"> 643 <span class="hand-icon icon-discuss">span> 644 <b>5b> 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.cnspan> 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>4b> 713 a> 714 715 716 <a href="javascript:;" class="discuss"> 717 <span class="hand-icon icon-discuss">span> 718 <b>5b> 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.cnspan> 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>4b> 786 a> 787 788 789 <a href="javascript:;" class="discuss"> 790 <span class="hand-icon icon-discuss">span> 791 <b>5b> 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.cnspan> 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>4b> 860 a> 861 862 863 <a href="javascript:;" class="discuss"> 864 <span class="hand-icon icon-discuss">span> 865 <b>5b> 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">1span>li> 913 <li><a href="#" class="page-a">2a>li> 914 <li><a href="#" class="page-a">3a>li> 915 <li><a href="#" class="page-a">4a>