㈠豆瓣首页HTML代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>项目实战-豆瓣首页</title> 6 <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> 7 <link rel="stylesheet" href="dbindex.css "> 8 </head> 9 <body> 10 <!--头部区域--> 11 <header class="header"> 12 <div class="container clearfix"> 13 <div class="logo left"> 14 <h1> 15 <a href=""> 16 <span>豆瓣</span> 17 </a> 18 </h1> 19 </div> 20 <div class="search left"> 21 <form> 22 <input type="text" class="txt" placeholder="书籍、电影、音乐、小组、成员"> 23 <button> 24 <i class="iconfont iconsousuo" ></i><!--字体图标--> 25 </button> 26 </form> 27 </div> 28 <div class="menu right clearfix"> 29 <a href="" class="menu-read"></a> 30 <a href="" class="menu-movie"></a> 31 <a href="" class="menu-music"></a> 32 <a href="" class="menu-group"></a> 33 <a href="" class="menu-city"></a> 34 <a href="" class="menu-fm"></a> 35 <a href="" class="menu-time"></a> 36 <a href="" class="menu-doupin"></a> 37 </div> 38 </div> 39 </header> 40 41 <!--横幅区域--> 42 <div class="banner"> 43 <div class="container clearfix"> 44 <iframe class="right loginarea" src="loginframe.html" frameborder="0"></iframe> 45 <div class="slogan right"> 46 <h1 class="title" > 47 豆瓣 48 <span>6.0</span> 49 </h1> 50 <div class="download"> 51 <button class="btn" >下载豆瓣 App</button> 52 <div class="qrcode" > 53 <img src="img/icon-qr-smell.png " alt=""> 54 <div class="qrcode-img hidden"> 55 <img src="img/qrlogin_code.png" alt=""> 56 <p> 57 iOS / Android 扫码直接下载 58 </p> 59 </div> 60 </div> 61 </div> 62 </div> 63 </div> 64 </div> 65 66 <!--主区域样式--> 67 <div> 68 <!--热点--> 69 <div class="section"> 70 <div class="container clearfix"> 71 <!--右边栏--> 72 <div class="aside-right"> 73 <!--广告--> 74 <div class="adv"> 75 <a href=""> 76 <img src="img/adv1.jpg" alt="广告图片"> 77 </a> 78 </div> 79 <!--标题--> 80 <div class="section-title"> 81 <h2 class="title">热门话题</h2> 82 <span class="link"> 83 <a href="">去话题广场</a> 84 </span> 85 </div> 86 <!--列表--> 87 <ul class="hot-list"> 88 <li> 89 <div class="title"> 90 <a href="">新型肺炎预防指南</a> 91 </div> 92 <div class="description"> 93 <span>5425.8万次浏览</span> 94 </div> 95 </li> 96 97 <li> 98 <div class="title"> 99 <a href="" class="adv-tag">你和伴侣玩过的“分手游戏”</a> 100 </div> 101 <div class="description"> 102 <span>6.0万次浏览</span> 103 </div> 104 </li> 105 106 <li> 107 <div class="title"> 108 <a href="">和新冠肺炎疫情有关的记忆</a> 109 </div> 110 <div class="description"> 111 <span>1735.9万次浏览</span> 112 </div> 113 </li> 114 115 <li> 116 <div class="title"> 117 <a href="">宅家消费实录</a> 118 </div> 119 <div class="description"> 120 <span>新话题</span> 121 <span>1.3万次浏览</span> 122 </div> 123 </li> 124 125 <li> 126 <div class="title"> 127 <a href="">疫情对你的行业或工作有什么影响</a> 128 </div> 129 <div class="description"> 130 <span>286.7万次浏览</span> 131 </div> 132 </li> 133 134 <li> 135 <div class="title"> 136 <a href="">新冠肺炎期间，你们小区办出入证了吗？</a> 137 </div> 138 <div class="description"> 139 <span>38.2万次浏览</span> 140 </div> 141 </li> 142 </ul> 143 </div> 144 145 <!--主区域--> 146 <div class="main"> 147 <!--标题--> 148 <div class="section-title"> 149 <h2 class="title">热点内容</h2> 150 <span class="link"> 151 <a href="">更多</a> 152 </span> 153 </div> 154 <!--热点主区域--> 155 <div class="hot-main clearfix"> 156 <!--左侧内容--> 157 <div class="left"> 158 <ul class="item-list"> 159 <li> 160 <div class="img"> 161 <a href=""> 162 <img src="img/color1.webp" alt=""> 163 </a> 164 </div> 165 <div class="word"> 166 <a href="">大部分是自己的作业相册</a> 167 <span>20张照片</span> 168 </div> 169 </li> 170 171 <li> 172 <div class="img"> 173 <a href=""> 174 <img src="img/color2.webp" alt=""> 175 </a> 176 </div> 177 <div class="word"> 178 <a href="">新涂鸦</a> 179 <span>59张照片</span> 180 </div> 181 </li> 182 183 <li> 184 <div class="img"> 185 <a href=""> 186 <img src="img/color3.webp" alt=""> 187 </a> 188 </div> 189 <div class="word"> 190 <a href="">废墟|废弃剧院</a> 191 <span>39张照片</span> 192 </div> 193 </li> 194 195 <li> 196 <div class="img"> 197 <a href=""> 198 <img src="img/color4.webp" alt=""> 199 </a> 200 </div> 201 <div class="word"> 202 <a href="">废墟 | 迷失宫殿</a> 203 <span>55张照片</span> 204 </div> 205 </li> 206 </ul> 207 </div> 208 <!--右侧内容--> 209 <div class="right"> 210 <ul> 211 <li> 212 <a href="">住在厕所里的“沪漂族”</a> 213 <div class="title">越村的日记</div> 214 <div class="description"> 215 本文原载于【X博士】 “法租界”，上海的中心城区，最富小资情调的打卡圣地，路边... 216 </div> 217 </li> 218 219 <li> 220 <a href=""> 221 桜台コートビレジ(Sakuradai Court Village)/ 内井昭藏_山地集合住宅的炒鸡佳作 222 </a> 223 </li> 224 <li> 225 <a href=""> 226 我爸的心是一座巨大的修车厂 227 </a> 228 </li> 229 <li> 230 <a href=""> 231 为什么中国的电影都是有字幕的，而几乎世界各地都是没有的？ 232 </a> 233 </li> 234 <li> 235 <a href=""> 236 去婆婆家过年，一场无法逃避的乡村修行 237 </a> 238 </li> 239 <li> 240 <a href="">上海物候记录24-岑卜村：你见过上海的霜花吗？ 241 </a> 242 </li> 243 <li> 244 <a href=""> 245 30岁了｜一晃而过的前三分之一人生 246 </a> 247 </li> 248 <li> 249 <a href="">记录：陪奶奶读旧书(●‘?‘●) 250 </a> 251 </li> 252 <li> 253 <a href=""> 254 混乱又鲜活：年末十八线城市的小商品批发市场 255 </a> 256 </li> 257 <li> 258 <a href=""> 259 记忆中的象牙塔 260 </a> 261 </li> 262 </ul> 263 </div> 264 </div> 265 </div> 266 </div> 267 </div> 268 269 <!--豆瓣时间--> 270 <div class="section"> 271 <div class="container clearfix"> 272 <!--左边栏--> 273 <div class="aside-left"> 274 <h2 class="title"> 275 <a href="" class="dark-color">豆瓣时间</a> 276 </h2> 277 </div> 278 <!--主区域--> 279 <div class="main"> 280 <!--标题--> 281 <div class="section-title"> 282 <h2 class="title">热门专门</h2> 283 <span class="link"> 284 <a href="">更多</a> 285 </span> 286 </div> 287 <!--主要内容--> 288 <div class="time-main"> 289 <ul class="item-list"> 290 <li> 291 <div class="img"> 292 <a href=""> 293 <img src="img/mainner1.jpg" alt=""> 294 </a> 295 </div> 296 <div class="words"> 297 <a href="">电影产业破壁课——13小时重塑电影世界观</a> 298 <span>视频专栏</span> 299 </div> 300 </li> 301 <li> 302 <div class="img"> 303 <a href=""> 304 <img src="img/mainner2.jpg" alt=""> 305 </a> 306 </div> 307 <div class="words"> 308 <a href="">不准无聊！精品大师课免费放送</a> 309 <span>音频专栏</span> 310 </div> 311 </li> 312 <li> 313 <div class="img"> 314 <a href=""> 315 <img src="img/mainner3.jpg" alt=""> 316 </a> 317 </div> 318 <div class="words"> 319 <a href="">懂得这些再去穿越——古代天文学里的星空密码</a> 320 <span>音频专栏</span> 321 </div> 322 </li> 323 <li> 324 <div class="img"> 325 <a href=""> 326 <img src="img/mainner4.jpg" alt=""> 327 </a> 328 </div> 329 <div class="words"> 330 <a href="">收获一生之书——马家辉解读影响人生的24部文学经典</a> 331 <span>音频专栏</span> 332 </div> 333 </li> 334 <li> 335 <div class="img"> 336 <a href=""> 337 <img src="img/mainner5.jpg" alt=""> 338 </a> 339 </div> 340 <div class="words"> 341 <a href="">我同世界交流的方式——顶级纪录片导演创作分享课</a> 342 <span>音频专栏</span> 343 </div> 344 </li> 345 <li> 346 <div class="img"> 347 <a href=""> 348 <img src="img/mainner6.jpg" alt=""> 349 </a> 350 </div> 351 <div class="words"> 352 <a href="">掌控人生剧本——12堂改变命运的思维课</a> 353 <span>音频专栏</span> 354 </div> 355 </li> 356 <li> 357 <div class="img"> 358 <a href=""> 359 <img src="img/mainner7.jpg" alt=""> 360 </a> 361 </div> 362 <div class="words"> 363 <a href="">如何读懂美——赤木明登工艺课堂</a> 364 <span>视频专栏</span> 365 </div> 366 </li> 367 <li> 368 <div class="img"> 369 <a href=""> 370 <img src="img/mainner8.jpg" alt=""> 371 </a> 372 </div> 373 <div class="words"> 374 <a href="">李安解读立体电影</a> 375 <span>视频专栏</span> 376 </div> 377 </li> 378 <li> 379 <div class="img"> 380 <a href=""> 381 <img src="img/mainner1.jpg" alt=""> 382 </a> 383 </div> 384 <div class="words"> 385 <a href="">杨超教你用导演思维看电影——十大专题破解电影密码</a> 386 <span>视频专栏</span> 387 </div> 388 </li> 389 <li> 390 <div class="img"> 391 <a href=""> 392 <img src="img/mainner10.jpg" alt=""> 393 </a> 394 </div> 395 <div class="words"> 396 <a href="">好听的声音会跳舞——季冠霖的声音形象课</a> 397 <span>音频专栏</span> 398 </div> 399 </li> 400 </ul> 401 </div> 402 </div> 403 </div> 404 </div> 405 406 <!--视频--> 407 <div class="section"> 408 <div class="container clearfix"> 409 <!--左区域--> 410 <div class="aside-left"> 411 <div class="title"> 412 <h2> 413 <a href="" class="dark-color">视频</a> 414 </h2> 415 </div> 416 </div> 417 418 <!--主区域--> 419 <div class="main video-main"> 420 <div class="section-title" > 421 <a href=""> 422 <h2 class="title">瓣嘴</h2> 423 </a> 424 </div> 425 426 <ul class="item-list"> 427 <li> 428 <a href=""> 429 <div class="img iconfont iconbofang"> 430 <img src="img/clear1.webp " alt=""> 431 </div> 432 </a> 433 <div class="words"> 434 <a href="">在美好的景区进行飞奔快跑</a> 435 </div> 436 </li> 437 438 <li> 439 <a href=""> 440 <div class="img iconfont iconbofang"> 441 <img src="img/clear1.webp " alt=""> 442 </div> 443 </a> 444 <div class="words"> 445 <a href="">在美好的景区进行飞奔快跑</a> 446 </div> 447 </li> 448 449 <li> 450 <a href=""> 451 <div class="img iconfont iconbofang"> 452 <img src="img/clear1.webp " alt=""> 453 </div> 454 </a> 455 <div class="words"> 456 <a href="">在美好的景区进行飞奔快跑</a> 457 </div> 458 </li> 459 </ul> 460 461 <div class="section-title" > 462 <a href=""> 463 <h2 class="title">观影会客厅</h2> 464 </a> 465 </div> 466 467 <ul class="item-list"> 468 <li> 469 <a href=""> 470 <div class="img iconfont iconbofang"> 471 <img src="img/clear1.webp " alt=""> 472 </div> 473 </a> 474 <div class="words"> 475 <a href="">在美好的景区进行飞奔快跑</a> 476 </div> 477 </li> 478 479 <li> 480 <a href=""> 481 <div class="img iconfont iconbofang"> 482 <img src="img/clear1.webp " alt=""> 483 </div> 484 </a> 485 <div class="words"> 486 <a href="">在美好的景区进行飞奔快跑</a> 487 </div> 488 </li> 489 490 <li> 491 <a href=""> 492 <div class="img iconfont iconbofang"> 493 <img src="img/clear1.webp " alt=""> 494 </div> 495 </a> 496 <div class="words"> 497 <a href="">在美好的景区进行飞奔快跑</a> 498 </div> 499 </li> 500 </ul> 501 </div> 502 </div> 503 </div> 504 505 <!--电影--> 506 <div class="section"> 507 <div class="container clearfix movie-area"> 508 <!--左边栏--> 509 <div class="aside-left"> 510 <!--标题--> 511 <div class="title"> 512 <h2> 513 <a href="">电影</a> 514 </h2> 515 </div> 516 <!--左边菜单--> 517 <nav class="left-menu"> 518 <ul> 519 <li><a href="">影讯&购票</a></li> 520 <li><a href="" class="new">选电影</a></li> 521 <li><a href="">电视剧</a></li> 522 <li><a href="">排行榜</a></li> 523 <li><a href="">分类</a></li> 524 <li><a href="">影评</a></li> 525 <li><a href="">预告片</a></li> 526 <li><a href="">问答</a></li> 527 </ul> 528 </nav> 529 </div> 530 531 <!--右边栏--> 532 <div class="aside-right"> 533 <div class="section-title"> 534 <h2 class="title">影片分类</h2> 535 <span class="link"> 536 <a href="">更多</a> 537 </span> 538 </div> 539 540 <ul class="right-menu-list clearfix"> 541 <li><a href="">爱情</a></li> 542 <li><a href="">剧情</a></li> 543 <li><a href="">喜剧</a></li> 544 <li><a href="">动画</a></li> 545 <li><a href="">科幻</a></li> 546 <li><a href="">经典</a></li> 547 <li><a href="">动作</a></li> 548 <li><a href="">悬疑</a></li> 549 <li><a href="">犯罪</a></li> 550 <li><a href="">青春</a></li> 551 <li><a href="">搞笑</a></li> 552 <li><a href="">文艺</a></li> 553 <li><a href="">惊悚</a></li> 554 <li><a href="">励志</a></li> 555 <li><a href="">纪录片</a></li> 556 <li><a href="">幽默</a></li> 557 <li><a href="">战争</a></li> 558 <li><a href="">恐怖</a></li> 559 <li><a href="">美国</a></li> 560 <li><a href="">日本</a></li> 561 </ul> 562 563 <div class="section-title"> 564 <h2 class="title">近期热门</h2> 565 <span class="link"> 566 <a href="">更多</a> 567 </span> 568 </div> 569 570 <ul class="order-movie-list"> 571 <li><a href="">1917</a></li> 572 <li><a href="">寄生虫</a></li> 573 <li><a href="">小妇人</a></li> 574 <li><a href="">囧妈</a></li> 575 <li><a href="">乔乔的异想世界</a></li> 576 <li><a href="">小丑</a></li> 577 <li><a href="">阳光普照</a></li> 578 <li><a href="">半个喜剧</a></li> 579 <li><a href="">爱尔兰人</a></li> 580 <li><a href="">婚姻故事</a></li> 581 </ul> 582 </div> 583 584 <!--主区域--> 585 <div class="main"> 586 <div class="section-title"> 587 <h2 class="title">正在热映</h2> 588 <span class="link"> 589 <a href="">更多</a> 590 </span> 591 </div> 592 593 <div> 594 <ul class="item-list"> 595 <li> 596 <!--图片--> 597 <div class="img"> 598 <a href=""> 599 <img src="img/movie1.webp" alt=""> 600 </a> 601 </div> 602 <!--文字--> 603 <div class="words"> 604 <a href="">叶问4：完结篇 葉問4 (2019)</a> 605 </div> 606 <!--评分--> 607 <div class="star"> 608 <span class="star-bg star35"></span> 609 <span class="number">7.1</span> 610 </div> 611 <!--选座--> 612 <div class="func"> 613 <a href="" class="block-link">选座购票</a> 614 </div> 615 </li> 616 617 <li> 618 <div class="img"> 619 <a href=""> 620 <img src="img/movie2.webp" alt=""> 621 </a> 622 </div> 623 624 <div class="words"> 625 <a href="">我在时间尽头等你 (2020)</a> 626 </div> 627 628 <div class="star"> 629 <span class="star-bg star30"></span> 630 <span class="number">6.9</span> 631 </div> 632 633 <div class="func"> 634 <a href="" class="block-link">选座购票</a> 635 </div> 636 </li> 637 638 <li> 639 <div class="img"> 640 <a href=""> 641 <img src="img/movie3.webp" alt=""> 642 </a> 643 </div> 644 645 <div class="words"> 646 <a href="">对联神童解大绅 (2020)</a> 647 </div> 648 649 <div class="star"> 650 <span class="star-bg star40"></span> 651 <span class="number">7.6</span> 652 </div> 653 654 <div class="func"> 655 <a href="" class="block-link">选座购票</a> 656 </div> 657 </li> 658 659 <li> 660 <!--图片--> 661 <div class="img"> 662 <a href=""> 663 <img src="img/movie1.webp" alt=""> 664 </a> 665 </div> 666 <!--文字--> 667 <div class="words"> 668 <a href="">叶问4：完结篇 葉問4 (2019)</a> 669 </div> 670 <!--评分--> 671 <div class="star"> 672 <span class="star-bg star35"></span> 673 <span class="number">7.1</span> 674 </div> 675 <!--选座--> 676 <div class="func"> 677 <a href="" class="block-link">选座购票</a> 678 </div> 679 </li> 680 681 <li> 682 <div class="img"> 683 <a href=""> 684 <img src="img/movie2.webp" alt=""> 685 </a> 686 </div> 687 688 <div class="words"> 689 <a href="">我在时间尽头等你 (2020)</a> 690 </div> 691 692 <div class="star"> 693 <span class="star-bg star30"></span> 694 <span class="number">6.9</span> 695 </div> 696 697 <div class="func"> 698 <a href="" class="block-link">选座购票</a> 699 </div> 700 </li> 701 702 <li> 703 <div class="img"> 704 <a href=""> 705 <img src="img/movie3.webp" alt=""> 706 </a> 707 </div> 708 709 <div class="words"> 710 <a href="">对联神童解大绅 (2020)</a> 711 </div> 712 713 <div class="star"> 714 <span class="star-bg star40"></span> 715 <span class="number">7.6</span> 716 </div> 717 718 <div class="func"> 719 <a href="" class="block-link">选座购票</a> 720 </div> 721 </li> 722 723 <li> 724 <!--图片--> 725 <div class="img"> 726 <a href=""> 727 <img src="img/movie1.webp" alt=""> 728 </a> 729 </div> 730 <!--文字--> 731 <div class="words"> 732 <a href="">叶问4：完结篇 葉問4 (2019)</a> 733 </div> 734 <!--评分--> 735 <div class="star"> 736 <span class="star-bg star35"></span> 737 <span class="number">7.1</span> 738 </div> 739 <!--选座--> 740 <div class="func"> 741 <a href="" class="block-link">选座购票</a> 742 </div> 743 </li> 744 745 <li> 746 <div class="img"> 747 <a href=""> 748 <img src="img/movie2.webp" alt=""> 749 </a> 750 </div> 751 752 <div class="words"> 753 <a href="">我在时间尽头等你 (2020)</a> 754 </div> 755 756 <div class="star"> 757 <span class="star-bg star30"></span> 758 <span class="number">6.9</span> 759 </div> 760 761 <div class="func"> 762 <a href="" class="block-link">选座购票</a> 763 </div> 764 </li> 765 </ul> 766 </div> 767 </div> 768 </div> 769 </div> 770 771 <!--小组--> 772 <div class="section"> 773 <div class="container group-area clearfix"> 774 <!--左边栏--> 775 <div class="aside-left"> 776 <!--标题--> 777 <div class="title"> 778 <h2> 779 <a href="">小组</a> 780 </h2> 781 </div> 782 <!--左边菜单--> 783 <nav class="left-menu"> 784 <ul> 785 <li><a href="">精选</a></li> 786 <li><a href="">文化</a></li> 787 <li><a href="">行摄</a></li> 788 <li><a href="">娱乐</a></li> 789 <li><a href="">时尚</a></li> 790 <li><a href="">生活</a></li> 791 <li><a href="">科技</a></li> 792 </ul> 793 </nav> 794 </div> 795 796 <!--右边栏--> 797 <div class="aside-right"> 798 <!--标题--> 799 <div class="section-title"> 800 <h2 class="title">小组分类</h2> 801 </div> 802 803 <!--兴趣--> 804 <div class="group"> 805 <div class="group-name"> 806 <a href="">兴趣</a> 807 </div> 808 <!--兴趣内容--> 809 <ul class="right-menu-list clearfix"> 810 <li><a href="">旅行</a></li> 811 <li><a href="">摄影</a></li> 812 <li><a href="">影视</a></li> 813 <li><a href="">音乐</a></li> 814 <li><a href="">文学</a></li> 815 <li><a href="">游戏</a></li> 816 <li><a href="">动漫</a></li> 817 <li><a href="">运动</a></li> 818 <li><a href="">戏曲</a></li> 819 <li><a href="">桌游</a></li> 820 <li><a href="">怪癖</a></li> 821 </ul> 822 </div> 823 <!--生活--> 824 <div class="group"> 825 <div class="group-name"> 826 <a href="">生活</a> 827 </div> 828 <!--生活内容--> 829 <ul class="right-menu-list clearfix"> 830 <li><a href="">健康</a></li> 831 <li><a href="">美食</a></li> 832 <li><a href="">宠物</a></li> 833 <li><a href="">美容</a></li> 834 <li><a href="">化妆</a></li> 835 <li><a href="">护肤</a></li> 836 <li><a href="">服饰</a></li> 837 <li><a href="">公益</a></li> 838 <li><a href="">家庭</a></li> 839 <li><a href="">育儿</a></li> 840 <li><a href="">汽车</a></li> 841 </ul> 842 </div> 843 <!--购物--> 844 <div class="group"> 845 <div class="group-name"> 846 <a href="">购物</a> 847 </div> 848 <!--购物内容--> 849 <ul class="right-menu-list clearfix"> 850 <li><a href="">淘宝</a></li> 851 <li><a href="">二手</a></li> 852 <li><a href="">团购</a></li> 853 <li><a href="">数码</a></li> 854 <li><a href="">品牌</a></li> 855 <li><a href="">文具</a></li> 856 </ul> 857 </div> 858 <!--社会--> 859 <div class="group"> 860 <div class="group-name"> 861 <a href="">社会</a> 862 </div> 863 <!--社会内容--> 864 <ul class="right-menu-list clearfix"> 865 <li><a href="">求职</a></li> 866 <li><a href="">租房</a></li> 867 <li><a href="">励志</a></li> 868 <li><a href="">留学</a></li> 869 <li><a href="">出国</a></li> 870 <li><a href="">理财</a></li> 871 <li><a href="">传媒</a></li> 872 <li><a href="">创业</a></li> 873 <li><a href="">考试</a></li> 874 </ul> 875 </div> 876 <!--艺术--> 877 <div class="group"> 878 <div class="group-name"> 879 <a href="">艺术</a> 880 </div> 881 <!--艺术内容--> 882 <ul class="right-menu-list clearfix"> 883 <li><a href="">设计</a></li> 884 <li><a href="">手工</a></li> 885 <li><a href="">展览</a></li> 886 <li><a href="">曲艺</a></li> 887 <li><a href="">舞蹈</a></li> 888 <li><a href="">雕塑</a></li> 889 <li><a href="">纹身</a></li> 890 </ul> 891 </div> 892 <!--学术--> 893 <div class="group"> 894 <div class="group-name"> 895 <a href="">学术</a> 896 </div> 897 <!--学术内容--> 898 <ul class="right-menu-list clearfix"> 899 <li><a href="">人文</a></li> 900 <li><a href="">社科</a></li> 901 <li><a href="">自然</a></li> 902 <li><a href="">建筑</a></li> 903 <li><a href="">国学</a></li> 904 <li><a href="">语言</a></li> 905 <li><a href="">宗教</a></li> 906 <li><a href="">哲学</a></li> 907 <li><a href="">软件</a></li> 908 <li><a href="">硬件</a></li> 909 <li><a href="">互联网</a></li> 910 </ul> 911 </div> 912 <!--情感--> 913 <div class="group"> 914 <div class="group-name"> 915 <a href="">情感</a> 916 </div> 917 <!--情感内容--> 918 <ul class="right-menu-list clearfix"> 919 <li><a href="">恋爱</a></li> 920 <li><a href="">心情</a></li> 921 <li><a href="">心理学</a></li> 922 <li><a href="">星座</a></li> 923 <li><a href="">塔罗</a></li> 924 <li><a href="">LES</a></li> 925 <li><a href="">GAY</a></li> 926 </ul> 927 </div> 928 <!--闲聊--> 929 <div class="group"> 930 <div class="group-name"> 931 <a href="">闲聊</a> 932 </div> 933 <!--闲聊内容--> 934 <ul class="right-menu-list clearfix"> 935 <li><a href="">吐槽</a></li> 936 <li><a href="">笑话</a></li> 937 <li><a href="">直播</a></li> 938 <li><a href="">八卦</a></li> 939 <li><a href="">发泄</a></li> 940 </ul> 941 </div> 942 </div> 943 944 <!--主区域--> 945 <div class="main"> 946 <!--标题--> 947 <div class="section-title"> 948 <h2 class="title">热门小组</h2> 949 <span class="link"> 950 <a href="">更多</a> 951 </span> 952 </div> 953 <!--主要的内容--> 954 <ul class="item-list " > 955 <li> 956 <div class="img"> 957 <a href=""> 958 <img src="img/xiaozu1.webp" alt=""> 959 </a> 960 </div> 961 962 <div class="words"> 963 <a href="">我爱三毛</a> 964 <span>47832 个成员</span> 965 </div> 966 </li> 967 968 <li> 969 <div class="img"> 970 <a href=""> 971 <img src="img/xiaozu2.webp" alt=""> 972 </a> 973 </div> 974 975 <div class="words"> 976 <a href="">沙发客</a> 977 <span>23622 个成员</span> 978 </div> 979 </li> 980 981 <li> 982 <div class="img"> 983 <a href=""> 984 <img src="img/xiaozu3.webp" alt=""> 985 </a> 986 </div> 987 988 <div class="words"> 989 <a href="">刘慈欣</a> 990 <span>30227 个成员</span> 991 </div> 992 </li> 993 994 <li> 995 <div class="img"> 996 <a href=""> 997 <img src="img/xiaozu4.webp" alt=""> 998 </a> 999 </div> 1000 1001 <div class="words"> 1002 <a href="">西双版纳</a> 1003 <span>11540 个成员</span> 1004 </div> 1005 </li> 1006 1007 <li> 1008 <div class="img"> 1009 <a href=""> 1010 <img src="img/xiaozu5.webp" alt=""> 1011 </a> 1012 </div> 1013 1014 <div class="words"> 1015 <a href="">记事本圆梦小组</a> 1016 <span>116854 个成员</span> 1017 </div> 1018 </li> 1019 1020 <li> 1021 <div class="img"> 1022 <a href=""> 1023 <img src="img/xiaozu6.jpg" alt=""> 1024 </a> 1025 </div> 1026 1027 <div class="words"> 1028 <a href="">搭讪学</a> 1029 <span>94182 个成员</span> 1030 </div> 1031 </li> 1032 1033 <li> 1034 <div class="img"> 1035 <a href=""> 1036 <img src="img/xiaozu7.webp" alt=""> 1037 </a> 1038 </div> 1039 1040 <div class="words"> 1041 <a href="">这辈子一定要做几件疯狂的事</a> 1042 <span>92934 个成员</span> 1043 </div> 1044 </li> 1045 1046 <li> 1047 <div class="img"> 1048 <a href=""> 1049 <img src="img/xiaozu8.jpg" alt=""> 1050 </a> 1051 </div> 1052 1053 <div class="words"> 1054 <a href="">自己给自己剪头发</a> 1055 <span>35173 个成员</span> 1056 </div> 1057 </li> 1058 1059 <li> 1060 <div class="img"> 1061 <a href=""> 1062 <img src="img/xiaozu9.jpg" alt=""> 1063 </a> 1064 </div> 1065 1066 <div class="words"> 1067 <a href="">我们就是要做衣服给自己穿</a> 1068 <span>3727 个成员</span> 1069 </div> 1070 </li> 1071 </ul> 1072 </div> 1073 </div> 1074 </div> 1075 1076 <!--读书--> 1077 <div class="section"> 1078 <div class="container clearfix book-area"> 1079 <!--左边栏--> 1080 <div class="aside-left"> 1081 <!--标题--> 1082 <div class="title"> 1083 <h2> 1084 <a href="">读书</a> 1085 </h2> 1086 </div> 1087 <!--左边菜单--> 1088 <nav class="left-menu"> 1089 <ul> 1090 <li><a href="" >分类浏览</a></li> 1091 <li><a href="" class="new dark-color">阅读</a></li> 1092 <li><a href="" >作者</a></li> 1093 <li><a href="" >书评</a></li> 1094 <li><a href="" >购书单</a></li> 1095 </ul> 1096 </nav> 1097 1098 <div class="menu-adv"> 1099 <a href=""> 1100 <span class="app-icon-1"></span> 1101 </a> 1102 <a href="">豆瓣阅读</a> 1103 </div> 1104 </div> 1105 1106 <!--右边栏--> 1107 <div class="aside-right" > 1108 <!--标题--> 1109 <div class="section-title"> 1110 <h2 class="title">热门标签</h2> 1111 <span class="link"> 1112 <a href="">更多</a> 1113 </span> 1114 </div> 1115 1116 <!--文学--> 1117 <div class="group"> 1118 <ul class="right-menu-list clearfix"> 1119 <li><span>[文学]</span></li> 1120 <li><a href="">小说</a></li> 1121 <li><a href="">随笔</a></li> 1122 <li><a href="">日本文学</a></li> 1123 <li><a href="">散文</a></li> 1124 <li><a href="">诗歌</a></li> 1125 <li><a href="">童话</a></li> 1126 <li><a href="">名著</a></li> 1127 <li><a href="">港台</a></li> 1128 <li><a href="">更多</a></li> 1129 </ul> 1130 </div> 1131 1132 <!--流行--> 1133 <div class="group"> 1134 <ul class="right-menu-list clearfix"> 1135 <li><span>[流行]</span></li> 1136 <li><a href="">漫画</a></li> 1137 <li><a href="">推理</a></li> 1138 <li><a href="">绘本</a></li> 1139 <li><a href="">青春</a></li> 1140 <li><a href="">科幻</a></li> 1141 <li><a href="">言情</a></li> 1142 <li><a href="">奇幻</a></li> 1143 <li><a href="">武侠</a></li> 1144 <li><a href="">更多</a></li> 1145 </ul> 1146 </div> 1147 1148 <!--文化--> 1149 <div class="group"> 1150 <ul class="right-menu-list clearfix"> 1151 <li><span>[文化]</span></li> 1152 <li><a href="">历史</a></li> 1153 <li><a href="">哲学</a></li> 1154 <li><a href="">传记</a></li> 1155 <li><a href="">设计</a></li> 1156 <li><a href="">建筑</a></li> 1157 <li><a href="">电影</a></li> 1158 <li><a href="">回忆录</a></li> 1159 <li><a href="">音乐</a></li> 1160 <li><a href="">更多</a></li> 1161 </ul> 1162 </div> 1163 1164 <!--生活--> 1165 <div class="group"> 1166 <ul class="right-menu-list clearfix"> 1167 <li><span>[生活]</span></li> 1168 <li><a href="">旅行</a></li> 1169 <li><a href="">励志</a></li> 1170 <li><a href="">教育</a></li> 1171 <li><a href="">职场</a></li> 1172 <li><a href="">美食</a></li> 1173 <li><a href="">灵修</a></li> 1174 <li><a href="">健康</a></li> 1175 <li><a href="">家居</a></li> 1176 <li><a href="">更多</a></li> 1177 </ul> 1178 </div> 1179 1180 <!--经管--> 1181 <div class="group"> 1182 <ul class="right-menu-list clearfix"> 1183 <li><span>[经管]</span></li> 1184 <li><a href="">经济学</a></li> 1185 <li><a href="">管理</a></li> 1186 <li><a href="">商业</a></li> 1187 <li><a href="">金融</a></li> 1188 <li><a href="">营销</a></li> 1189 <li><a href="">理财</a></li> 1190 <li><a href="">股票</a></li> 1191 <li><a href="">企业史</a></li> 1192 <li><a href="">更多</a></li> 1193 </ul> 1194 </div> 1195 1196 <!--科技--> 1197 <div class="group"> 1198 <ul class="right-menu-list clearfix"> 1199 <li><span>[科技]</span></li> 1200 <li><a href="">科普</a></li> 1201 <li><a href="">互联网</a></li> 1202 <li><a href="">编程</a></li> 1203 <li><a href="">交互设计</a></li> 1204 <li><a href="">算法</a></li> 1205 <li><a href="">通信</a></li> 1206 <li><a href="">神经网络</a></li> 1207 <li><a href="">更多</a></li> 1208 </ul> 1209 </div> 1210 </div> 1211 1212 <!--主区域--> 1213 <div class="main"> 1214 <!--标题--> 1215 <div class="section-title"> 1216 <h2 class="title">新书速递</h2> 1217 <span class="link"> 1218 <a href="">更多</a> 1219 </span> 1220 </div> 1221 1222 <!--内容区--> 1223 <ul class="item-list"> 1224 <li> 1225 <div class="img"> 1226 <a href=""> 1227 <img src="img/read1.jpg" alt=""> 1228 </a> 1229 </div> 1230 1231 <div class="words"> 1232 <a href=""> 1233 仁慈的关系 1234 </a> 1235 <span> 1236 [匈牙利]拉斯洛 1237 </span> 1238 </div> 1239 1240 <div class="func"> 1241 <a href="" class="block-link"> 1242 免费试读 1243 </a> 1244 </div> 1245 </li> 1246 1247 <li> 1248 <div class="img"> 1249 <a href=""> 1250 <img src="img/read1.jpg" alt=""> 1251 </a> 1252 </div> 1253 1254 <div class="words"> 1255 <a href=""> 1256 仁慈的关系 1257 </a> 1258 <span> 1259 [匈牙利]拉斯洛 1260 </span> 1261 </div> 1262 1263 <div class="func"> 1264 <a href="" class="block-link"> 1265 免费试读 1266 </a> 1267 </div> 1268 </li> 1269 1270 <li> 1271 <div class="img"> 1272 <a href=""> 1273 <img src="img/read1.jpg" alt=""> 1274 </a> 1275 </div> 1276 1277 <div class="words"> 1278 <a href=""> 1279 仁慈的关系 1280 </a> 1281 <span> 1282 [匈牙利]拉斯洛 1283 </span> 1284 </div> 1285 1286 <div class="func"> 1287 <a href="" class="block-link"> 1288 免费试读 1289 </a> 1290 </div> 1291 </li> 1292 1293 <li> 1294 <div class="img"> 1295 <a href=""> 1296 <img src="img/read1.jpg" alt=""> 1297 </a> 1298 </div> 1299 1300 <div class="words"> 1301 <a href=""> 1302 仁慈的关系 1303 </a> 1304 <span> 1305 [匈牙利]拉斯洛 1306 </span> 1307 </div> 1308 1309 <div class="func"> 1310 <a href="" class="block-link"> 1311 免费试读 1312 </a> 1313 </div> 1314 </li> 1315 </ul> 1316 1317 <!--标题--> 1318 <div class="section-title"> 1319 <h2 class="title">原创数字作品</h2> 1320 <span class="link"> 1321 <a href="">更多</a> 1322 </span> 1323 </div> 1324 1325 <ul class="item-list"> 1326 <li> 1327 <div class="img"> 1328 <a href=""> 1329 <img src="img/read1.jpg" alt=""> 1330 </a> 1331 </div> 1332 1333 <div class="words"> 1334 <a href=""> 1335 仁慈的关系 1336 </a> 1337 <span> 1338 [匈牙利]拉斯洛 1339 </span> 1340 </div> 1341 1342 <div class="func"> 1343 <a href="" class="block-link"> 1344 免费试读 1345 </a> 1346 </div> 1347 </li> 1348 1349 <li> 1350 <div class="img"> 1351 <a href=""> 1352 <img src="img/read1.jpg" alt=""> 1353 </a> 1354 </div> 1355 1356 <div class="words"> 1357 <a href=""> 1358 仁慈的关系 1359 </a> 1360 <span> 1361 [匈牙利]拉斯洛 1362 </span> 1363 </div> 1364 1365 <div class="func"> 1366 <a href="" class="block-link"> 1367 免费试读 1368 </a> 1369 </div> 1370 </li> 1371 1372 <li> 1373 <div class="img"> 1374 <a href=""> 1375 <img src="img/read1.jpg" alt=""> 1376 </a> 1377 </div> 1378 1379 <div class="words"> 1380 <a href=""> 1381 仁慈的关系 1382 </a> 1383 <span> 1384 [匈牙利]拉斯洛 1385 </span> 1386 </div> 1387 1388 <div class="func"> 1389 <a href="" class="block-link"> 1390 免费试读 1391 </a> 1392 </div> 1393 </li> 1394 1395 <li> 1396 <div class="img"> 1397 <a href=""> 1398 <img src="img/read1.jpg" alt=""> 1399 </a> 1400 </div> 1401 1402 <div class="words"> 1403 <a href=""> 1404 仁慈的关系 1405 </a> 1406 <span> 1407 [匈牙利]拉斯洛 1408 </span> 1409 </div> 1410 1411 <div class="func"> 1412 <a href="" class="block-link"> 1413 免费试读 1414 </a> 1415 </div> 1416 </li> 1417 </ul> 1418 </div> 1419 </div> 1420 </div> 1421 1422 <!--音乐--> 1423 <div class="section"> 1424 <div class="container clearfix music-area"> 1425 <!--左边栏--> 1426 <div class="aside-left"> 1427 <div class="aside-left"> 1428 <!--标题--> 1429 <div class="title"> 1430 <h2> 1431 <a href="">音乐</a> 1432 </h2> 1433 </div> 1434 <!--左边菜单--> 1435 <nav class="left-menu"> 1436 <ul> 1437 <li><a href="" >音乐人</a></li> 1438 <li><a href="" >潮潮豆瓣音乐周</a></li> 1439 <li><a href="" >金羊毛计划</a></li> 1440 <li><a href="" >专题</a></li> 1441 <li><a href="" >排行榜</a></li> 1442 <li><a href="" >分类浏览</a></li> 1443 <li><a href="" >乐评</a></li> 1444 <li><a href="" >豆瓣FM</a></li> 1445 <li><a href="" >歌单</a></li> 1446 <li><a href="" >阿比鹿音乐榜</a></li> 1447 </ul> 1448 </nav> 1449 1450 <div class="menu-adv"> 1451 <a href=""> 1452 <span class="app-icon-2"></span> 1453 </a> 1454 <a href="">豆瓣FM</a> 1455 </div> 1456 1457 <div class="menu-adv"> 1458 <a href=""> 1459 <span class="app-icon-3"></span> 1460 </a> 1461 <a href="">豆瓣音乐人</a> 1462 </div> 1463 </div> 1464 </div> 1465 1466 <!--右边栏--> 1467 <div class="aside-right"> 1468 <!--标题--> 1469 <div class="section-title"> 1470 <h2 class="title">本周流行音乐人</h2> 1471 <span class="link"> 1472 <a href="">更多</a> 1473 </span> 1474 </div> 1475 1476 <ul class="music-player-list"> 1477 <li class="clearfix"> 1478 <span class="number left">1.</span> 1479 <div class="player right"> 1480 <a href=""> 1481 <div class="img left iconbofang iconfont"> 1482 <img src="img/player1.jpg" alt=""> 1483 </div> 1484 </a> 1485 <div class="words left"> 1486 <a href="">大猴仔</a> 1487 <span>流派: 流行 Pop</span> 1488 <span>76人关注</span> 1489 </div> 1490 </div> 1491 </li> 1492 1493 <li class="clearfix"> 1494 <span class="number left">2.</span> 1495 <div class="player right"> 1496 <a href=""> 1497 <div class="img left iconbofang iconfont"> 1498 <img src="img/player2.jpg" alt=""> 1499 </div> 1500 </a> 1501 <div class="words left"> 1502 <a href="">跳格子</a> 1503 <span>流派: 民谣 Folk</span> 1504 <span>1810人关注</span> 1505 </div> 1506 </div> 1507 </li> 1508 1509 <li class="clearfix"> 1510 <span class="number left">3.</span> 1511 <div class="player right"> 1512 <a href=""> 1513 <div class="img left iconbofang iconfont"> 1514 <img src="img/player3.jpg" alt=""> 1515 </div> 1516 </a> 1517 <div class="words left"> 1518 <a href="">施文</a> 1519 <span>流派: 流行 Pop</span> 1520 <span>103人关注</span> 1521 </div> 1522 </div> 1523 </li> 1524 1525 <li class="clearfix"> 1526 <span class="number left">4.</span> 1527 <div class="player right"> 1528 <a href=""> 1529 <div class="img left iconbofang iconfont"> 1530 <img src="img/player4.jpg" alt=""> 1531 </div> 1532 </a> 1533 <div class="words left"> 1534 <a href="">三七</a> 1535 <span>流派: 民谣 Folk</span> 1536 <span>199人关注</span> 1537 </div> 1538 </div> 1539 </li> 1540 1541 <li class="clearfix"> 1542 <span class="number left">5.</span> 1543 <div class="player right"> 1544 <a href=""> 1545 <div class="img left iconbofang iconfont"> 1546 <img src="img/player5.jpg" alt=""> 1547 </div> 1548 </a> 1549 <div class="words left"> 1550 <a href="">S.A.D.</a> 1551 <span>流派: 电子 Electronica</span> 1552 <span>413人关注</span> 1553 </div> 1554 </div> 1555 </li> 1556 </ul> 1557 </div> 1558 1559 <!--主区域--> 1560 <div class="main"> 1561 <div class="section-title"> 1562 <h2 class="title">豆瓣新碟榜</h2> 1563 <span class="link"> 1564 <a href="">更多</a> 1565 </span> 1566 </div> 1567 1568 <ul class="item-list"> 1569 <li> 1570 <div class="img"> 1571 <a href=""> 1572 <img src="img/music1.jpg " alt=""> 1573 </a> 1574 </div> 1575 1576 <div class="words"> 1577 1.<a href=""> The Slow Rush</a> 1578 </div> 1579 1580 <div class="words"> 1581 <a href="">Tame Impala</a> 1582 </div> 1583 1584 <!--评分--> 1585 <div class="star"> 1586 <span class="star-bg star35"></span> 1587 <span class="number">7.1</span> 1588 </div> 1589 </li> 1590 <li> 1591 <div class="img"> 1592 <a href=""> 1593 <img src="img/music1.jpg " alt=""> 1594 </a> 1595 </div> 1596 1597 <div class="words"> 1598 1.<a href=""> The Slow Rush</a> 1599 </div> 1600 1601 <div class="words"> 1602 <a href="">Tame Impala</a> 1603 </div> 1604 1605 <!--评分--> 1606 <div class="star"> 1607 <span class="star-bg star35"></span> 1608 <span class="number">7.1</span> 1609 </div> 1610 </li> 1611 <li> 1612 <div class="img"> 1613 <a href=""> 1614 <img src="img/music1.jpg " alt=""> 1615 </a> 1616 </div> 1617 1618 <div class="words"> 1619 1.<a href=""> The Slow Rush</a> 1620 </div> 1621 1622 <div class="words"> 1623 <a href="">Tame Impala</a> 1624 </div> 1625 1626 <!--评分--> 1627 <div class="star"> 1628 <span class="star-bg star35"></span> 1629 <span class="number">7.1</span> 1630 </div> 1631 </li> 1632 <li> 1633 <div class="img"> 1634 <a href=""> 1635 <img src="img/music1.jpg " alt=""> 1636 </a> 1637 </div> 1638 1639 <div class="words"> 1640 1.<a href=""> The Slow Rush</a> 1641 </div> 1642 1643 <div class="words"> 1644 <a href="">Tame Impala</a> 1645 </div> 1646 1647 <!--评分--> 1648 <div class="star"> 1649 <span class="star-bg star35"></span> 1650 <span class="number">7.1</span> 1651 </div> 1652 </li> 1653 <li> 1654 <div class="img"> 1655 <a href=""> 1656 <img src="img/music1.jpg " alt=""> 1657 </a> 1658 </div> 1659 1660 <div class="words"> 1661 1.<a href=""> The Slow Rush</a> 1662 </div> 1663 1664 <div class="words"> 1665 <a href="">Tame Impala</a> 1666 </div> 1667 1668 <!--评分--> 1669 <div class="star"> 1670 <span class="star-bg star35"></span> 1671 <span class="number">7.1</span> 1672 </div> 1673 </li> 1674 <li> 1675 <div class="img"> 1676 <a href=""> 1677 <img src="img/music1.jpg " alt=""> 1678 </a> 1679 </div> 1680 1681 <div class="words"> 1682 1.<a href=""> The Slow Rush</a> 1683 </div> 1684 1685 <div class="words"> 1686 <a href="">Tame Impala</a> 1687 </div> 1688 1689 <!--评分--> 1690 <div class="star"> 1691 <span class="star-bg star35"></span> 1692 <span class="number">7.1</span> 1693 </div> 1694 </li> 1695 <li> 1696 <div class="img"> 1697 <a href=""> 1698 <img src="img/music1.jpg " alt=""> 1699 </a> 1700 </div> 1701 1702 <div class="words"> 1703 1.<a href=""> The Slow Rush</a> 1704 </div> 1705 1706 <div class="words"> 1707 <a href="">Tame Impala</a> 1708 </div> 1709 1710 <!--评分--> 1711 <div class="star"> 1712 <span class="star-bg star35"></span> 1713 <span class="number">7.1</span> 1714 </div> 1715 </li> 1716 <li> 1717 <div class="img"> 1718 <a href=""> 1719 <img src="img/music1.jpg " alt=""> 1720 </a> 1721 </div> 1722 1723 <div class="words"> 1724 1.<a href=""> The Slow Rush</a> 1725 </div> 1726 1727 <div class="words"> 1728 <a href="">Tame Impala</a> 1729 </div> 1730 1731 <!--评分--> 1732 <div class="star"> 1733 <span class="star-bg star35"></span> 1734 <span class="number">7.1</span> 1735 </div> 1736 </li> 1737 </ul> 1738 1739 <div class="section-title"> 1740 <h2 class="title">热门歌单</h2> 1741 <span class="link"> 1742 <a href="">更多</a> 1743 </span> 1744 </div> 1745 1746 <ul class="item-list hot-music"> 1747 <li> 1748 <a href=""> 1749 <div class="img iconfont iconbofang"> 1750 <img src="img/music2.jpg " alt=""> 1751 </div> 1752 </a> 1753 1754 <div class="words"> 1755 狗蛋成长屎 1756 </div> 1757 </li> 1758 <li> 1759 <a href=""> 1760 <div class="img iconfont iconbofang"> 1761 <img src="img/music2.jpg " alt=""> 1762 </div> 1763 </a> 1764 1765 <div class="words"> 1766 狗蛋成长屎 1767 </div> 1768 </li> 1769 <li> 1770 <a href=""> 1771 <div class="img iconfont iconbofang"> 1772 <img src="img/music2.jpg " alt=""> 1773 </div> 1774 </a> 1775 1776 <div class="words"> 1777 狗蛋成长屎 1778 </div> 1779 </li> 1780 <li> 1781 <a href=""> 1782 <div class="img iconfont iconbofang"> 1783 <img src="img/music2.jpg " alt=""> 1784 </div> 1785 </a> 1786 1787 <div class="words"> 1788 狗蛋成长屎 1789 </div> 1790 </li> 1791 <li> 1792 <a href=""> 1793 <div class="img iconfont iconbofang"> 1794 <img src="img/music2.jpg " alt=""> 1795 </div> 1796 </a> 1797 1798 <div class="words"> 1799 狗蛋成长屎 1800 </div> 1801 </li> 1802 <li> 1803 <a href=""> 1804 <div class="img iconfont iconbofang"> 1805 <img src="img/music2.jpg " alt=""> 1806 </div> 1807 </a> 1808 1809 <div class="words"> 1810 狗蛋成长屎 1811 </div> 1812 </li> 1813 <li> 1814 <a href=""> 1815 <div class="img iconfont iconbofang"> 1816 <img src="img/music2.jpg " alt=""> 1817 </div> 1818 </a> 1819 1820 <div class="words"> 1821 狗蛋成长屎 1822 </div> 1823 </li> 1824 <li> 1825 <a href=""> 1826 <div class="img iconfont iconbofang"> 1827 <img src="img/music2.jpg " alt=""> 1828 </div> 1829 </a> 1830 1831 <div class="words"> 1832 狗蛋成长屎 1833 </div> 1834 </li> 1835 </ul> 1836 </div> 1837 </div> 1838 </div> 1839 1840 <!--豆品--> 1841 <div class="section"> 1842 <div class="container clearfix doupin-area"> 1843 <!--左边栏--> 1844 <div class="aside-left"> 1845 <!--标题--> 1846 <div class="title"> 1847 <h2> 1848 <a href="">豆品</a> 1849 </h2> 1850 </div> 1851 </div> 1852 1853 <!--右边栏--> 1854 <div class="aside-right"> 1855 <!--标题--> 1856 <div class="section-title"> 1857 <h2 class="title">热卖活动</h2> 1858 </div> 1859 1860 <!--广告--> 1861 <div class="adv"> 1862 <a href=""> 1863 <img src="img/adv2.jpg" alt="广告图片"> 1864 </a> 1865 </div> 1866 1867 <div> 1868 <a href="">我的豆瓣收藏夹里有什么</a> 1869 </div> 1870 1871 <!--标题--> 1872 <div class="section-title"> 1873 <h2 class="title">官方小组</h2> 1874 <span class="link"> 1875 <a href="">更多</a> 1876 </span> 1877 </div> 1878 </div> 1879 1880 <!--主区域--> 1881 <div class="main"> 1882 <div class="section-title"> 1883 <h2 class="title">热卖商品</h2> 1884 <span class="link"> 1885 <a href="">更多</a> 1886 </span> 1887 </div> 1888 1889 <ul class="item-list"> 1890 <li> 1891 <div class="img"> 1892 <a href=""> 1893 <img src="img/doupin1.jpg " alt=""> 1894 </a> 1895 </div> 1896 1897 <div class="words clearfix"> 1898 <a href="" class="left">豆瓣冻顶乌龙茶</a> 1899 <span class="right">￥59</span> 1900 </div> 1901 </li> 1902 <li> 1903 <div class="img"> 1904 <a href=""> 1905 <img src="img/doupin2.jpg " alt=""> 1906 </a> 1907 </div> 1908 1909 <div class="words clearfix"> 1910 <a href="" class="left">豆瓣软面笔记本</a> 1911 <span class="right">￥39</span> 1912 </div> 1913 </li> 1914 <li> 1915 <div class="img"> 1916 <a href=""> 1917 <img src="img/doupin3.jpg " alt=""> 1918 </a> 1919 </div> 1920 1921 <div class="words clearfix"> 1922 <a href="" class="left">豆瓣收藏夹</a> 1923 <span class="right">￥99</span> 1924 </div> 1925 </li> 1926 <li> 1927 <div class="img"> 1928 <a href=""> 1929 <img src="img/doupin3.jpg " alt=""> 1930 </a> 1931 </div> 1932 1933 <div class="words clearfix"> 1934 <a href="" class="left">豆瓣经典帆布包</a> 1935 <span class="right">￥149</span> 1936 </div> 1937 </li> 1938 </ul> 1939 </div> 1940 </div> 1941 </div> 1942 1943 <!--同城--> 1944 <div class="section"> 1945 <div class="container clearfix city-area"> 1946 <!--左边栏--> 1947 <div class="aside-left"> 1948 <!--标题--> 1949 <div class="title"> 1950 <h2> 1951 <a href="">同城</a> 1952 </h2> 1953 </div> 1954 1955 <!--左边菜单--> 1956 <nav class="left-menu"> 1957 <ul> 1958 <li><a href="" >近期活动</a></li> 1959 <li><a href="" >主办方</a></li> 1960 <li><a href="" >舞台剧</a></li> 1961 </ul> 1962 </nav> 1963 </div> 1964 1965 <!--右边栏--> 1966 <div class="aside-right"> 1967 <!--标题--> 1968 <div class="section-title"> 1969 <h2 class="title">活动标签</h2> 1970 </div> 1971 1972 <!--音乐--> 1973 <div class="group"> 1974 <div class="group-name"> 1975 <a href="">音乐</a> 1976 </div> 1977 <!--音乐内容--> 1978 <ul class="right-menu-list clearfix"> 1979 <li><a href="">小型现场</a></li> 1980 <li><a href="">音乐会</a></li> 1981 <li><a href="">演唱会</a></li> 1982 <li><a href="">音乐节</a></li> 1983 </ul> 1984 </div> 1985 <!--戏剧--> 1986 <div class="group"> 1987 <div class="group-name"> 1988 <a href="">戏剧</a> 1989 </div> 1990 <!--戏剧内容--> 1991 <ul class="right-menu-list clearfix"> 1992 <li><a href="">话剧</a></li> 1993 <li><a href="">音乐剧</a></li> 1994 <li><a href="">舞剧</a></li> 1995 <li><a href="">歌剧</a></li> 1996 <li><a href="">戏曲</a></li> 1997 <li><a href="">其他</a></li> 1998 </ul> 1999 </div> 2000 <!--聚会--> 2001 <div class="group"> 2002 <div class="group-name"> 2003 <a href="">聚会</a> 2004 </div> 2005 <!--聚会内容--> 2006 <ul class="right-menu-list clearfix"> 2007 <li><a href="">生活</a></li> 2008 <li><a href="">集市</a></li> 2009 <li><a href="">摄影</a></li> 2010 <li><a href="">外语</a></li> 2011 <li><a href="">桌游</a></li> 2012 <li><a href="">夜店</a></li> 2013 <li><a href="">交友</a></li> 2014 <li><a href="">美食</a></li> 2015 <li><a href="">派对</a></li> 2016 </ul> 2017 </div> 2018 <!--电影--> 2019 <div class="group"> 2020 <div class="group-name"> 2021 <a href="">电影</a> 2022 </div> 2023 <!--电影内容--> 2024 <ul class="right-menu-list clearfix"> 2025 <li><a href="">主题放映</a></li> 2026 <li><a href="">影展</a></li> 2027 <li><a href="">影院活动</a></li> 2028 </ul> 2029 </div> 2030 <!--其他--> 2031 <div class="group"> 2032 <div class="group-name"> 2033 <a href="">其他</a> 2034 </div> 2035 <!--其他内容--> 2036 <ul class="right-menu-list clearfix"> 2037 <li><a href="">讲座</a></li> 2038 <li><a href="">展览</a></li> 2039 <li><a href="">运动</a></li> 2040 <li><a href="">旅行</a></li> 2041 <li><a href="">公益</a></li> 2042 </ul> 2043 </div> 2044 </div> 2045 2046 <!--主区域--> 2047 <div class="main"> 2048 <div class="section-title"> 2049 <h2 class="title">重庆 · 本周热门活动</h2> 2050 <span class="link"> 2051 <a href="">更多</a> 2052 </span> 2053 </div> 2054 2055 <ul class="item-list"> 2056 <li class="clearfix"> 2057 <div class="img left"> 2058 <a href=""> 2059 <img src="img/city.jpg " alt=""> 2060 </a> 2061 </div> 2062 2063 <div class="words"> 2064 <a href="">Christopher Nissen巡演</a> 2065 <span>3月14日 周六 19:30 - 21:00</span> 2066 <span>寅派动力</span> 2067 <span>4人关注</span> 2068 </div> 2069 </li> 2070 <li class="clearfix"> 2071 <div class="img left"> 2072 <a href=""> 2073 <img src="img/city.jpg " alt=""> 2074 </a> 2075 </div> 2076 2077 <div class="words"> 2078 <a href="">Christopher Nissen巡演</a> 2079 <span>3月14日 周六 19:30 - 21:00</span> 2080 <span>寅派动力</span> 2081 <span>4人关注</span> 2082 </div> 2083 </li> 2084 <li class="clearfix"> 2085 <div class="img left"> 2086 <a href=""> 2087 <img src="img/city.jpg " alt=""> 2088 </a> 2089 </div> 2090 2091 <div class="words"> 2092 <a href="">Christopher Nissen巡演</a> 2093 <span>3月14日 周六 19:30 - 21:00</span> 2094 <span>寅派动力</span> 2095 <span>4人关注</span> 2096 </div> 2097 </li> 2098 <li class="clearfix"> 2099 <div class="img left"> 2100 <a href=""> 2101 <img src="img/city.jpg " alt=""> 2102 </a> 2103 </div> 2104 2105 <div class="words"> 2106 <a href="">Christopher Nissen巡演</a> 2107 <span>3月14日 周六 19:30 - 21:00</span> 2108 <span>寅派动力</span> 2109 <span>4人关注</span> 2110 </div> 2111 </li> 2112 </ul> 2113 </div> 2114 2115 </div> 2116 </div> 2117 </div> 2118 2119 <!--页脚区域--> 2120 <footer class="footer"> 2121 <div class="container clearfix"> 2122 <!--左区域--> 2123 <div class="left"> 2124 <p>© 2005－2020 douban.com, all rights reserved 北京豆网科技有限公司</p> 2125 <p><a href="">京ICP证090015号</a> 京ICP备11027288号 网络视听许可证<a href="">0110418</a>号</p> 2126 <p>京网文[2015]2026-368号<img src="img/biaoshi.gif" alt=""><a href="">京公网安备11010502000728</a>新出网证(京)字129号</p> 2127 <p>违法和不良信息举报电话：4008353331-9</p> 2128 <p><img src="img/jubao.png" alt=""><a href="">中国互联网举报中心</a>电话：12377<a href="">新出发京批字第直160029号</a></p> 2129 </div> 2130 2131 <!--右区域--> 2132 <div class="right"> 2133 <nav class="menu"> 2134 <a href="">关于豆瓣</a> 2135 · 2136 <a href="">在豆瓣工作</a> 2137 · 2138 <a href="">联系我们</a> 2139 · 2140 <a href="">法律声明</a> 2141 · 2142 <a href="">帮助中心</a> 2143 · 2144 <a href="">移动应用</a> 2145 · 2146 <a href="">豆瓣广告</a> 2147 </nav> 2148 2149 <div class="adv"> 2150 <a href=""> 2151 <img src="img/adv3.jpg " alt=""> 2152 </a> 2153 </div> 2154 </div> 2155 </div> 2156 </footer> 2157 2158 </body> 2159 </html>
豆瓣首页HTML代码
㈡豆瓣首页CSS代码
1 @import "reset.css";
2 @import "common.css ";
3
4 /*统一样式*/
5 body{
6 line-height: 2;
7 }
8
9 button{
10 cursor: pointer ;
11 }
12
13 a{
14 color: #37a;
15 text-decoration: none;
16 }
17
18 a:hover{
19 color: #fff;
20 background: #37a;
21 }
22
23 a:active{
24 color: #fff;
25 background: #f93;
26 }
27
28 ul{
29 word-break: break-all;
30 }
31 /*统一样式结束*/
32
33 /*首页通用样式开始*/
34 .container{
35 width: 950px;
36 margin: 0 auto;
37 }
38
39 .section{
40 padding: 35px 0;
41 }
42
43 .section:nth-child(even){
44 background: #f7f7f7;
45 }
46
47 /*页面左边栏样式*/
48 .aside-left{
49 float: left;
50 width: 100px;
51 margin-right: 20px;
52 }
53
54 /*页面右边栏样式*/
55 .aside-right{
56 float: right;
57 width: 265px;
58 margin-right: 30px;
59 }
60
61 /*页面主区域样式*/
62 .main{
63 /*创建BFC*/
64 overflow: hidden;
65 }
66
67 /*广告样式*/
68 .adv img{
69 /*高度撑满*/
70 width: 100%;
71 /*消除白边*/
72 display: block;
73 }
74
75 .section-title{
76 margin: 12px 0;
77 }
78
79 .section-title .title{
80 display: inline;
81 color:#072;
82 font-size: 15px;
83 }
84
85 .section-title .title::after{
86 content: "· · · · · ·";
87 }
88
89 .section-title .link{
90 font-size: 12px;
91 }
92
93 .section-title .link::before{
94 content: "(";
95 }
96
97 .section-title .link::after{
98 content: ")";
99 }
100
101 .adv-tag::after{
102 content: "广告";
103 color: #c9c9c9;
104 font-size: 13px;
105 }
106
107 .aside-left .title{
108 font-size: 24px;
109 color:#000;
110 }
111
112 .dark-color{
113 color: #494949;
114 }
115
116 .item-list li{
117 display: inline-block;
118 vertical-align: top;
119 line-height: 1.5;
120 }
121
122 .item-list li .img img{
123 width: 100%;
124 display: block;
125 }
126
127 .left-menu{
128 font-size: 14px;
129 }
130
131 .left-menu a.new{
132 position: relative;
133 }
134
135 .left-menu a.new::after{
136 content: "";
137 background: url(img/new_menu.gif) no-repeat;
138 width: 17px;
139 height: 7px;
140 position: absolute;
141 right: -20px;
142 top: 0;
143 }
144
145 .right-menu-list{
146 font-size: 12px;
147 }
148
149 .right-menu-list li{
150 float: left;
151 }
152
153 .block-link{
154 padding:2px 10px;
155 font-size: 12px;
156 border-radius: 3px;
157 display: inline-block;
158 }
159
160 .menu-adv{
161 margin-top: 20px;
162 font-size: 12px;
163 }
164
165 .app-icon-1{
166 width: 50px;
167 height: 50px;
168 display: block;
169 background: url(img/app-icon.jpg) no-repeat;
170 box-shadow:1px 1px 2px #999;
171 border-radius: 10px;
172 }
173
174 .app-icon-2{
175 width: 50px;
176 height: 50px;
177 display: block;
178 background: url(img/app-icon.jpg) no-repeat;
179 box-shadow:1px 1px 2px #999;
180 border-radius: 10px;
181 background-position:-250px 0;
182 }
183
184 .app-icon-3{
185 width: 50px;
186 height: 50px;
187 display: block;
188 background: url(img/app-icon.jpg) no-repeat;
189 box-shadow:1px 1px 2px #999;
190 border-radius: 10px;
191 background-position:-50px 0;
192 }
193
194 .group .group-name a{
195 color:#333;
196 }
197
198 .group .group-name a::after {
199 content: "»";
200 }
201
202 .group .right-menu-list li{
203 margin-right: 10px;
204 }
205 /*首页通用样式结束*/
206
207 /*页头开始*/
208 .header{
209 height: 90px;
210 margin-top:30px;
211 box-sizing:border-box;
212 }
213
214 .header .logo a{
215 width: 154px;
216 height: 30px;
217 display:block;
218 background: url("img/logo_db.png") no-repeat left top/100%;
219 }
220
221 .header .logo a span{
222 display:none;
223 }
224
225 .header .search{
226 width: 270px;
227 height: 30px;
228 border:1px solid #c3c3c3;
229 margin-left: 20px;
230 /*设置相对定位*/
231 position: relative;
232 line-height: normal;
233 }
234
235 .header .search .txt{
236 width: 240px;
237 height: 20px;
238 padding: 5px;
239 font-size: 13px;
240 }
241
242 .header .search .txt::placeholder{
243 color:#ccc;
244 }
245
246 .header .search button {
247 /*设置绝对定位*/
248 position: absolute;
249 width: 30px;
250 height: 30px;
251 top: 0;
252 right: 0;
253 }
254
255 .header .menu{
256 margin-top: 6px;
257 }
258
259 .header .menu a{
260 background: url(img/nav_logo.png) no-repeat left top/463px 20px;
261 width: 40px;
262 height: 20px;
263 float:left;
264 margin-left: 20px;
265 }
266 /*重置文本框*/
267 input{
268 border:none;
269 outline:none;
270 outline-offset: 0;
271 }
272
273 /*重置按钮*/
274 button{
275 border:none;
276 outline:none;
277 outline-offset: 0;
278 background: initial;
279 padding: 0px;
280 color: #c3c3c3;
281 }
282
283 .header .menu .menu-read{
284 background-position: 0 0;
285 }
286
287 .header .menu .menu-movie{
288 background-position: -60px 0;
289 }
290
291 .header .menu .menu-music{
292 background-position: -120px 0;
293 }
294
295 .header .menu .menu-group{
296 background-position: -180px 0;
297 }
298
299 .header .menu .menu-city{
300 background-position: -240px 0;
301 }
302
303 .header .menu .menu-fm{
304 background-position: -300px 0;
305 }
306
307 .header .menu .menu-time{
308 background-position: -360px 0;
309 }
310
311 .header .menu .menu-doupin{
312 background-position: -420px 0;
313 width: 44px;
314 }
315 /*页头结束*/
316
317 /*横幅开始*/
318 .banner{
319 height: 304px;
320 background: url(img/banner-bd.jpg) no-repeat 120px top/auto 100% #edf4ed;
321 }
322
323 .banner .container .loginarea{
324 width: 300px;
325 height: 300px;
326 }
327
328 .banner .container .slogan {
329 margin-top: 100px;
330 margin-right: 32px;
331 }
332
333 .banner .container .slogan .title {
334 font-size: 25px;
335 color: #111;
336 }
337
338 .banner .container .slogan .title span{
339 margin-left: 10px;
340 }
341
342 .banner .container .slogan .download{
343 margin-top: 25px;
344 }
345
346 .banner .container .slogan .download .btn{
347 width: 115px;
348 height: 30px;
349 line-height: 30px;
350 font-size: 12px;
351 border-radius: 2px;
352 }
353
354 .banner .container .slogan .download .qrcode{
355 display: inline-block;
356 width: 28px;
357 height: 28px;
358 border: 1px solid #48aa0d;
359 border-radius: 2px;
360 /*垂直对齐*/
361 vertical-align: bottom;
362 position: relative;
363 }
364
365 .banner .container .slogan .download .qrcode img{
366 width: 100%;
367 height: 100%;
368 }
369
370 .banner .container .qrcode-img {
371 position: absolute;
372 left: -2px;
373 top: -2px;
374 width: 200px;
375 padding: 15px;
376 box-sizing: border-box;
377 background: #fff;
378 border-radius: 4px;
379 }
380
381 .banner .container .qrcode-img p{
382 color: #666;
383 font-size: 13px;
384 text-align: center;
385 }
386
387 .banner .container .slogan .download .qrcode:hover .qrcode-img{
388 display: block;
389 }
390 /*横幅结束*/
391
392 /*热门区域*/
393 .hot-list{
394 line-height: 1.5;
395 }
396
397 .hot-list li{
398 margin-bottom: 15px;
399 }
400
401 .hot-list li .title{
402 font-size: 14px;
403 }
404
405 .hot-list li .description{
406 font-size: 13px;
407 color: #aaa;
408 }
409
410 .hot-list li .description span{
411 margin-right: 4px;
412 }
413
414 /*主区域的左侧区域*/
415 .hot-main .left{
416 width: 350px;
417 }
418
419 .hot-main ul{
420 text-align: justify;
421 line-height: 1.5;
422 }
423
424 .hot-main ul::after{
425 content: "";
426 display: inline-block;
427 width: 100%;
428 }
429
430 .hot-main .left li{
431 width: 170px;
432 font-size: 12px;
433 margin: 10px 0;
434 }
435
436 .hot-main .left li .word span{
437 color: #999;
438 }
439
440 /*主区域的右侧区域*/
441 .hot-main .right{
442 width: 275px;
443 font-size: 12px;
444 }
445
446 .hot-main .right li{
447 margin-bottom: 12px;
448 }
449
450 .hot-main .right li .title{
451 color:#999;
452 }
453
454 .hot-main .right li .description{
455 color:#666;
456 }
457 /*热门区域结束*/
458
459 /*豆瓣时间开始*/
460 .time-main li{
461 width: 100px;
462 margin-right: 60px;
463 margin-bottom: 30px;
464 font-size: 13px;
465 text-align: center;
466 }
467
468 .time-main li .words a{
469 color:#333;
470 }
471
472 .time-main li .words a:hover{
473 color:#fff;
474 }
475
476 .time-main li .words span{
477 display: block;
478 color: #999;
479 font-size: 12px;
480 margin-top: 10px;
481 }
482 /*豆瓣时间结束*/
483
484 /*豆瓣视频开始*/
485 .video-main .section-title a:hover{
486 background: initial;
487 }
488
489 .video-main li{
490 width: 250px;
491 margin-right: 30px;
492 font-size: 13px;
493 }
494
495 .video-main li:nth-child(3n){
496 margin: 0;
497 }
498
499 .video-main li .img{
500 position: relative;
501 }
502
503 .video-main li .img::before{
504 position: absolute;
505 width: 100%;
506 height: 100%;
507 background: rgba(0,0,0,.2);
508 color: #fff;
509 text-align: center;
510 line-height: 203px;
511 font-size: 35px;
512 }
513 /*豆瓣视频结束*/
514
515 /*豆瓣电影开始*/
516 .movie-area .right-menu-list li{
517 width: 48px;
518 height: 24px;
519 overflow: hidden;
520 }
521
522 .order-movie-list{
523 font-size: 12px;
524 }
525
526 .order-movie-list li{
527 list-style-type: decimal;
528 list-style-position: inside;
529 border-bottom: 1px solid #eaeaea;
530 margin-bottom: 6px;
531 }
532
533 .order-movie-list li a{
534 margin-left: 5px;
535 }
536
537 .movie-area .item-list li{
538 width: 100px;
539 margin-right: 33px;
540 margin-bottom: 40px;
541 text-align: center;
542 font-size: 13px;
543 }
544
545 .movie-area .item-list li:nth-child(4n){
546 margin-right: 0;
547 }
548
549 .movie-area .item-list li .words{
550 margin-top: 10px;
551 margin-bottom: 4px;
552 }
553
554 .movie-area .item-list li .words a{
555 /*转换元素属性，让a元素可以设置宽度*/
556 display: inline-block;
557 /*最大宽度*/
558 max-width: 100%;
559 /*空白的处理方式是不换行*/
560 white-space: nowrap;
561 /*溢出隐藏*/
562 overflow: hidden;
563 /*隐藏部分用3个点表示*/
564 text-overflow: ellipsis;
565 }
566
567 .movie-area .func{
568 margin-top: 7px;
569 }
570
571 .movie-area .func .block-link{
572 background: #1c8bd0;
573 color: #fff;
574 }
575
576 .movie-area .func .block-link:hover{
577 background: #047fcb;
578 }
579 /*豆瓣电影结束*/
580
581 /*小组开始*/
582 .group-area a{
583 color:#007982;
584 }
585
586 .group-area a:hover{
587 color: #fff !important;
588 }
589
590 .group-area a:active{
591 color: #fff !important;
592 }
593
594 .group-area .main .item-list{
595 text-align: justify;
596 }
597
598 .group-area .main .item-list:after{
599 content: "";
600 display: inline-block;
601 width: 100%;
602 }
603
604 .group-area .main .item-list li{
605 width: 248px;
606 margin-bottom: 30px;
607 font-size: 13px;
608 }
609
610 .group-area .main .item-list li .img{
611 float: left;
612 width: 48px;
613 margin-right: 15px;
614 }
615
616 .group-area .main .item-list li .words{
617 overflow: hidden;
618 }
619
620 .group-area .main .item-list li .words span{
621 display: block;
622 font-size: 12px;
623 color: #999;
624 margin-top: 5px;
625 }
626 /*小组结束*/
627
628 /*读书开始*/
629 .book-area a{
630 color: #494949;
631 }
632
633 .book-area a:hover, .book-area a:active{
634 color: #fff;
635 }
636
637 .book-area .right-menu-list li{
638 margin-right: 10px;
639 }
640
641 .book-area .right-menu-list li span{
642 color: #999;
643 }
644
645 .book-area .group{
646 border-bottom: 1px solid #eaeaea;
647 padding:10px 0;
648 }
649
650 .book-area .group:last-child{
651 border-bottom:none;
652 }
653
654 .book-area .item-list li{
655 width: 100px;
656 margin-right: 33px;
657 font-size: 13px;
658 text-align: center;
659 }
660
661 .book-area .item-list li:nth-child(4n){
662 margin-right: 0;
663 }
664
665 .book-area .item-list li .words{
666 margin-top: 15px;
667 }
668
669 .book-area .item-list li .words span{
670 display:block;
671 color: #111;
672 font-size: 12px;
673 margin-top: 8px;
674 }
675
676 .book-area .item-list li .func .block-link{
677 background: #999a95;
678 color: #fff;
679 }
680
681 .book-area .item-list li .func .block-link:hover{
682 background: #878882;
683 }
684
685 /*读书结束*/
686
687 /*音乐开始*/
688 .music-area a{
689 color: #555d53;
690 }
691
692 .music-area a:hover, .music-area a:active{
693 color: #fff;
694 }
695
696 .music-area .aside-left .title a{
697 color: #f39c00;
698 }
699
700 .music-area .aside-left .title a:hover, .music-area .aside-left .title a:active{
701 color: #fff;
702 }
703
704 .music-area .music-player-list li .number{
705 font-size: 12px;
706 color:#111;
707 }
708
709 .music-area .music-player-list li .player{
710 width: 240px;
711 }
712
713 .music-area .music-player-list li .player .img{
714 width: 48px;
715 height: 48px;
716 position:relative;
717 }
718
719 .music-area .music-player-list li .player .img img{
720 display: block;
721 width: 100%;
722 height: 100%;
723 }
724
725 .music-area .music-player-list li .player .img::before{
726 display: none;
727 position: absolute;
728 width: 100%;
729 height: 100%;
730 left: 0;
731 top: 0;
732 background:rgba(0,0,0,.8);
733 color: #fff;
734 text-align: center;
735 line-height: 48px;
736 }
737
738 .music-area .music-player-list li .player .img:hover::before{
739 display: block;
740 }
741
742 .music-area .music-player-list li .player .words{
743 width: 180px;
744 margin-left:10px;
745 font-size: 12px;
746 }
747
748 .music-area .music-player-list li .player .words span{
749 display:block;
750 color: #999;
751 line-height: 1.5;
752 }
753
754 .music-area .item-list li{
755 width: 130px;
756 text-align: center;
757 font-size: 12px;
758 margin-bottom: 40px;
759 }
760
761 .music-area .item-list li .img{
762 width: 80px;
763 margin: 0 auto;
764 }
765
766 .music-area .item-list li .words{
767 margin: 4px 0;
768 }
769
770 .music-area .item-list.hot-music li .words{
771 font-size: 13px;
772 margin: 8px 0;
773 }
774
775 .music-area .item-list.hot-music li .img{
776 position: relative;
777 }
778
779 .music-area .item-list.hot-music li .img::before{
780 position: absolute;
781 width: 40px;
782 height: 40px;
783 left: 0;
784 right: 0;
785 top: 0;
786 bottom: 0;
787 margin: auto;
788 text-align: center;
789 line-height: 40px;
790 font-size: 40px;
791 color: #fff;
792 background: rgba(0,0,0,.4);
793 border-radius: 50%;
794 }
795 /*音乐结束*/
796
797 /*豆品开始*/
798 .doupin-area .aside-left .title a{
799 color: #1f9432;
800 }
801
802 .doupin-area .aside-left .title a:hover, .doupin-area .aside-left .title a:active{
803 color: #fff;
804 }
805
806 .doupin-area .aside-right{
807 font-size: 14px;
808 }
809
810 .doupin-area .main .item-list li{
811 width: 240px;
812 margin-right: 20px;
813 font-size: 16px;
814 margin-bottom: 30px;
815 }
816
817 .doupin-area .main .item-list li .words{
818 margin-top: 10px;
819 }
820
821 .doupin-area .main .item-list li .words span{
822 color: #E55457;
823 }
824 /*豆品结束*/
825
826 /*同城开始*/
827 .city-area a{
828 color: #643;
829 }
830
831 .city-area a:hover, .city-area a:active{
832 color: #fff;
833 }
834
835 .city-area .aside-left .title a{
836 color: #ec5303;
837 }
838
839 .city-area .aside-left .title a:hover, .city-area .aside-left .title a:active{
840 color: #fff;
841 }
842
843 .city-area .item-list li{
844 width: 248px;
845 margin-right: 20px;
846 margin-bottom: 60px;
847 }
848
849 .city-area .item-list li:nth-child(even){
850 margin-right: 0;
851 }
852
853 .city-area .item-list li .img{
854 margin-right: 10px;
855 }
856
857 .city-area .item-list li .words{
858 overflow: hidden;
859 }
860
861 .city-area .item-list li .words a{
862 font-size: 13px;
863 }
864
865 .city-area .item-list li .words span{
866 font-size: 12px;
867 display: block;
868 color: #666;
869 line-height: 1.7;
870 }
871 /*同城结束*/
872
873 /*页脚开始*/
874 .footer{
875 font-size: 12px;
876 line-height: 1.5;
877 color: #999;
878 }
879
880 .footer .container{
881 border-top: 1px dashed #dcdcdc;
882 padding-top: 15px;
883 padding-bottom: 30px;
884 }
885
886 .footer .left img{
887 width: 15px;
888 vertical-align: middle;
889 }
890
891 .footer .left, .footer .right{
892 width: 50%;
893 }
894
895 .footer .right .menu a{
896 display: inline-block;
897 margin:0 2px;
898 }
899
900 .footer .right .menu a:first-child{
901 margin-left: 0;
902 }
903
904 .footer .adv{
905 width: 150px;
906 margin-top: 20px;
907 }
908 /*页脚结束*/
豆瓣首页CSS代码
㈢引用的公共样式CSS代码
1 /*多页面共享的css代码*/
2 @import "//at.alicdn.com/t/font_1637126_kry1x9i38pm.css";
3
4 body{
5 font-family: Helvetica,Arial,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;;
6 }
7
8 .left{
9 float:left;
10 }
11
12 .right{
13 float:right;
14 }
15
16 .clearfix::after{
17 content:"";
18 display:block;
19 clear:both;
20 }
21
22 .hidden{
23 display:none;
24 }
25
26 .btn{
27 background: #41ac52 ;
28 cursor: pointer ;
29 color: #fff;
30 text-align: center;
31 border-radius: 4px;
32 }
33
34 .btn:disabled {
35 background:rgba(66,189,86,.5);
36 cursor: not-allowed;
37 }
38
39 /*评分*/
40 .star-bg{
41 display: inline-block;
42 width: 55px;
43 height: 11px;
44 background:url(img/star.png) no-repeat left top/100%;
45 }
46
47 .star50{
48 background-position: 0 0;
49 }
50
51 .star45{
52 background-position: 0 -11px;
53 }
54
55 .star40{
56 background-position: 0 -22px;
57 }
58
59 .star35{
60 background-position: 0 -33px;
61 }
62
63 .star30{
64 background-position: 0 -44px;
65 }
66
67 .star25{
68 background-position: 0 -55px;
69 }
70
71 .star20{
72 background-position: 0 -66px;
73 }
74
75 .star15{
76 background-position: 0 -77px;
77 }
78
79 .star10{
80 background-position: 0 -88px;
81 }
82
83 .star05{
84 background-position: 0 -99px;
85 }
86
87 .star00{
88 background-position: 0 -110px;
89 }
90
91 .star .number{
92 font-size: 12px;
93 margin-left: 7px;
94 color: #e09015;
95 }
引用的公共样式CSS代码
㈣重置样式CSS代码
1 /* http://meyerweb.com/eric/tools/css/reset/
2 v2.0 | 20110126
3 License: none (public domain)
4 */
5
6 html, body, div, span, applet, object, iframe,
7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 a, abbr, acronym, address, big, cite, code,
9 del, dfn, em, img, ins, kbd, q, s, samp,
10 small, strike, strong, sub, sup, tt, var,
11 b, u, i, center,
12 dl, dt, dd, ol, ul, li,
13 fieldset, form, label, legend,
14 table, caption, tbody, tfoot, thead, tr, th, td,
15 article, aside, canvas, details, embed,
16 figure, figcaption, footer, header, hgroup,
17 menu, nav, output, ruby, section, summary,
18 time, mark, audio, video {
19 margin: 0;
20 padding: 0;
21 border: 0;
22 font-size: 100%;
23 font: inherit;
24 vertical-align: baseline;
25 }
26 /* HTML5 display-role reset for older browsers */
27 article, aside, details, figcaption, figure,
28 footer, header, hgroup, menu, nav, section {
29 display: block;
30 }
31 body {
32 line-height: 1;
33 }
34 ol, ul {
35 list-style: none;
36 }
37 blockquote, q {
38 quotes: none;
39 }
40 blockquote:before, blockquote:after,
41 q:before, q:after {
42 content: ‘‘;
43 content: none;
44 }
45 table {
46 border-collapse: collapse;
47 border-spacing: 0;
48 }
重置样式CSS代码
㈤豆瓣横幅区域登录HTML代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录/注册</title> 6 <link rel="stylesheet" href="loginframe.css "> 7 </head> 8 <body> 9 <div class="container"> 10 <!--短信登录/注册，密码登录--> 11 <div class="login "> 12 <!--切换菜单--> 13 <div class="switch-menu clearfix"> 14 <span class="left " > 15 短信登录/注册 16 </span> 17 <span class="right selected"> 18 密码登录 19 </span> 20 </div> 21 <form class="form"> 22 <!--短信登录/注册表单--> 23 <div > 24 <div class="form-item"> 25 <p class="txt"> 26 登录注册表示同意 27 <a href="">豆瓣使用协议、隐私政策</a> 28 </p> 29 </div> 30 31 <div class="form-item"> 32 <input type="text" class="more-text-indent" placeholder="手机号"> 33 <div class="country-code"> 34 <div> 35 +86 36 </div> 37 <div class="choose-area hidden"> 38 <div class="center"> 39 <div class="title"> 40 选择国际区号 41 </div> 42 <div> 43 <ul> 44 <li class="clearfix"><span class="left">国家名1</span><span class="right">+1</span> 45 </li> 46 <li class="clearfix selected"> 47 <span class="left">国家名2</span> 48 <i class="left iconfont iconzhengque"></i> 49 <span class="right">+2</span> 50 </li> 51 <li class="clearfix"><span class="left">国家名3</span><span class="right">+3</span> 52 </li> 53 <li class="clearfix"><span class="left">国家名4</span><span class="right">+4</span> 54 </li> 55 <li class="clearfix"><span class="left">国家名5</span><span class="right">+5</span> 56 </li> 57 <li class="clearfix"><span class="left">国家名6</span><span class="right">+6</span> 58 </li> 59 <li class="clearfix"><span class="left">国家名7</span><span class="right">+7</span> 60 </li> 61 <li class="clearfix"><span class="left">国家名8</span><span class="right">+8</span> 62 </li> 63 <li class="clearfix"><span class="left">国家名9</span><span class="right">+9</span> 64 </li> 65 <li class="clearfix"><span class="left">国家名10</span><span 66 class="right">+10</span></li> 67 <li class="clearfix"><span class="left">国家名11</span><span 68 class="right">+11</span></li> 69 <li class="clearfix"><span class="left">国家名12</span><span 70 class="right">+12</span></li> 71 <li class="clearfix"><span class="left">国家名13</span><span 72 class="right">+13</span></li> 73 <li class="clearfix"><span class="left">国家名14</span><span 74 class="right">+14</span></li> 75 <li class="clearfix"><span class="left">国家名15</span><span 76 class="right">+15</span></li> 77 </ul> 78 </div> 79 </div> 80 </div> 81 </div> 82 </div> 83 84 <div class="form-item"> 85 <input type="text" placeholder="验证码"> 86 <a href="" class="ab-right"> 87 获取验证码 88 </a> 89 </div> 90 <div class="form-item"> 91 <button class="btn" >登录豆瓣</button> 92 </div> 93 94 <div class="form-item tip clearfix"> 95 <label class="left"> 96 <input type="checkbox"> 97 下次自动登录 98 </label> 99 100 <span class="right"> 101 <a href=""> 102 收不到验证码 103 </a> 104 </span> 105 </div> 106 </div> 107 108 <!--密码登录--> 109 <div class="hidden"> 110 <div class="form-item tip clearfix" > 111 <a href="" class="right" >找回密码</a> 112 </div> 113 114 <div class="form-item" > 115 <input type="text" placeholder="手机号/邮箱"> 116 </div> 117 118 <div class="form-item" > 119 <input type="password" placeholder="密码"> 120 </div> 121 122 <div class="form-item"> 123 <button disabled class="btn" >登录豆瓣</button> 124 </div> 125 126 <div class="form-item tip clearfix"> 127 <lable class="left"> 128 <input type="checkbox" > 129 下次自动登录 130 </lable> 131 <span class="right"> 132 <a href=""> 133 海外手机登录 134 </a> 135 </span> 136 </div> 137 </div> 138 </form> 139 140 <div class="bottom"> 141 <span class="msg"> 142 第三方登录： 143 </span> 144 <i class="iconfont iconweixin" ></i> 145 <i class="iconfont iconweibo" ></i> 146 </div> 147 </div> 148 149 <!--扫码登录--> 150 <div class="qrcode hidden"> 151 <div class="title"> 152 二维码登录 153 </div> 154 <div class="code"> 155 <img src="img/qrlogin_code.png" alt=""> 156 </div> 157 <div class="tip" > 158 请打开豆瓣客户端扫一扫 159 </div> 160 </div> 161 <div class="change"> 162 <!--通过类名切换图标--> 163 <!--<i class="icon icon-qrcode"></i>--> 164 <i class="icon icon-pc"></i> 165 </div> 166 167 <div class="pointer hidden"> 168 扫码登录 169 </div> 170 </div> 171 </body> 172 </html>
豆瓣横幅区域登录HTML代码
㈥豆瓣横幅区域登录CSS代码
1 @import "reset.css";
2 @import "common.css ";
3
4 /*统一设置开始*/
5 a{
6 color:#41ac52;
7 }
8
9 input[type="text"], input[type="password"]{
10 width:100%;
11 border:1px solid #e4e6e5;
12 box-sizing: border-box;
13 height: 34px;
14 padding-left: 10px;
15 border-radius: 4px;
16 font-size: 13px;
17 }
18
19 /*更多的缩进*/
20 input[type="text"].more-text-indent{
21 padding-left: 60px;
22 }
23 /*统一设置结束*/
24
25 /*重置按钮*/
26 button{
27 border:none;
28 outline:none;
29 outline-offset: 0;
30 background: initial;
31 padding: 0;
32 color: #c3c3c3;
33 box-sizing: border-box;
34 }
35
36 .container {
37 width: 300px;
38 height: 300px;
39 line-height: 2;
40 padding: 30px 10px 10px 10px;
41 color:#9b9b9b;
42 box-sizing: border-box;
43 position: relative;
44 }
45
46 .container .login .switch-menu{
47 border-bottom: 1px solid #ececec;
48 font-size: 13px;
49 }
50
51 .container .login .switch-menu span{
52 width: 50%;
53 text-align: center;
54 cursor: pointer;
55 }
56
57 .container .login .switch-menu span.selected{
58 font-weight: bold;
59 color:#333;
60 border-bottom: 1px solid #494949;
61 margin-bottom: -1px;
62 }
63
64 .container .login .form .form-item{
65 margin:10px 0;
66 position: relative;
67 font-size: 13px;
68 }
69
70 .container .login .form .form-item .txt{
71 font-size: 12px;
72 }
73
74 /*国家地区电话区号设置*/
75 .container .login .form .form-item .country-code{
76 position: absolute;
77 width: 51px;
78 height: 26px;
79 left: 0;
80 top: 5px;
81 text-align: center;
82 color:#333;
83 font-weight: bold;
84 font-size: 15px;
85 line-height: 26px;
86 border-right:1px solid #e4e6e5;
87 cursor: pointer;
88 }
89
90 .container .login .form .form-item .country-code .choose-area{
91 /*铺满整个窗口，背景为半透明的白色*/
92 position: fixed;
93 width: 100%;
94 height: 100%;
95 background: rgba(255,255,255,0.5);
96 left: 0;
97 top: 0;
98 z-index: 1;
99 }
100
101 .container .login .form .form-item .country-code .choose-area .center{
102 width: 285px;
103 height: 225px;
104 position: absolute;
105 box-sizing: border-box;
106 border:1px solid #bbb;
107 left: 0;
108 right: 0;
109 top:0;
110 bottom: 0;
111 margin: auto;
112 background: #fff;
113 border-radius: 5px;
114 cursor: auto;
115 overflow: hidden;
116 }
117
118 .container .login .form .form-item .country-code .choose-area .center .title{
119 background: #ebf5eb;
120 height: 42px;
121 line-height: 42px;
122 text-align: left;
123 padding-left: 10px;
124 color:#060;
125 font-weight: bold;
126 }
127 .container .login .form .form-item .country-code .choose-area .center ul{
128 height: 180px;
129 overflow: auto;
130 padding: 10px;
131 box-sizing: border-box;
132 font-size: 14px;
133 }
134
135 .container .login .form .form-item .country-code .choose-area .center ul li{
136 height: 38px;
137 line-height: 38px;
138 border-top: 1px solid #e5e5e5;
139 border-bottom: 1px solid #e5e5e5;
140 margin-top: -1px;
141 cursor: pointer;
142 }
143
144 .container .login .form .form-item .country-code .choose-area .center ul li .right{
145 color: #aaa;
146 font-weight: normal;
147 }
148
149 .container .login .form .form-item .country-code .choose-area .center ul li.selected{
150 color: #42bd56;
151 }
152
153 .container .login .form .form-item .country-code .choose-area .center ul li.selected .right{
154 color: inherit;
155 }
156
157 .container .login .form .form-item .country-code .choose-area .center ul li.selected .iconfont{
158 margin-left: 10px;
159 }
160
161 .container .form-item .ab-right{
162 position: absolute;
163 right:7px;
164 top: 5px;
165 }
166
167 .container .form-item .btn{
168 width: 100%;
169 height: 34px;
170 font-size: 15px;
171 }
172
173 .container .login .form-item.tip{
174 font-size: 12px;
175 color: #333;
176 }
177
178 .container .login .bottom{
179 border-top: 1px solid #ddd;
180 }
181
182 .container .login .bottom .msg{
183 font-size: 11px;
184 vertical-align: 2px;
185 }
186
187 .container .login .bottom .iconfont{
188 margin-left: 12px;
189 }
190
191 .container .login .bottom .iconfont.iconweixin{
192 color:#1afa29;
193 }
194
195 .container .login .bottom .iconfont.iconweibo{
196 color: #EA5D5C;
197 }
198
199 .container .qrcode{
200 font-size: 13px;
201 }
202
203 .container .qrcode .title{
204 color:#333;
205 border-bottom: 1px solid #ececec;
206 }
207
208 .container .qrcode .code{
209 /*图片居中*/
210 text-align: center;
211 font-size: 0;
212 margin-top: 20px;
213 }
214
215 .container .qrcode .code img{
216 width: 170px;
217 height: 170px;
218 }
219
220 .container .qrcode .tip{
221 width: 183px;
222 height: 25px;
223 line-height: 25px;
224 background: rgba(0,0,0,.08);
225 color: #494949;
226 margin: 0 auto;
227 text-align: center;
228 border-radius: 20px;
229 margin-top: 10px;
230 }
231
232 .container .change{
233 position: absolute;
234 width: 30px;
235 height: 30px;
236 right: 10px;
237 top: 10px;
238 }
239
240 .container .change:hover+.pointer{
241 display: block;
242 }
243
244 .container .change .icon{
245 width: 30px;
246 height: 30px;
247 display: block;
248 cursor: pointer;
249 }
250
251 .container .change .icon.icon-qrcode{
252 background: url(img/icon-qrcode.png ) no-repeat left top/100% 100%;
253 }
254
255 .container .change .icon.icon-pc {
256 background: url(img/icon-pc.png) no-repeat left top/100% 100%;
257 }
258
259 .container .pointer{
260 position: absolute;
261 height: 28px;
262 line-height: 28px;
263 border: 1px solid rgba(66,189,86,.3);
264 color:#666;
265 font-size: 13px;
266 background: #f5faf9;
267 right: 50px;
268 top: 6px;
269 padding: 0 5px;
270 border-radius: 4px;
271 }
豆瓣横幅区域登录CSS代码
㈦具体效果图
进入豆瓣官网查看：https://www.douban.com/
原文地址：https://www.cnblogs.com/shihaiying/p/12320836.html
时间： 2024-11-07 03:33:45