1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin:0; 9 padding: 0; 10 } 11 12 a{ 13 text-decoration: none; 14 } 15 16 body{ 17 font-family: "Times New Roman"; 18 font-size: 14px; 19 font-weight: 700; 20 } 21 /*/------------------------*head part:*-------------------------------/*/ 22 .head-box{ 23 /*background-color: #2459a2;*/ 24 background-color: cornsilk; 25 height: 56px; 26 100%; 27 position: fixed; 28 top: 0; 29 left: 0; 30 } 31 32 33 .head-content{ 34 1194px; 35 height: 56px; 36 line-height: 56px; 37 /*background-color: blueviolet;*/ 38 background-color: cornsilk; 39 margin: 0 auto; 40 } 41 42 .head-content .logo-con{ 43 background:url("images/logo.png"); 44 float: left; 45 margin-top: 10px; 46 display: inline-block; 47 height: 36px; 48 36px; 49 50 } 51 52 .head-content .logo-text{ 53 background:url("images/logo1.png"); 54 margin-top: 17px; 55 margin-left: 12px; 56 112px; 57 height: 22px; 58 position: relative; 59 /*top: -7px;*/ 60 display: inline-block; 61 float: left; 62 } 63 64 .action-menu{ 65 float: left; 66 line-height: 18.4px; 67 } 68 69 .head-content .action-menu a.tb{ 70 display: inline-block; 71 margin-left: 28px; 72 padding: 17px 11px; 73 border: solid 2px cornsilk; 74 color:#4b4c4d 75 76 } 77 78 .head-content .action-menu a.active{ 79 border-bottom: solid 3px #f8aa00; 80 } 81 .head-content .action-menu a.tb:hover{ 82 color: #f8aa00; 83 84 } 85 86 .key-search{ 87 float: left; 88 } 89 90 .key-search{ 91 208px; 92 height: 36px; 93 line-height: 36px; 94 margin-top: 10px; 95 margin-right: 35px; 96 margin-left: 20px; 97 background-color: lightpink; 98 position: relative; 99 border-radius: 2px; 100 } 101 102 .key-search .search-txt{ 103 margin-left: 10px; 104 background-color: lightpink; 105 border: none; 106 outline: 0; 107 font-size: 14px; 108 } 109 110 .key-search .i .ico{ 111 display: inline-block; 112 18px; 113 height: 18px; 114 position: absolute; 115 cursor: pointer; 116 top: 8px; 117 right: 12px; 118 background-size: 100%; 119 background:url("images/search.png"); 120 /*background-color: lightpink;*/ 121 } 122 123 .head-content .publish-btn{ 124 margin-right: 35px; 125 margin-top: 13px; 126 padding: 8px; 127 display: inline-block; 128 height: 15px; 129 15px; 130 background-color: #f8aa00; 131 text-align: center; 132 border: 1px solid #f8aa00; 133 border-radius: 2px; 134 float: left; 135 font-size: 14px; 136 137 } 138 .head-content .publish-btn .publish-ico{ 139 background:url("images/publish.png"); 140 14px; 141 height: 14px; 142 margin-right: -5px; 143 position: relative; 144 top: -16px; 145 display: inline-block; 146 147 background-size: 15px 15px; 148 } 149 150 .head-content .login-btn{ 151 margin-top: 7px; 152 font-size: 14px; 153 padding: 5px 15px; 154 font-weight: 700; 155 float: right; 156 line-height: 30px; 157 text-align: center; 158 border: 1px solid #f8aa00; 159 border-radius: 2px; 160 color: #f8aa00; 161 background-color: cornsilk; 162 cursor: pointer; 163 60px; 164 height: 30px; 165 } 166 /*/------------------------*head part ending:*-------------------------------/*/ 167 168 /*/------------------------*content part starting:*-------------------------------/*/ 169 .main-content-box{ 170 background-color: lightgray; 171 padding-top: 70px; 172 } 173 174 .main-content{ 175 background-color:lightpink ; 176 margin: 0 auto; 177 1016px; 178 height: auto!important; 179 min-height: 700px; 180 overflow: hidden; 181 } 182 .main-content .content-L{ 183 float: left; 184 630px; 185 margin-top: 10px; 186 } 187 188 .main-content .content-R{ 189 float: right; 190 } 191 192 .footer-box{ 193 clear: both; 194 } 195 196 .content-L .top-area{ 197 border-bottom: 1px solid darkcyan; 198 height: 40px; 199 } 200 201 .top-area .child-nav a{ 202 display: inline-block; 203 60px; 204 height: 26px; 205 line-height: 26px; 206 color: #390; 207 float: left; 208 } 209 210 .top-area .child-nav .active{ 211 font-weight: bolder; 212 } 213 214 .sort-nav{ 215 float: left; 216 margin-left: 120px; 217 margin-top: 10px; 218 } 219 220 .sort-nav a{ 221 display: inline-block; 222 text-align: center; 223 color: #390; 224 margin-left: 10px; 225 } 226 227 .sort-nav .active{ 228 color: #b4b4b4; 229 } 230 231 .publish-btn{ 232 display: inline-block; 233 136px; 234 height: 32px; 235 background-color: #84a42b; 236 float: right; 237 color: white; 238 font-size: 16px; 239 text-align: center; 240 line-height: 32px; 241 } 242 243 .content-list .item{ 244 245 padding-top: 10px; 246 border-bottom: 1px solid #b4b4b4; 247 line-height: 100px; 248 } 249 250 .content-list .item .news-pic{ 251 background: url("images/pic.jpg"); 252 float: right; 253 display: inline-block; 254 100px; 255 height: 100px; 256 } 257 258 .content-list .item .part1{ 259 line-height: 20px; 260 } 261 .content-list .item .part1:hover a.show-content{ 262 text-decoration: underline; 263 264 } 265 266 .content-list .item .part2{ 267 padding: 10px 0; 268 color: #99aecb; 269 } 270 271 .part2 .hand-icon{ 272 background: url("#") no-repeat 0 0; 273 display: inline-block; 274 18px; 275 height: 18px; 276 } 277 278 .part2 .icon-recommend{ 279 background-position: 0px -40px; 280 } 281 282 .part2 .recommend:hover .icon-recommend{ 283 background-position: 0px -20px; 284 } 285 286 .part2 .icon-discuss{ 287 background-position: 0px -100px; 288 } 289 290 .part2 .discuss:hover .icon-discuss{ 291 background-position: 0px -80px; 292 } 293 294 .part2 .icon-collect{ 295 background-position: 0px -160px; 296 } 297 298 .part2 .collect:hover .icon-collect{ 299 background-position: 0px -140px; 300 } 301 302 .part2 a{ 303 margin-left: 8px; 304 } 305 306 .part2 a b, .part2 span i{ 307 vertical-align: 4px; 308 font-size: 14px; 309 } 310 311 .share-site-to { 312 float: right; 313 display: none; 314 } 315 316 /*##########################!*考虑优先级问题*!*/ 317 318 319 .share-site-to .share-icon a{ 320 display: inline-block; 321 /* 14px;*/ 322 background:url("#") no-repeat 0 0; 323 opacity: .3; 324 } 325 326 .share-icon a.icon-sina{ 327 background-position: 0 -90px; 328 17px; 329 height: 14px; 330 } 331 332 .share-icon a.icon-douban{ 333 background-position: 0 -105px; 334 17px; 335 height: 14px; 336 } 337 338 .share-icon a.icon-qqzone{ 339 background-position: 0 -120px; 340 17px; 341 height: 14px; 342 } 343 344 .share-icon a.icon-renren{ 345 background-position: 0 -151px; 346 17px; 347 height: 14px; 348 } 349 350 .share-icon a.icon-tenxun{ 351 background-position: 0 -90px; 352 17px; 353 height: 14px; 354 } 355 356 .item:hover .share-site-to { 357 display: inline-block; 358 } 359 360 .share-site-to .share-icon a:hover{ 361 opacity: 1; 362 } 363 364 .page-area ul li{ 365 display: inline-block; 366 } 367 368 .page-area ul li a{ 369 display: inline-block; 370 34px; 371 height: 34px; 372 line-height: 34px; 373 color: #369; 374 text-align: center; 375 border: 1px solid #e1e1e1; 376 border-radius: 15%; 377 margin-left: 5px; 378 } 379 380 .page-area ul li a.page-next{ 381 90px; 382 } 383 384 .page-area ul li a:hover{ 385 background-color: #369; 386 color: white; 387 } 388 389 .page-area{ 390 margin-left: 50px; 391 } 392 393 /*/------------------------*content part endig:*-------------------------------/*/ 394 /*/------------------------*footer part starting:*-------------------------------/*/ 395 .footer-box{ 396 clear: both; 397 margin: 0 auto; 398 960px; 399 background-color: #fff; 400 border-top: 1px solid #dce7f4; 401 } 402 403 .footer-box .foot-nav{ 404 padding-top: 15px; 405 text-align: center; 406 border-top: 1px solid #cedcef; 407 } 408 409 .footer-box .foot-nav2{ 410 padding-top: 15px; 411 text-align: center; 412 border-top: 1px solid #cedcef; 413 } 414 </style> 415 </head> 416 <body> 417 418 419 <div class="head-box"> 420 <div class="head-content"> 421 <a class="logo-con left" href="/"> 422 <!-- <img class="logo-icon" url="/images/logo.png">--> 423 <!-- <img class="logo-txt" url="/images/logo1.png">--> 424 </a> 425 <a href="/" class="logo-text"></a> 426 <div class="action-menu"> 427 <a href="#" class="tb active">All</a> 428 <a href="#" class="tb">42area</a> 429 <a href="#" class="tb">phase</a> 430 <a href="#" class="tb">picture</a> 431 <a href="#" class="tb">kick1024</a> 432 <a href="#" class="tb">YAIA</a> 433 </div> 434 435 <div class="key-search"> 436 <form action="/" method="post"> 437 <input type="text" class="search-txt" placeholder="search"> 438 <a href="#" class="i"> 439 <span class="ico"></span> 440 </a> 441 </form> 442 443 </div> 444 <!-- <div class="active-nav">--> 445 <!-- <a href="#" class="register-btn">register</a>--> 446 <!-- <a href="#" class="login-btn">login</a>--> 447 <!-- </div>--> 448 <a href="#" class="btn right publish-btn"> 449 <span class="publish-ico"></span> 450 </a> 451 <a href="#" class="login-btn">login</a> 452 </div> 453 454 </div> 455 456 457 <div class="main-content-box"> 458 <div class="main-content"> 459 <div class="content-L"> 460 <div class="top-area"> 461 <div class="child-nav"> 462 <a href="#" class="hotbtn active">最热</a> 463 <a href="#" class="newbtn">最新</a> 464 <a href="#" class="personbtn">人类发布</a> 465 466 </div> 467 <div class="sort-nav"> 468 <a href="#" class="sortbtn active">即时排序</a> 469 <a href="#" class="newbtn">24h</a> 470 <a href="#" class="personbtn">3day</a> 471 </div> 472 <a href="#" class="publish-btn"> 473 <span class="n2">+ 发布</span> 474 </a> 475 </div> 476 477 <div class="content-list"> 478 <div class="item"> 479 <a class="news-pic"> 480 <!-- <img src="images/pic.jpg" alt="抽屉新热榜">--> 481 </a> 482 <div class="news-content"> 483 <div class="part1"> 484 <a href="#" class="show-content" data-title="【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。" data-pic="https://img3.chouti.com/CHOUTI_20200622/2E75A9F4F03C44378CA9288E30E2036E_W238H238.jpeg" data-id="29696675" data-url="/share/link?link_id=29696675" data-section-id="1224" data-subject-id="1"> 485 【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。 486 </a> 487 </div> 488 <div class="part2"> 489 <a href="#" class="recommend" title="推荐"> 490 <span class="hand-icon icon-recommend"></span> 491 <b>4</b> 492 </a> 493 494 <a href="#" class="discuss"> 495 <span class="hand-icon icon-discuss"></span> 496 <b>5</b> 497 </a> 498 499 <a href="#" class="collect" title="加入私藏"> 500 <span class="hand-icon icon-collect"></span> 501 <b>私藏</b> 502 </a> 503 504 <a href="#" class="user-a" > 505 <span> 506 <img src="images/13.png"> 507 </span> 508 <b>乱太郎</b> 509 </a> 510 511 <span class="left time-into"> 512 <a href="#" class="time-a" target="_blank"> 513 <b>4分钟前</b> 514 </a> 515 <i>入热榜</i> 516 </span> 517 518 <span class="share-site-to"> 519 <i>分享到</i> 520 <span class="share-icon"> 521 <a href="#" class="icon-sina" title="分享到新浪微博"></a> 522 <a href="#" class="icon-douban" title="分享到豆瓣"></a> 523 <a href="#" class="icon-qqzone" title="分享到qq空间"></a> 524 <a href="#" class="icon-tenxun" title="分享到腾讯微博"></a> 525 <a href="#" class="icon-renren" title="分享到人人网"></a> 526 </span> 527 </span> 528 </div> 529 </div> 530 </div> 531 <div class="item"> 532 <a class="news-pic"> 533 <!-- <img src="images/pic.jpg" alt="抽屉新热榜">--> 534 </a> 535 <div class="news-content"> 536 <div class="part1"> 537 <a href="#" class="show-content" data-title="【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。" data-pic="https://img3.chouti.com/CHOUTI_20200622/2E75A9F4F03C44378CA9288E30E2036E_W238H238.jpeg" data-id="29696675" data-url="/share/link?link_id=29696675" data-section-id="1224" data-subject-id="1"> 538 【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。 539 </a> 540 </div> 541 <div class="part2"> 542 <a href="#" class="recommend" title="推荐"> 543 <span class="hand-icon icon-recommend"></span> 544 <b>4</b> 545 </a> 546 547 <a href="#" class="discuss"> 548 <span class="hand-icon icon-discuss"></span> 549 <b>5</b> 550 </a> 551 552 <a href="#" class="collect" title="加入私藏"> 553 <span class="hand-icon icon-collect"></span> 554 <b>私藏</b> 555 </a> 556 557 <a href="#" class="user-a" > 558 <span> 559 <img src="images/13.png"> 560 </span> 561 <b>乱太郎</b> 562 </a> 563 564 <span class="left time-into"> 565 <a href="#" class="time-a" target="_blank"> 566 <b>4分钟前</b> 567 </a> 568 <i>入热榜</i> 569 </span> 570 571 <span class="share-site-to"> 572 <i>分享到</i> 573 <span class="share-icon"> 574 <a href="#" class="icon-sina" title="分享到新浪微博"></a> 575 <a href="#" class="icon-douban" title="分享到豆瓣"></a> 576 <a href="#" class="icon-qqzone" title="分享到qq空间"></a> 577 <a href="#" class="icon-tenxun" title="分享到腾讯微博"></a> 578 <a href="#" class="icon-renren" title="分享到人人网"></a> 579 </span> 580 </span> 581 </div> 582 </div> 583 </div> 584 <div class="item"> 585 <a class="news-pic"> 586 <!-- <img src="images/pic.jpg" alt="抽屉新热榜">--> 587 </a> 588 <div class="news-content"> 589 <div class="part1"> 590 <a href="#" class="show-content" data-title="【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。" data-pic="https://img3.chouti.com/CHOUTI_20200622/2E75A9F4F03C44378CA9288E30E2036E_W238H238.jpeg" data-id="29696675" data-url="/share/link?link_id=29696675" data-section-id="1224" data-subject-id="1"> 591 【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。 592 </a> 593 </div> 594 <div class="part2"> 595 <a href="#" class="recommend" title="推荐"> 596 <span class="hand-icon icon-recommend"></span> 597 <b>4</b> 598 </a> 599 600 <a href="#" class="discuss"> 601 <span class="hand-icon icon-discuss"></span> 602 <b>5</b> 603 </a> 604 605 <a href="#" class="collect" title="加入私藏"> 606 <span class="hand-icon icon-collect"></span> 607 <b>私藏</b> 608 </a> 609 610 <a href="#" class="user-a" > 611 <span> 612 <img src="images/13.png"> 613 </span> 614 <b>乱太郎</b> 615 </a> 616 617 <span class="left time-into"> 618 <a href="#" class="time-a" target="_blank"> 619 <b>4分钟前</b> 620 </a> 621 <i>入热榜</i> 622 </span> 623 624 <span class="share-site-to"> 625 <i>分享到</i> 626 <span class="share-icon"> 627 <a href="#" class="icon-sina" title="分享到新浪微博"></a> 628 <a href="#" class="icon-douban" title="分享到豆瓣"></a> 629 <a href="#" class="icon-qqzone" title="分享到qq空间"></a> 630 <a href="#" class="icon-tenxun" title="分享到腾讯微博"></a> 631 <a href="#" class="icon-renren" title="分享到人人网"></a> 632 </span> 633 </span> 634 </div> 635 </div> 636 </div> 637 </div> 638 639 <div class="page-area"> 640 <ul> 641 <li><span class="current_page">1</span></li> 642 <li><a href="#" class="page-a">2</a></li> 643 <li><a href="#" class="page-a">3</a></li> 644 <li><a href="#" class="page-a">4</a></li> 645 <li><a href="#" class="page-a">5</a></li> 646 <li><a href="#" class="page-a">6</a></li> 647 <li><a href="#" class="page-a">7</a></li> 648 <li><a href="#" class="page-a">8</a></li> 649 <li><a href="#" class="page-a">9</a></li> 650 <li><a href="#" class="page-a page-next">下一页</a></li> 651 </ul> 652 </div> 653 </div> 654 <div class="content-R"></div> 655 <div class="footer-box"> 656 <span class="foot-nav"> 657 <a href="#">关于我们</a> 658 <a href="#">联系我们</a> 659 </span> 660 </div> 661 </div> 662 663 </div> 664 </body> 665 </html>