1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a{ 8 text-decoration: none; 9 } 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 .head-box{ 15 height:44px; 16 width: 100%; 17 position: fixed; 18 top: 0; 19 left: 0; 20 background-color: cadetblue; 21 } 22 .head-content{ 23 height: 44px; 24 width: 1016px; 25 background-color:cadetblue ; 26 margin: 0 auto; 27 line-height: 44px; 28 position: relative; 29 30 } 31 .head-content .logo{ 32 display: inline-block; 33 width: 121px; 34 height: 23px; 35 float: left; 36 background:url("images/logo.png"); 37 margin-top: 11px; 38 } 39 .head-content .action-menu{ 40 float: left; 41 42 } 43 .head-content .action-menu .tb{ 44 display: inline-block; 45 padding:0 16px 0 13px ; 46 color: beige; 47 } 48 .head-content .key-search{ 49 float: right; 50 } 51 .head-content .key-search span{ 52 width: 11px; 53 height: 13px; 54 display: inline-block; 55 background: url("images/icon.png") no-repeat 0 -195px; 56 margin-left: 10px; 57 margin-top: -5px; 58 59 } 60 .head-content .action-nav{ 61 float: right; 62 } 63 .main-content-box{ 64 background-color: lightgrey; 65 padding-top: 44px; 66 } 67 .main-content{ 68 background-color: white; 69 margin: 0 auto; 70 width:1016px; 71 height: auto!important; 72 min-height: 700px; 73 overflow: hidden; 74 } 75 .main-content .top-area{ 76 height: 40px; 77 } 78 .main-content .top-area .child-nav a{ 79 display: inline-block; 80 float: left; 81 width: 70px; 82 height: 26px; 83 line-height: 26px; 84 color: #369; 85 text-align: center 86 } 87 .main-content .top-area .sort-nav{ 88 float: left; 89 margin-left: 500px; 90 } 91 .main-content .top-area .sort-nav a{ 92 93 94 display: inline-block; 95 width: 70px; 96 height: 26px; 97 line-height: 26px; 98 color: #369; 99 text-align: center 100 } 101 .main-content .top-area .publish-btn span{ 102 float: right; 103 display: inline-block; 104 105 width: 70px; 106 height: 26px; 107 line-height: 26px; 108 color: #369; 109 text-align: center; 110 background-color:palegoldenrod; 111 112 113 } 114 .content-list .item img{ 115 float: right; 116 } 117 .part1{ 118 line-height: 20px; 119 } 120 .part2{ 121 line-height: 20px; 122 } 123 .part2 .hand-icon{ 124 display: inline-block; 125 width: 18px; 126 height: 18px; 127 background:url("images/icon_18_118.png") no-repeat 0 0; 128 } 129 .part2 .icon-discuss{ 130 background-position: 0 -100px; 131 } 132 .part2 .icon-collect{ 133 background-position: 0 -160px; 134 } 135 .content-list .share-site-to{ 136 float:right ; 137 } 138 .item:hover .share-site-to{ 139 display: inline-block; 140 } 141 .share-site-to .share-icon a{ 142 display: inline-block; 143 opacity: .3; 144 background: url("images/share_icon.png") no-repeat 0 0; 145 } 146 .share-icon .icon-sina{ 147 background-position: 0 -90px; 148 width: 17px; 149 height: 14px; 150 } 151 .page-area{ 152 text-align: center; 153 } 154 .page-area li{ 155 display: inline-block; 156 width: 20px; 157 height: 20px 158 } 159 .footer-box{ 160 text-align: center; 161 } 162 </style> 163 </head> 164 <body> 165 <div class="head-box"> 166 167 <div class="head-content"> 168 169 <a href="#" class="logo"></a> 170 171 <div class="action-menu"> 172 173 <a href="#" class="tb active">全部</a> 174 <a href="#" class="tb">42区</a> 175 <a href="#" class="tb">段子</a> 176 <a href="#" class="tb">图片</a> 177 <a href="#" class="tb">挨踢1024</a> 178 <a href="#" class="tb">你问我答</a> 179 180 </div> 181 182 <div class="key-search"> 183 184 <form action="/" method="post"> 185 186 <input type="text" class="search-txt"> 187 188 <a href="#" class="i" > 189 <span class="ico"></span> 190 </a> 191 192 </form> 193 194 </div> 195 196 <div class="action-nav"> 197 <a href="#" class="register-btn">注册</a> 198 <a href="#" class="login-btn">登录</a> 199 </div> 200 201 </div> 202 </div> 203 204 205 <div class="main-content-box"> 206 207 <div class="main-content"> 208 209 <div class="content-L"> 210 211 <div class="top-area"> 212 213 <div class="child-nav"> 214 215 <a href="#" class="hotbtn active" >最热</a> 216 <a href="#" class="newbtn" >最新</a> 217 <a href="#" class="personbtn" >人类发布</a> 218 219 </div> 220 221 <div class="sort-nav"> 222 <a href="#" class="sortbtn active" >即时排序</a> 223 <a href="#" class="newbtn" >24小时</a> 224 <a href="#" class="newbtn" >3天</a> 225 </div> 226 227 <a href="#" class="publish-btn"> 228 <span class="n2">+ 发布</span> 229 </a> 230 231 </div> 232 233 <div class="content-list"> 234 235 236 <div class="item"> 237 238 <div class="news-pic"> 239 <img src="images/news.jpg" alt="抽屉新热榜"> 240 </div> 241 242 <div class="news-content"> 243 <div class="part1"> 244 <a href="#" class="show-content" target="_blank"> 245 @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二 246 次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸 247 一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌 248 了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。 249 </a> 250 251 <span class="content-source">-ww4.sinaimg.cn</span> 252 <a href="#" class="n2"> 253 <span class="content-kind">42区</span> 254 </a> 255 </div> 256 257 <div class="part2"> 258 259 260 <a href="#" class="recommend" title="推荐"> 261 <span class="hand-icon icon-recommend"></span> 262 <b>4</b> 263 </a> 264 265 266 <a href="javascript:;" class="discuss"> 267 <span class="hand-icon icon-discuss"></span> 268 <b>5</b> 269 </a> 270 271 272 <a href="javascript:;" class="collect" title="加入私藏"> 273 <span class="hand-icon icon-collect"></span> 274 <b>私藏</b> 275 </a> 276 277 278 <a href="#" class="user-a"> 279 <span> 280 <img src="images/13.png"> 281 </span> 282 <b>乱太郎</b> 283 </a> 284 285 <span class="left time-into"> 286 <a class="time-a" href="#" target="_blank"> 287 <b>4分钟前</b> 288 </a> 289 <i>入热榜</i> 290 </span> 291 292 <span class="share-site-to"> 293 <i>分享到</i> 294 <span class="share-icon"> 295 <a class="icon-sina" title="分享到新浪微博" href="#" ></a> 296 <a class="icon-douban" title="分享到豆瓣" href="#" ></a> 297 <a class="icon-qqzone" title="分享到QQ空间" href="#" ></a> 298 <a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a> 299 <a class="icon-renren" title="分享到人人网" href="#" ></a> 300 301 </span> 302 </span> 303 304 </div> 305 </div> 306 307 </div> 308 <div class="item"> 309 310 <div class="news-pic"> 311 <img src="images/news.jpg" alt="抽屉新热榜"> 312 </div> 313 314 <div class="news-content"> 315 <div class="part1"> 316 <a href="#" class="show-content" target="_blank"> 317 @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二 318 次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸 319 一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌 320 了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。 321 </a> 322 323 <span class="content-source">-ww4.sinaimg.cn</span> 324 <a href="#" class="n2"> 325 <span class="content-kind">42区</span> 326 </a> 327 </div> 328 329 <div class="part2"> 330 331 332 <a href="#" class="recommend" title="推荐"> 333 <span class="hand-icon icon-recommend"></span> 334 <b>4</b> 335 </a> 336 337 338 <a href="javascript:;" class="discuss"> 339 <span class="hand-icon icon-discuss"></span> 340 <b>5</b> 341 </a> 342 343 344 <a href="javascript:;" class="collect" title="加入私藏"> 345 <span class="hand-icon icon-collect"></span> 346 <b>私藏</b> 347 </a> 348 349 350 <a href="#" class="user-a"> 351 <span> 352 <img src="images/13.png"> 353 </span> 354 <b>乱太郎</b> 355 </a> 356 357 <span class="left time-into"> 358 <a class="time-a" href="#" target="_blank"> 359 <b>4分钟前</b> 360 </a> 361 <i>入热榜</i> 362 </span> 363 <!-- 分享各微博的按钮 --> 364 365 <span class="share-site-to"> 366 <i>分享到</i> 367 <span class="share-icon"> 368 <a class="icon-sina" title="分享到新浪微博" href="#" ></a> 369 <a class="icon-douban" title="分享到豆瓣" href="#" ></a> 370 <a class="icon-qqzone" title="分享到QQ空间" href="#" ></a> 371 <a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a> 372 <a class="icon-renren" title="分享到人人网" href="#" ></a> 373 <a class="share-none"> </a> 374 375 </span> 376 </span> 377 378 </div> 379 </div> 380 381 </div> 382 <div class="item"> 383 384 <div class="news-pic"> 385 <img src="images/news.jpg" alt="抽屉新热榜"> 386 </div> 387 388 <div class="news-content"> 389 <div class="part1"> 390 <a href="#" class="show-content" target="_blank"> 391 @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二 392 次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸 393 一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌 394 了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。 395 </a> 396 397 <span class="content-source">-ww4.sinaimg.cn</span> 398 <a href="#" class="n2"> 399 <span class="content-kind">42区</span> 400 </a> 401 </div> 402 403 <div class="part2"> 404 405 406 <a href="#" class="recommend" title="推荐"> 407 <span class="hand-icon icon-recommend"></span> 408 <b>4</b> 409 </a> 410 411 412 <a href="javascript:;" class="discuss"> 413 <span class="hand-icon icon-discuss"></span> 414 <b>5</b> 415 </a> 416 417 418 <a href="javascript:;" class="collect" title="加入私藏"> 419 <span class="hand-icon icon-collect"></span> 420 <b>私藏</b> 421 </a> 422 423 424 <a href="#" class="user-a"> 425 <span> 426 <img src="images/13.png"> 427 </span> 428 <b>乱太郎</b> 429 </a> 430 431 <span class="left time-into"> 432 <a class="time-a" href="#" target="_blank"> 433 <b>4分钟前</b> 434 </a> 435 <i>入热榜</i> 436 </span> 437 <!-- 分享各微博的按钮 --> 438 439 <span class="share-site-to"> 440 <i>分享到</i> 441 <span class="share-icon"> 442 <a class="icon-sina" title="分享到新浪微博" href="#" ></a> 443 <a class="icon-douban" title="分享到豆瓣" href="#" ></a> 444 <a class="icon-qqzone" title="分享到QQ空间" href="#" ></a> 445 <a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a> 446 <a class="icon-renren" title="分享到人人网" href="#" ></a> 447 <a class="share-none"> </a> 448 449 </span> 450 </span> 451 452 </div> 453 </div> 454 455 </div> 456 <div class="item"> 457 458 <div class="news-pic"> 459 <img src="images/news.jpg" alt="抽屉新热榜"> 460 </div> 461 462 <div class="news-content"> 463 <div class="part1"> 464 <a href="#" class="show-content" target="_blank"> 465 @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二 466 次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸 467 一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌 468 了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。 469 </a> 470 471 <span class="content-source">-ww4.sinaimg.cn</span> 472 <a href="#" class="n2"> 473 <span class="content-kind">42区</span> 474 </a> 475 </div> 476 477 <div class="part2"> 478 479 480 <a href="#" class="recommend" title="推荐"> 481 <span class="hand-icon icon-recommend"></span> 482 <b>4</b> 483 </a> 484 485 486 <a href="javascript:;" class="discuss"> 487 <span class="hand-icon icon-discuss"></span> 488 <b>5</b> 489 </a> 490 491 492 <a href="javascript:;" class="collect" title="加入私藏"> 493 <span class="hand-icon icon-collect"></span> 494 <b>私藏</b> 495 </a> 496 497 498 <a href="#" class="user-a"> 499 <span> 500 <img src="images/13.png"> 501 </span> 502 <b>乱太郎</b> 503 </a> 504 505 <span class="left time-into"> 506 <a class="time-a" href="#" target="_blank"> 507 <b>4分钟前</b> 508 </a> 509 <i>入热榜</i> 510 </span> 511 <!-- 分享各微博的按钮 --> 512 513 <span class="share-site-to"> 514 <i>分享到</i> 515 <span class="share-icon"> 516 <a class="icon-sina" title="分享到新浪微博" href="#" ></a> 517 <a class="icon-douban" title="分享到豆瓣" href="#" ></a> 518 <a class="icon-qqzone" title="分享到QQ空间" href="#" ></a> 519 <a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a> 520 <a class="icon-renren" title="分享到人人网" href="#" ></a> 521 <a class="share-none"> </a> 522 523 </span> 524 </span> 525 526 </div> 527 </div> 528 529 </div> 530 <div class="item"> 531 532 <div class="news-pic"> 533 <img src="images/news.jpg" alt="抽屉新热榜"> 534 </div> 535 536 <div class="news-content"> 537 <div class="part1"> 538 <a href="#" class="show-content" target="_blank"> 539 @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二 540 次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸 541 一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌 542 了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。 543 </a> 544 545 <span class="content-source">-ww4.sinaimg.cn</span> 546 <a href="#" class="n2"> 547 <span class="content-kind">42区</span> 548 </a> 549 </div> 550 551 <div class="part2"> 552 553 554 <a href="#" class="recommend" title="推荐"> 555 <span class="hand-icon icon-recommend"></span> 556 <b>4</b> 557 </a> 558 559 560 <a href="javascript:;" class="discuss"> 561 <span class="hand-icon icon-discuss"></span> 562 <b>5</b> 563 </a> 564 565 566 <a href="javascript:;" class="collect" title="加入私藏"> 567 <span class="hand-icon icon-collect"></span> 568 <b>私藏</b> 569 </a> 570 571 572 <a href="#" class="user-a"> 573 <span> 574 <img src="images/13.png"> 575 </span> 576 <b>乱太郎</b> 577 </a> 578 579 <span class="left time-into"> 580 <a class="time-a" href="#" target="_blank"> 581 <b>4分钟前</b> 582 </a> 583 <i>入热榜</i> 584 </span> 585 <!-- 分享各微博的按钮 --> 586 587 <span class="share-site-to"> 588 <i>分享到</i> 589 <span class="share-icon"> 590 <a class="icon-sina" title="分享到新浪微博" href="#" ></a> 591 <a class="icon-douban" title="分享到豆瓣" href="#" ></a> 592 <a class="icon-qqzone" title="分享到QQ空间" href="#" ></a> 593 <a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a> 594 <a class="icon-renren" title="分享到人人网" href="#" ></a> 595 <a class="share-none"> </a> 596 597 </span> 598 </span> 599 600 </div> 601 </div> 602 603 </div> 604 <div class="item"> 605 606 <div class="news-pic"> 607 <img src="images/news.jpg" alt="抽屉新热榜"> 608 </div> 609 610 <div class="news-content"> 611 <div class="part1"> 612 <a href="#" class="show-content" target="_blank"> 613 @大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二 614 次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸 615 一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌 616 了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。 617 </a> 618 619 <span class="content-source">-ww4.sinaimg.cn</span> 620 <a href="#" class="n2"> 621 <span class="content-kind">42区</span> 622 </a> 623 </div> 624 625 <div class="part2"> 626 627 628 <a href="#" class="recommend" title="推荐"> 629 <span class="hand-icon icon-recommend"></span> 630 <b>4</b> 631 </a> 632 633 634 <a href="javascript:;" class="discuss"> 635 <span class="hand-icon icon-discuss"></span> 636 <b>5</b> 637 </a> 638 639 640 <a href="javascript:;" class="collect" title="加入私藏"> 641 <span class="hand-icon icon-collect"></span> 642 <b>私藏</b> 643 </a> 644 645 646 <a href="#" class="user-a"> 647 <span> 648 <img src="images/13.png"> 649 </span> 650 <b>乱太郎</b> 651 </a> 652 653 <span class="left time-into"> 654 <a class="time-a" href="#" target="_blank"> 655 <b>4分钟前</b> 656 </a> 657 <i>入热榜</i> 658 </span> 659 <!-- 分享各微博的按钮 --> 660 661 <span class="share-site-to"> 662 <i>分享到</i> 663 <span class="share-icon"> 664 <a class="icon-sina" title="分享到新浪微博" href="#" ></a> 665 <a class="icon-douban" title="分享到豆瓣" href="#" ></a> 666 <a class="icon-qqzone" title="分享到QQ空间" href="#" ></a> 667 <a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a> 668 <a class="icon-renren" title="分享到人人网" href="#" ></a> 669 <a class="share-none"> </a> 670 671 </span> 672 </span> 673 674 </div> 675 </div> 676 677 </div> 678 679 </div> 680 681 <div class="page-area"> 682 <ul> 683 <li><span class="current_page">1</span></li> 684 <li><a href="#" class="page-a">2</a></li> 685 <li><a href="#" class="page-a">3</a></li> 686 <li><a href="#" class="page-a">4</a></li> 687 <li><a href="#" class="page-a">5</a></li> 688 <li><a href="#" class="page-a">6</a></li> 689 <li><a href="#" class="page-a">7</a></li> 690 <li><a href="#" class="page-a">8</a></li> 691 <li><a href="#" class="page-a">9</a></li> 692 <li><a href="#" class="page-a">10</a></li> 693 <li><a href="#" class="page-a page-next">下一页</a></li> 694 </ul> 695 </div> 696 697 </div> 698 699 <div class="content-R"></div> 700 701 <div class="footer-box"> 702 <div class="foot-nav"> 703 <a href="#" target="_blank">关于我们</a> 704 <span>|</span> 705 <a href="#" target="_blank">联系我们</a> 706 <span>|</span> 707 <a href="#" target="_blank">服务条款</a> 708 <span>|</span> 709 <a href="#" target="_blank">隐私政策</a> 710 <span>|</span> 711 <a href="#" target="_blank">抽屉新热榜工具</a> 712 <span>|</span> 713 <a href="#" target="_blank">下载客户端</a> 714 <span>|</span> 715 <a href="#" target="_blank">意见与反馈</a> 716 <span>|</span> 717 <a href="#" target="_blank">友情链接</a> 718 <span>|</span> 719 <a href="#" target="_blank">公告</a> 720 <a href="#" style="margin-left:0;vertical-align:-2px;"> 721 <img src="images/ct_rss.gif" width="36" height="14"> 722 </a> 723 </div> 724 725 <div class="foot-nav2"> 726 <a target="_blank" href="#"> 727 <img class="foot_e" src="images/footer1.gif" width="36" height="14"> 728 </a> 729 <span class="foot_d">旗下站点</span> 730 <span class="foot_a">©2016chouti.com</span> 731 <a target="_blank" href="#" class="foot_b">京ICP备09053974号-3 京公网安备 110102004562</a> 732 <div style="margin-top:6px;">版权所有：北京格致璞科技有限公司</div> 733 734 </div> 735 </div> 736 737 </div> 738 739 </div> 740 741 </body> 742 </html>