豆瓣首页模仿

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <meta charset="UTF-8">
   5         <meta name="description" content="小清新 文艺青年的聚集地">
   6         <title>豆瓣</title>
   7         <script src="JS/base.js"></script>
   8         <style>
   9             body, a, ul, li, h1, h2, h3, p, img, input, div {
  10             margin: 0;
  11             padding: 0;
  12         }
  13         a , li {
  14            text-decoration: none;
  15         }
  16         a {
  17             color: #37a;
  18         }
  19         li a:hover {
  20             background: #37a;
  21             color: #fff;
  22         }
  23
  24         li {
  25             list-style: none;
  26         }
  27         img, input{
  28             border: 0;
  29             outline: none;
  30             margin: 0;
  31             padding: 0;
  32         }
  33         input {
  34
  35             ::-webkit-placeholder { /* WebKit browsers */color: #d3d3d3;}
  36             :-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #d3d3d3;}
  37             ::-moz-placeholder { /* Mozilla Firefox 19+ */color: #d3d3d3;}
  38             :-ms-placeholder { /* Internet Explorer 10+ */color: #d3d3d3;}
  39         }
  40         h1 {color: #37a;font-weight: 400; font-size: 24px;}
  41         h2 {
  42             color: #072;
  43             font-size: 15px;
  44             font-weight: 400;
  45         }
  46         body {
  47             font-size: 12px Helvetica,Arial,sans-serif;
  48             line-height: 1.62;
  49         }
  50         label {
  51             text-align: middle;
  52             font-size: 12px;
  53             color: #d3d3d3;
  54
  55         }
  56         .wrapper {
  57                 margin: 0 auto;
  58                 width: 950px;
  59         }
  60         .skin {
  61             background-color: #f7f7f7;
  62         }
  63         .clearfix{*zoom:1;}
  64         .clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
  65
  66
  67             /*设置顶部导航高度饼居中*/
  68             .topnav{
  69                 margin: 25px auto 25px;
  70                 width: 950px;
  71             }
  72             .topnav h1 {
  73                 display: inline-block;
  74                 vertical-align: middle;
  75                 width: 160px;
  76                 height: 34px;
  77                 background: url(http://img3.douban.com/f/sns/19886d443852bee48de2ed91f4a3bdfdaf8c809c/pics/nav/logo_db.png) no-repeat 0 0;
  78                 font-size: 12px;
  79                 cursor: pointer;
  80             }
  81
  82             .topnav h1 a {
  83                 height: 34px;
  84                 line-height: 10em;
  85                 color: #669;
  86             }
  87             /*顶部搜索框*/
  88
  89             .search {
  90                 display: inline-block;
  91                      position: relative;
  92                 border: 1px solid #cfcfcf;
  93                 height: 30px;
  94                 width: 270px;
  95                 vertical-align: middle;
  96                 color: #f00;
  97             }
  98             .search-input {
  99                 width: 250px;
 100                 height: 20px;
 101                 padding-top: 5px;
 102                 padding-left: 5px;
 103                 line-height: 20px;
 104             }
 105             .search form .label {
 106                 position: absolute;
 107                 top: 7px;
 108                 left: 5px;
 109             }
 110             .search-btn {
 111                 position: absolute;
 112                 right: 5px;
 113                 top: 5px;
 114                 height: 20px;
 115                 width: 20px;
 116                 overflow: hidden;
 117                 font-size: 0;
 118                 vertical-align: middle;
 119                 background: url(http://img3.douban.com/f/sns/f71f15922ebd7c0ff0ea0e7a25577529efd8981a/pics/icon/bn_srh_1.png) no-repeat;
 120                 background-size: cover;
 121                 color: transparent;
 122                 cursor: pointer;
 123             }
 124             /*顶部右侧导航*/
 125             .topnav-menu {
 126                 display: inline-block;
 127                 vertical-align: middle;
 128                 font-size: 0;/*用来消除inline-block之间的间隙    */
 129             }
 130
 131             .topnav-menu ul li{
 132                 display: inline-block;
 133                 margin-left: 21px;
 134             }
 135             .topnav-menu ul li a{
 136                 display: inline-block;
 137                 overflow: hidden;
 138                 outline: 0;
 139                 height: 20px;
 140                 line-height: 20em;
 141                 width: 40px;
 142                 background: url(http://img3.douban.com/f/sns/16681eca0be1db2d0c47c7d71fe6dda90ee86440/pics/nav/anony_nav_logo4.png) no-repeat 100% 100%;
 143             }
 144
 145             .topnav-menu ul li .lnk-book {
 146                 background-position: 0 0;
 147             }
 148             .topnav-menu ul li .lnk-movie {
 149                 background-position: -60px 0;
 150             }
 151             .topnav-menu ul li .lnk-music {
 152                 background-position: -120px 0;
 153             }
 154             .topnav-menu ul li .lnk-group {
 155                 background-position: -180px 0;
 156             }
 157             .topnav-menu ul li .lnk-events {
 158                 background-position: -340px 0;
 159             }
 160             .topnav-menu ul li .lnk-fm {
 161                 background-position: -240px 0;
 162                 width: 80px;
 163             }
 164             .topnav-menu ul li .lnk-dongxi {
 165                 background-position: -400px 0;
 166             }
 167
 168             /*登录注册部分*/
 169             .login-box {
 170
 171                 background-color: #e8edf1;
 172             }
 173             .login-box .wrapper {
 174                 position: relative;
 175                 margin: 25px auto 25px;
 176                 padding: 30px 0 20px;
 177                 width: 950px;
 178                 background: url(http://img3.douban.com/f/sns/7ba51a7f909dfd1e6fe8f0d219942cad577acd23/pics/sns/anony_home/doubanapp.png) no-repeat 40px 30px;
 179             }
 180             .login-side {
 181                 position: relative;
 182                 margin-left: 280px;
 183                 height: 120px;
 184                 width: 175px;
 185             }
 186             .login-side span {
 187                 display: block;
 188                 position: absolute;
 189                 left: 220px;
 190                 top: 10px;
 191                 border-right: 1px solid #d7dce1;
 192                 height: 80px;
 193             }
 194             .login-title {
 195                 margin-bottom: 15px;
 196                 font-size: 24px;
 197                 height: 24px;
 198             }
 199             .login-content {
 200                 margin-bottom: 15px;
 201                 font-size: 14px;
 202                 height: 16px;
 203             }
 204             .app {
 205                 padding-top: 10px;
 206                 height: 30px;
 207             }
 208             .app .download {
 209                 display: inline-block;
 210                 text-align: center;
 211                 font-size: 12px;
 212                 height: 30px;
 213                 line-height: 30px;
 214                 width: 135px;
 215                 background-color: #3ca353;
 216                 color: #fff;
 217             }
 218             .app-other {
 219                 position: relative;
 220                 display: inline-block;
 221
 222             }
 223             .other {
 224                 display: inline-block;
 225                 border-radius: 2px;
 226                 -webkit-border-radius: 2px;
 227                 -moz-border-radius: 2px;
 228                 border: 1px solid #bbc1c6;
 229                 height: 28px;
 230                 width: 28px;
 231             }
 232
 233             .other img {
 234                 vertical-align: middle;
 235             }
 236             .app-link {
 237                 display: none;
 238                 border: 1px solid #bbc1c6;
 239                 border-radius: 2px;
 240                 -webkit-border-radius: 2px;
 241                 -moz-border-radius: 2px;
 242                 position: absolute;
 243                 top: 0;
 244                 left: 0;
 245                 padding: 15px 15px 0px 15px;
 246                 background-color: #fff;
 247             }
 248             .app-link p {
 249                 font-size: 13px;
 250                 line-height: 13px;
 251                 text-align: center;
 252             }
 253
 254             .wrapper .login {
 255                 position: absolute;
 256                 left: 550px;
 257                 top: 20px;
 258                 width: 390px;
 259             }
 260             .login-account, .login-passwd {position: relative;}
 261             .login-account .label, .login-passwd .label {position: absolute; top: 7px;left: 5px;}
 262             .login-account input, .login-passwd input{
 263                 margin-bottom: 10px;
 264                 padding-left: 10px;
 265                 padding-top: 7px;
 266                 height: 23px;
 267                 width: 165px;
 268             }
 269             .login-passwd a{
 270                 font-size: 12px;
 271             }
 272             .login-passwd a:hover {
 273                 background: #37a;
 274                 color: #fff;
 275             }
 276
 277             .login-remember {
 278                 margin-bottom: 10px;
 279                 font-size: 12px;
 280
 281             }
 282             .login-remember input {
 283                 vertical-align: middle;
 284             }
 285             .login-submit input{
 286                 border-radius: 2px;
 287                 width: 70px;
 288                 height: 30px;
 289                 background-color: #3ca353;
 290                 color: #fff;
 291                 font-size: 12px;
 292                 letter-spacing:  2px;
 293             }
 294
 295             .login-submit a {
 296                 display: inline-block;
 297                 border: 1px solid #ef735f;
 298                 border-radius: 2px;
 299                 color: #ef735f;
 300                 font-size: 12px;
 301                 width: 68px;
 302                 height: 28px;
 303                 line-height: 28px;
 304                 text-align: center;
 305                 letter-spacing:  2px;
 306             }
 307
 308             /*热点内容部分hot-sns*/
 309             .hot-sns .hot-ad a{
 310                 display: block;
 311                 height: 90px;
 312             }
 313             .hot-sns {
 314                 overflow: hidden; //解决上下div重叠
 315             }
 316            /* hot-content左侧部分*/
 317
 318             .hot-content .hot-main h2 {
 319                 margin: 0;
 320                 width: 655px;
 321                 padding-top: 5px;
 322                 padding-bottom: 15px;
 323             }
 324
 325             .hot-main .sns-img {
 326                 width: 360px;
 327             }
 328             .hot-main .sns-img {
 329                 float: left;
 330             }
 331             .sns-img ul li {
 332                 float: left;
 333                 margin-right: 10px;
 334                 width: 170px;
 335             }
 336             .img-head img {
 337                 width: 170px;
 338             }
 339             .img-title {
 340                 font-size: 12px;
 341             }
 342             .img-title a {
 343                 color: #37a;
 344             }
 345             .img-title span {
 346                    color: #999;
 347             }
 348             .hot-main .sns-text {
 349                 margin-left: 30px;
 350                 float: left;
 351                 font-size: 12px;
 352                 width: 275px;
 353             }
 354             .sns-text li {
 355                 margin-bottom: 10px;
 356                 width: 275px;
 357             }
 358             .sns-text li h3{
 359                 color: #999;
 360                 font-weight: 400;
 361                 font-size: 13px;
 362             }
 363             .sns-text li p{
 364                 color: #666;
 365             }
 366              /* hot-content右侧部分*/
 367             .hot-content .sns-activity {
 368                 float: right;
 369
 370             }
 371             .act-title {
 372                 margin-bottom: 10px;
 373                 width: 275px;
 374                 height: 25px;
 375             }
 376             .act-title h2 {
 377                 display: inline-block;
 378                 height: 25px;
 379                 line-height: 25px;
 380             }
 381             .act-title a{
 382                 font-size: 12px;
 383             }
 384             .act-text ul li {
 385                 margin-bottom: 5px;
 386                 font-size: 12px;
 387             }
 388
 389             .act-text ul li p {
 390                 color: #666;
 391             }
 392
 393             /*豆瓣电影*/
 394             .db-movie {
 395                 margin-top: 30px;
 396                 padding-top: 30px;
 397                 background: #f7f7f7;
 398                 overflow: hidden;
 399             }
 400             .new img {
 401                 top: -5px;
 402                 left: -5px;
 403                 position: relative;
 404             }
 405             .nav-side{
 406                 float: left;
 407                 margin-right: 20px;
 408                 width: 100px;
 409             }
 410
 411             .nav-side h1 {
 412                 margin-bottom: 10px;
 413             }
 414             .nav-side ul {
 415                 font-size: 14px;
 416             }
 417             .nav-side ul li {
 418                 height: 25px;
 419                 line-height: 25px;
 420             }
 421             .main {
 422                 overflow: hidden;
 423             }
 424             .main .main-list {
 425                 font-size: 0;
 426             }
 427             .main-list ul li {
 428                 display: inline-block;
 429                 margin-bottom: 40px;
 430                 width: 24.8%;
 431                 text-align: center;
 432                 font-size: 12px;
 433             }
 434             .main-list ul li img {
 435                 width: 100px;
 436             }
 437             .main-list li a {
 438                 display: block;
 439             }
 440             .main-list li .main-list-title {
 441                 margin-bottom: 5px;
 442                 color: #333;
 443
 444             }
 445             .main-list li .main-list-btn {
 446                 display: inline-block;
 447                 border-radius: 2px;
 448                 width: 68px;
 449                 height: 25px;
 450                 line-height: 25px;
 451                 text-align: center;
 452                 background: #1c8bd0;
 453                 color: #fff;
 454             }
 455             .main-list li .main-list-btn:hover {
 456                 background: #27a;
 457                 color: #fff;
 458             }
 459             .rating {
 460                 margin-bottom: 5px;
 461             }
 462             .allstar45, .allstar35,  .allstar25,  .allstar20{
 463                 display: inline-block;
 464                 width: 55px;
 465                 height: 11px;
 466                 background: url(http://img3.douban.com/f/shire/5cb30ab98d8deb43ff321ef2c64493cbd2d6c057/pics/movie/midstars.gif) no-repeat;
 467             }
 468             .allstar45 {
 469                 background-position: 0 -11px;
 470             }
 471             .allstar35 {
 472                 background-position: 0 -33px;
 473             }
 474             .allstar20 {
 475                 background-position: 0 -66px;
 476             }
 477             .allstar25 {
 478                 background-position: 0 -55px;
 479             }
 480             .rating span {
 481                 color: #f40;
 482             }
 483             .side .side-tags {
 484                 margin-bottom: 20px;
 485                 font-size: 13px;
 486
 487             }
 488             .side-tags a {
 489                 display: inline-block;
 490                 height: 25px;
 491                 width: 45px;
 492                 color: #27a;
 493             }
 494
 495             .side-hot ul li {
 496                 padding-bottom: 3px;
 497                 margin-top: 10px;
 498                 border-bottom: 1px solid #ededed;
 499                 font-size: 12px;
 500             }
 501
 502             .side {
 503                 float: right;
 504                 width: 265px;
 505                 margin-left: 20px;
 506             }
 507             /*豆瓣小组*/
 508             .db-group {
 509                 margin-top: 40px;
 510             }
 511             .group-list {
 512                 overflow: hidden;
 513             }
 514             .group-list ul li{
 515                 display: inline-block;
 516                 margin-bottom: 30px;
 517                 margin-right: 30px;
 518                 width: 220px;
 519             }
 520             .pic {
 521                 float: left;
 522                 margin-right: 10px;
 523                 width: 48px;
 524                 height: 55px;
 525             }
 526             .pic-title {
 527                float: left;
 528                font-size: 13px;
 529             }
 530             .pic-title a{
 531                 color: #017a85;
 532             }
 533             .pic-title p {
 534                 color: #999;
 535                 margin-top: 5px;
 536             }
 537             .db-group .side ul li {
 538                 margin-bottom: 10px;
 539             }
 540             .list-head a {
 541                 font-size: 14px;
 542                 color: #000;
 543             }
 544             .list-links {
 545                 font-size: 12px;
 546             }
 547             .list-links a {
 548                 display: inline-block;
 549                 margin-right: 8px;
 550                 color: #017a85;
 551             }
 552             /*豆瓣读书*/
 553             .db-book {
 554                 padding-top: 30px;
 555                 background: #f7f7f7;
 556                 overflow: hidden;
 557
 558             }
 559             .app-icon {
 560                 display: block;
 561                 border-radius: 10px;
 562                 box-shadow: 1px 1px 2px #999;
 563                 width: 50px;
 564                 height: 50px;
 565                 background: url(http://img3.douban.com/f/sns/d9aca7b9f2df8df83008f199b8feb888dec4a613/pics/app/app_icons_50_7.jpg) no-repeat;
 566
 567             }
 568             .db-book .app-icon {
 569                 background-position: 0 0;
 570             }
 571
 572             .db-book a {
 573                 color: #614e3c;
 574             }
 575             .db-book .main-list li .main-list-title {
 576                 color: #614e3c;
 577             }
 578             .db-book .main-list li .main-list-btn {
 579                 background: #999a95;
 580             }
 581             .db-book .main-list li .main-list-btn:hover {
 582                 background: #614e3c;
 583             }
 584             .db-book .main-list .author {
 585                 color:  #000;
 586             }
 587             .db-book .main-list .price {
 588                 margin-bottom: 5px;
 589                 color:  #666;
 590             }
 591             .db-book .side-hot ul li span {
 592                 color: #999;
 593             }
 594             .db-book .side-hot ul li a {
 595                 display: inline-block;
 596                 margin-right: 6px;
 597                 margin-bottom: 5px;
 598             }
 599             /*豆瓣音乐*/
 600             .db-music {
 601                 padding-top: 30px;
 602                 overflow: hidden;
 603             }
 604             .db-music .app-icon-fm {
 605                 margin-top: 30px;
 606             }
 607             .db-music .app-icon-fm .app-icon {
 608                 background-position: -250px 0;
 609             }
 610             .db-music .app-icon-artists {
 611                 margin-top: 60px;
 612             }
 613             .db-music .app-icon-artists .app-icon {
 614                 background-position: -50px;
 615             }
 616             .db-music .main-list ul li  {
 617                 vertical-align: top;
 618             }
 619             .db-music .side-list ul li{
 620                 display: inline-block;
 621                 margin-bottom: 10px;
 622             }
 623             .db-music .pic-title p {
 624                 margin-top: 0px;
 625             }
 626             /*豆瓣东西*/
 627             .db-dongxi {
 628                 padding-top: 30px;
 629                 overflow: hidden;
 630             }
 631             .db-dongxi a{
 632                 color: #a16b4e;
 633             }
 634             .weibo {
 635                 padding-top: 20px;
 636             }
 637             .weibo a {
 638                 display: block;
 639             }
 640             .story-list .mod {
 641                 height: 315px;
 642                 margin-bottom: 30px;
 643             }
 644             .main-story {
 645                 margin-right: 20px;
 646                 font-size: 0;
 647                 float: left;
 648                 width: 245px;
 649
 650             }
 651             .main-story a img{
 652                 height: 245px;
 653                 width: 245px;
 654             }
 655
 656             .main-story .story-text {
 657                 color: #6a6a6a;
 658                 font-size: 12px;
 659             }
 660            .main-story .footer {
 661                 background: #f4f4f4;
 662                 font-size: 14px;
 663            }
 664            .footer .story-headline {
 665                 margin-bottom: 0 5px 5px 5px;
 666                 border-bottom: 1px dashed #dbdbdb;
 667                 height: 25px;
 668                 line-height: 25px;
 669                 width: 245px;
 670            }
 671            .footer .story-title {
 672                 float: left;
 673            }
 674            .footer .story-price {
 675                 float: right;
 676            }
 677             .other-story {
 678                 float: left;
 679                 font-size: 0;
 680                 width: 275px;
 681             }
 682             .other-story ul li {
 683                  display: inline-block;
 684                  margin-right: 20px;
 685                  margin-bottom: 30px;
 686                  height: 125px;
 687                  width: 115px;
 688
 689             }
 690             .other-story ul li .footer {
 691                 margin-top: 0;
 692                  background: #f4f4f4;
 693                  height: 25px;
 694                  font-size: 12px;
 695             }
 696             .other-story ul li .footer a {
 697                  margin-top: 7px;
 698                  height: 12px;
 699                  line-height: 12px;
 700                  text-align: center;
 701             }
 702             .other-story ul li a {
 703                 display: block;
 704             }
 705             .db-dongxi .side ul li .title {
 706                 margin-bottom: 10px;
 707                 font-size: 13px;
 708             }
 709             .db-dongxi .side ul li {
 710                 margin-bottom: 30px;
 711             }
 712             .db-dongxi .side ul li .content {
 713                 overflow: hidden;
 714                 font-size: 12px;
 715                 line-height: 20px;
 716             }
 717             .db-dongxi .side ul li .content  a {
 718                 height: 60px;
 719             }
 720             .db-dongxi .side ul li .content span {
 721                 color: #6a6a6a
 722             }
 723             .db-dongxi .side ul li .content img {
 724                 float: right;
 725                 width: 90px;
 726                 overflow: hidden;
 727             }
 728
 729             /*豆瓣同城*/
 730             .db-events {
 731                 padding-top: 30px;
 732                 overflow: hidden;
 733             }
 734             .events-list ul li {
 735                 display: inline-block;
 736                 width: 248px;
 737                 margin-right: 20px;
 738                 margin-bottom: 30px;
 739
 740             }
 741             .db-events .main .events-list .pic {
 742                 float: left;
 743                 width: 70px;
 744                 height: 90px;
 745             }
 746
 747             .db-events .main .events-list .info  {
 748                 font-size: 12px;
 749             }
 750             .title-tickets {
 751                 display: inline-block;
 752                 border-radius: 3px;
 753                 background: #ff8263;
 754                 color: #fff;
 755             }
 756             .db-events .side ul li {
 757                 margin-bottom: 10px;
 758             }
 759
 760             /*豆瓣市集、一拍一*/
 761             .db-more {
 762                 margin-top: 30px;
 763             }
 764             .db-more ul li{
 765                 display: inline-block;
 766                 padding: 20px;
 767                 height: 60px;
 768                 width: 260px;
 769                 color: #fff;
 770             }
 771             .db-more ul li h1 {
 772                 color: #fff;
 773                 margin-bottom: 10px;
 774             }
 775             .db-more ul li span {
 776                 font-size: 12px;
 777             }
 778            .db-more ul  .db-market {
 779                 margin-right: 10px;
 780                 background: #64c28e;
 781            }
 782            .db-more ul  .db-ypy {
 783                 background: #ff8c8d;
 784            }
 785            .db-extra {
 786                 padding: 30px 0;
 787                 border-bottom: 1px dashed #dbdbdb;
 788            }
 789            .footer-link {
 790                 padding: 30px 0;
 791                  font-size: 12px;
 792                  color: #999;
 793                  overflow: hidden;
 794            }
 795            .footer-link .fleft {
 796                 float: left;
 797            }
 798            .footer-link .fright {
 799                 float: right;
 800                 color: #37a;
 801
 802            }
 803         </style>
 804
 805     </head>
 806     <body>
 807         <!-- 顶部导航开始 -->
 808         <div class="topnav">
 809             <div class="wrapper">
 810                 <h1><a href="http://www.douban.com"></a></h1>
 811                 <div class="search">
 812                     <form>
 813                         <input type="text" placeholder="书籍、电影、音乐" class="search-input" id="search_input">
 814                         <!--[if IE]>
 815                         <label class="label" id="label">书籍、电影、音乐</label>
 816                         <![endif]-->
 817                         <input type="submit" value="搜索" class="search-btn">
 818                     </form>
 819                 </div>
 820                 <div class="topnav-menu">
 821                     <ul>
 822                         <li><a class="lnk-book" href="http://www.douban.com">读书</a></li>
 823                         <li><a class="lnk-movie" href="http://www.douban.com">电影</a></li>
 824                         <li><a class="lnk-music" href="http://www.douban.com">音乐</a></li>
 825                         <li><a class="lnk-group" href="http://www.douban.com">小组</a></li>
 826                         <li><a class="lnk-events" href="http://www.douban.com">同城</a></li>
 827                         <li><a class="lnk-fm" href="http://www.douban.com">豆瓣FM</a></li>
 828                         <li><a class="lnk-dongxi" href="http://www.douban.com">東西</a></li>
 829                     </ul>
 830                 </div>
 831             </div>
 832         </div>
 833         <!-- 登录注册部分 -->
 834         <div class="login-box">
 835             <div class="wrapper">
 836                 <div class="login">
 837                     <form>
 838                         <div class="login-account">
 839                             <input id="login_account" type="text" placeholder="邮箱/手机号" />
 840                             <!--[if IE]>
 841                             <label class="label" id="account_label">书籍、电影、音乐</label>
 842                             <![endif]-->
 843                         </div>
 844                         <div class="login-passwd">
 845                             <input id="login-passwd" type="password" placeholder="密码" />
 846                             <!--[if IE]>
 847                             <label class="label" id="passwd_label">密码</label>
 848                             <![endif]-->
 849                             <a href="#">忘记密码</a>
 850                         </div>
 851                         <div class="login-remember">
 852                             <input type="checkbox" />
 853                             <span>记住我</span>
 854                         </div>
 855                         <div class="login-submit">
 856                             <input type="submit" value="登陆" />
 857                             <a href="#">注册</a>
 858                         </div>
 859                     </form>
 860                 </div>
 861                 <div class="login-side">
 862                     <span></span>
 863                     <p class="login-title">豆瓣</p>
 864                     <p class="login-content">汇集以一亿人的生活趣味</p>
 865                     <div class="app">
 866                         <a class="download" href="#">下载豆瓣客户端</a>
 867                         <div class="app-other" id="app_other">
 868                             <a class="other" href="#">
 869                                 <img src="http://img3.douban.com/f/sns/e5a2f0620be29316fe42d74645e9e63433477331/pics/sns/anony_home/icon_qrcode.png" width="28px" height="28px">
 870                             </a>
 871                             <div class="app-link" id="app_link">
 872                                 <img src="http://img3.douban.com/f/sns/1cad523e614ec4ecb6bf91b054436bb79098a958/pics/sns/anony_home/doubanapp_qrcode.png" width="160px" height="160px">
 873                                 <p>IOS/Android扫码直接下载</p>
 874                             </div>
 875                         </div>
 876
 877                     </div>
 878                 </div>
 879             </div>
 880         </div>
 881         <!-- 热点内容部分 -->
 882         <div class="hot-sns">
 883             <div class="wrapper">
 884                 <div class="hot-ad">
 885                     <a href="#">
 886                         <img src="http://img3.douban.com/view/dale-online/dale_ad/public/6992bc155d9592c.jpg" />
 887                     </a>
 888                 </div>
 889                 <div class="hot-content">
 890                     <div class="hot-main">
 891                         <h2>热点内容 ······</h2>
 892                         <div class="sns-img">
 893                             <ul>
 894                                 <li>
 895                                         <div class="img-head">
 896                                             <a href="#">
 897                                                 <img src="http://img4.douban.com/view/photo/albumcover/public/p2224785439.jpg" />
 898                                             </a>
 899                                         </div>
 900                                         <div class="img-title">
 901                                             <a href="#">年华</a>
 902                                             <span>174张照片</span>
 903                                         </div>
 904
 905                                 </li>
 906                                 <li>
 907
 908                                         <div class="img-head">
 909                                             <a href="#">
 910                                                 <img src="http://img4.douban.com/view/photo/albumcover/public/p2036369337.jpg" />
 911                                             </a>
 912                                         </div>
 913                                         <div class="img-title">
 914                                             <a href="#">Bianca&Liliya の 自然&美人</a>
 915                                             <span>174张照片</span>
 916                                         </div>
 917
 918                                 </li>
 919                                 <li>
 920                                     <div class="img-side">
 921                                         <div class="img-head">
 922                                             <a href="#">
 923                                                 <img src="http://img3.douban.com/view/photo/albumcover/public/p711222773.jpg" />
 924                                             </a>
 925                                         </div>
 926                                         <div class="img-title">
 927                                             <a href="#">【带着画笔去旅行。】 </a>
 928                                             <span>174张照片</span>
 929                                         </div>
 930                                     </div>
 931                                 </li>
 932                                 <li>
 933                                     <div class="img-side">
 934                                         <div class="img-head">
 935                                             <a href="#">
 936                                                 <img src="http://img3.douban.com/view/photo/albumcover/public/p2242167195.jpg" />
 937                                             </a>
 938                                         </div>
 939                                         <div class="img-title">
 940                                             <a href="#">我终于集齐了小浣熊水浒卡</a>
 941                                             <span>174张照片</span>
 942                                         </div>
 943                                     </div>
 944                                 </li>
 945                             </ul>
 946                         </div>
 947                         <div class="sns-text">
 948                             <ul>
 949                                 <li>
 950                                     <a href="#">[Minimalism] 家居设计、整理、收纳 (5):办公室/书房</a>
 951                                     <h3>树树呓涟的日记</h3>
 952                                     <p>看过我过去帖子的同志们都知道,我和老公都是在家工作的,行业很传统,暂时并不能...</p>
 953                                 </li>
 954                                 <li>
 955                                     <a href="#">冰岛游记</a>
 956                                 </li>
 957                                 <li>
 958                                     <a href="#">平底锅芝士蛋糕扫盲贴来了</a>
 959                                 </li>
 960                                 <li>
 961                                     <a href="#">一个人对知识的态度决定了自己的出路和人生高度</a>
 962                                 </li>
 963                                 <li>
 964                                     <a href="#">最简单的申根签证攻略--荷兰签证</a>
 965                                 </li>
 966                                 <li>
 967                                     <a href="#">家装大tips</a>
 968                                 </li>
 969                                 <li>
 970                                     <a href="#">【健身资源帖01-跑步】从零基础到5000米,和能跑5000米后肿么跑(20150519更新)</a>
 971                                 </li>
 972                                 <li>
 973                                     <a href="#">新西兰打工度假旅绘札记(漫画版)</a>
 974                                 </li>
 975                                 <li>
 976                                     <a href="#">矫正盆骨操</a>
 977                                 </li>
 978                                 <li>
 979                                     <a href="#">【健身资源帖02-瘦身塑形】Beachbody的21 Day Fix 2014(视频+课表),瘦身塑形</a>
 980                                 </li>
 981                             </ul>
 982                         </div>
 983                     </div>
 984                     <div class="sns-activity">
 985                         <div class="act-app">
 986                             <a href="#">
 987                                 <img src="http://t.douban.com/img/files/file-1431585796.jpg" width="265px">
 988                             </a>
 989                         </div>
 990                         <div class="act-main">
 991                             <div class="act-title">
 992                                 <h2>线上活动</h2>
 993                                 <a href="#">更多</a>
 994                             </div>
 995                             <div class="act-text">
 996                                 <ul>
 997                                     <li>
 998                                         <a href="#">半张脸晒书大赛,露出你最美丽的眼睛</a>
 999                                         <p class="act-time">时间:5月14日 - 6月16日>
1000                                         <p class="act-num">1011人参加</p>
1001                                     </li>
1002                                     <li>
1003                                         <a href="#">把你喜欢的友邻照片放上来</a>
1004                                         <p class="act-time">时间:5月13日 - 7月12日</p>
1005                                         <p class="act-num">57人参加</p>
1006                                     </li>
1007                                     <li>
1008                                         <a href="#">【有奖征集】说说你心里最放不下的念头</a>
1009                                         <p class="act-time">时间:4月1日 - 5月31日</p>
1010                                         <p class="act-num">1303人参加</p>
1011                                     </li>
1012                                     <li>
1013                                         <a href="#">品牌 天生创想派 创艺生活家</a>
1014                                         <p class="act-time">时间:4月13日-6月30日 </p>
1015                                         <p class="act-num">1126人参加</p>
1016                                     </li>
1017                                 </ul>
1018                             </div>
1019                         </div>
1020                     </div>
1021                 </div>
1022             </div>
1023         </div>
1024         <!-- 电影部分 -->
1025         <div class="db-movie">
1026             <div class="wrapper">
1027                 <div class="nav-side">
1028                     <h1>电影</h1>
1029                     <ul>
1030                         <li><a href="#">影讯&购票</a></li>
1031                         <li class="new"><a  href="#">选电影</a>
1032                             <img src="http://img3.douban.com/pics/new_menu.gif">
1033                         </li>
1034                         <li><a href="#">电视剧</a></li>
1035                         <li><a href="#">排行榜</a></li>
1036                         <li><a href="#">分类</a></li>
1037                         <li><a href="#">影评</a></li>
1038                         <li><a href="#">预告片</a></li>
1039                     </ul>
1040                 </div>
1041                 <div class="side">
1042                     <div class="side-list">
1043                         <div class="act-title">
1044                             <h2>正在热映</h2>
1045                             <a href="#">更多</a>
1046                         </div>
1047                         <div class="side-tags">
1048                             <a href="#">爱情</a>
1049                             <a href="#">喜剧</a>
1050                             <a href="#">动画</a>
1051                             <a href="#">科幻</a>
1052                             <a href="#">剧情</a>
1053                             <a href="#">动作</a>
1054                             <a href="#">经典</a>
1055                             <a href="#">青春</a>
1056                             <a href="#">悬疑</a>
1057                             <a href="#">犯罪</a>
1058                             <a href="#">惊悚</a>
1059                             <a href="#">文艺</a>
1060                             <a href="#">纪录片</a>
1061                             <a href="#">离职</a>
1062                             <a href="#">搞笑</a>
1063                             <a href="#">恐怖</a>
1064                             <a href="#">战争</a>
1065                             <a href="#">短片</a>
1066                             <a href="#">美国</a>
1067                             <a href="#">日本</a>
1068                             <a href="#">香港</a>
1069                             <a href="#">爱情</a>
1070                             <a href="#">爱情</a>
1071                             <a href="#">爱情</a>
1072                             <a href="#">爱情</a>
1073                             <a href="#">爱情</a>
1074                             <a href="#">爱情</a>
1075                             <a href="#">爱情</a>
1076                         </div>
1077                     </div>
1078                     <div class="side-hot">
1079                         <div class="act-title">
1080                             <h2>正在热映</h2>
1081                             <a href="#">更多</a>
1082                         </div>
1083                         <ul>
1084                             <li>
1085                                 <span>1.</span>
1086                                 <a herf="#">机械师</a>
1087                             </li>
1088                             <li>
1089                                 <span>2.</span>
1090                                 <a herf="#">军中乐园</a>
1091                             </li>
1092                             <li>
1093                                 <span>3.</span>
1094                                 <a herf="#">机械师</a>
1095                             </li>
1096                             <li>
1097                                 <span>4.</span>
1098                                 <a herf="#">海绵宝宝历险记:海绵出水</a>
1099                             </li>
1100                             <li>
1101                                 <span>5.</span>
1102                                 <a herf="#">我是谁:没有绝对安全的系统</a>
1103                             </li>
1104                             <li>
1105                                 <span>6.</span>
1106                                 <a herf="#">机械师</a>
1107                             </li>
1108                             <li>
1109                                 <span>7.</span>
1110                                 <a herf="#">寄生兽</a>
1111                             </li>
1112                             <li>
1113                                 <span>8.</span>
1114                                 <a herf="#">国际市场</a>
1115                             </li>
1116                             <li>
1117                                 <span>9.</span>
1118                                 <a herf="#">小森林 夏秋篇</a>
1119                             </li>
1120                             <li>
1121                                 <span>10.</span>
1122                                 <a herf="#">王牌特工:特工学院</a>
1123                             </li>
1124                         </ul>
1125                     </div>
1126                 </div>
1127                 <div class="main">
1128                     <div class="act-title">
1129                         <h2>正在热映</h2>
1130                         <a href="#">更多</a>
1131                     </div>
1132                     <div class="main-list">
1133                         <ul>
1134                             <li>
1135                                 <a href="#"><img src="http://img4.douban.com/view/movie_poster_cover/spst/public/p2242653338.jpg" /></a>
1136                                 <a class="main-list-title">明日世界</a>
1137                                 <div class="rating">
1138                                     <i class="allstar45"></i>
1139                                     <span>8.4<span>
1140                                 </div>
1141                                 <a class="main-list-btn" href="#">选座购票</a>
1142                             </li>
1143                             <li>
1144                                 <a href="#"><img src="http://img3.douban.com/view/movie_poster_cover/spst/public/p2244958975.jpg" /></a>
1145                                 <a class="main-list-title">明日世界</a>
1146                                 <div class="rating">
1147                                     <i class="allstar45"></i>
1148                                     <span>8.4<span>
1149                                 </div>
1150                                 <a class="main-list-btn" href="#">选座购票</a>
1151                             </li>
1152                              <li>
1153                                 <a href="#"><img src="http://img3.douban.com/view/movie_poster_cover/spst/public/p2237747953.jpg" /></a>
1154                                 <a class="main-list-title">明日世界</a>
1155                                 <div class="rating">
1156                                     <i class="allstar25"></i>
1157                                     <span>6.4<span>
1158                                 </div>
1159                                 <a class="main-list-btn" href="#">选座购票</a>
1160                             </li>
1161                              <li>
1162                                 <a href="#"><img src="http://img3.douban.com/view/movie_poster_cover/spst/public/p2243803873.jpg" /></a>
1163                                 <a class="main-list-title">明日世界</a>
1164                                 <div class="rating">
1165                                     <i class="allstar25"></i>
1166                                     <span>6.4<span>
1167                                 </div>
1168                                 <a class="main-list-btn" href="#">选座购票</a>
1169                             </li>
1170                              <li>
1171                                 <a href="#"><img src="http://img3.douban.com/view/movie_poster_cover/spst/public/p2243601202.jpg" /></a>
1172                                 <a class="main-list-title">明日世界</a>
1173                                 <div class="rating">
1174                                     <i class="allstar20"></i>
1175                                     <span>5.4<span>
1176                                 </div>
1177                                 <a class="main-list-btn" href="#">选座购票</a>
1178                             </li>
1179                              <li>
1180                                 <a href="#"><img src="http://img4.douban.com/view/movie_poster_cover/spst/public/p2245163589.jpg" /></a>
1181                                 <a class="main-list-title">明日世界</a>
1182                                 <div class="rating">
1183                                     <i class="allstar25"></i>
1184                                     <span>6.4<span>
1185                                 </div>
1186                                 <a class="main-list-btn" href="#">选座购票</a>
1187                             </li>
1188                              <li>
1189                                 <a href="#"><img src="http://img3.douban.com/view/movie_poster_cover/spst/public/p2243355934.jpg" /></a>
1190                                 <a class="main-list-title">明日世界</a>
1191                                 <div class="rating">
1192                                     <i class="allstar35"></i>
1193                                     <span>7.4<span>
1194                                 </div>
1195                                 <a class="main-list-btn" href="#">选座购票</a>
1196                             </li>
1197                             <li>
1198                                 <a href="#"><img src="http://img3.douban.com/view/movie_poster_cover/spst/public/p2239658370.jpg" /></a>
1199                                 <a class="main-list-title">明日世界</a>
1200                                 <div class="rating">
1201                                     <i class="allstar45"></i>
1202                                     <span>8.4<span>
1203                                 </div>
1204                                 <a class="main-list-btn" href="#">选座购票</a>
1205                             </li>
1206                         </ul>
1207                     </div>
1208                 </div>
1209
1210             </div>
1211         </div>
1212         <!-- 小组部分 -->
1213         <div class="db-group">
1214             <div class="wrapper">
1215                 <div class="nav-side">
1216                     <h1>小组</h1>
1217                     <ul>
1218                         <li><a href="#">精选</a></li>
1219                         <li><a href="#">文化</a></li>
1220                         <li><a href="#">行摄</a></li>
1221                         <li><a href="#">娱乐</a></li>
1222                         <li><a href="#">时尚</a></li>
1223                         <li><a href="#">生活</a></li>
1224                         <li><a href="#">科技</a></li>
1225                     </ul>
1226                 </div>
1227                 <div class="side">
1228                     <div class="side-list">
1229                         <div class="act-title">
1230                             <h2>小组分类</h2>
1231                             <a href="#">更多</a>
1232                         </div>
1233                             <ul>
1234                                 <li>
1235                                     <div class="list-head">
1236                                         <a href="#">兴趣»</a>
1237                                     </div>
1238                                     <div class="list-links">
1239                                         <a href="#">旅行</a>
1240                                         <a href="#">摄影</a>
1241                                         <a href="#">影视</a>
1242                                         <a href="#">音乐</a>
1243                                         <a href="#">文学</a>
1244                                         <a href="#">游戏</a>
1245                                         <a href="#">动漫</a>
1246                                         <a href="#">运动</a>
1247                                         <a href="#">西区</a>
1248                                         <a href="#">桌游</a>
1249                                         <a href="#">怪癖</a>
1250                                     </div>
1251                                 </li>
1252                                 <li>
1253                                     <div class="list-head">
1254                                         <a href="#">生活»</a>
1255                                     </div>
1256                                     <div class="list-links">
1257                                         <a href="#">健康</a>
1258                                         <a href="#">美食</a>
1259                                         <a href="#">美容</a>
1260                                         <a href="#">化妆</a>
1261                                         <a href="#">护肤</a>
1262                                         <a href="#">服饰</a>
1263                                         <a href="#">公益</a>
1264                                         <a href="#">家庭</a>
1265                                         <a href="#">育儿</a>
1266                                         <a href="#">汽车</a>
1267                                     </div>
1268                                 </li>
1269                                 <li>
1270                                     <div class="list-head">
1271                                         <a href="#">购物»</a>
1272                                     </div>
1273                                     <div class="list-links">
1274                                         <a href="#">淘宝</a>
1275                                         <a href="#">二手</a>
1276                                         <a href="#">团购</a>
1277                                         <a href="#">数码</a>
1278                                         <a href="#">品牌</a>
1279                                         <a href="#">文具</a>
1280                                     </div>
1281                                 </li>
1282                                 <li>
1283                                     <div class="list-head">
1284                                         <a href="#">社会»</a>
1285                                     </div>
1286                                     <div class="list-links">
1287                                         <a href="#">求职</a>
1288                                         <a href="#">租房</a>
1289                                         <a href="#">励志</a>
1290                                         <a href="#">留学</a>
1291                                         <a href="#">出国</a>
1292                                         <a href="#">理财</a>
1293                                         <a href="#">传媒</a>
1294                                         <a href="#">创业</a>
1295                                         <a href="#">考试</a>
1296                                     </div>
1297                                 </li>
1298                                 <li>
1299                                     <div class="list-head">
1300                                         <a href="#">艺术»</a>
1301                                     </div>
1302                                     <div class="list-links">
1303                                         <a href="#">设计</a>
1304                                         <a href="#">手工</a>
1305                                         <a href="#">展览</a>
1306                                         <a href="#">曲艺</a>
1307                                         <a href="#">舞蹈</a>
1308                                         <a href="#">雕塑</a>
1309                                         <a href="#">纹身</a>
1310                                     </div>
1311                                 </li>
1312                                 <li>
1313                                     <div class="list-head">
1314                                         <a href="#">学术»</a>
1315                                     </div>
1316                                     <div class="list-links">
1317                                         <a href="#">人文</a>
1318                                         <a href="#">社科</a>
1319                                         <a href="#">自然</a>
1320                                         <a href="#">建筑</a>
1321                                         <a href="#">国学</a>
1322                                         <a href="#">语言</a>
1323                                         <a href="#">宗教</a>
1324                                         <a href="#">哲学</a>
1325                                         <a href="#">软件</a>
1326                                         <a href="#">硬件</a>
1327                                         <a href="#">互联网</a>
1328                                     </div>
1329                                 </li>
1330                                 <li>
1331                                     <div class="list-head">
1332                                         <a href="#">情感»</a>
1333                                     </div>
1334                                     <div class="list-links">
1335                                         <a href="#">恋爱</a>
1336                                         <a href="#">心情</a>
1337                                         <a href="#">心理学</a>
1338                                         <a href="#">星座</a>
1339                                         <a href="#">文学</a>
1340                                         <a href="#">塔罗</a>
1341                                         <a href="#">LES</a>
1342                                         <a href="#">GAY</a>
1343                                     </div>
1344                                 </li>
1345                                 <li>
1346                                     <div class="list-head">
1347                                         <a href="#">闲聊»</a>
1348                                     </div>
1349                                     <div class="list-links">
1350                                         <a href="#">吐槽</a>
1351                                         <a href="#">笑话</a>
1352                                         <a href="#">直播</a>
1353                                         <a href="#">八卦</a>
1354                                         <a href="#">发泄</a>
1355                                     </div>
1356                                 </li>
1357                             </ul>
1358
1359                         </ul>
1360                     </div>
1361                 </div>
1362                 <div class="main">
1363                     <div class="act-title">
1364                         <h2>热门小组</h2>
1365                         <a href="#">更多</a>
1366                     </div>
1367                     <div class="group-list">
1368                         <ul>
1369                             <li>
1370                                 <div class="pic">
1371                                     <a href="#"><img src="http://img3.douban.com/icon/g131409-1.jpg" /></a>
1372                                 </div>
1373                                 <div class="pic-title">
1374                                     <a href="#">我更恨前男友</a>
1375                                     <p>7737 个成员</p>
1376                                 </div>
1377                             </li>
1378                             <li>
1379                                 <div class="pic">
1380                                     <a href="#"><img src="http://img3.douban.com/icon/g126357-1.jpg" /></a>
1381                                 </div>
1382                                 <div class="pic-title">
1383                                     <a href="#">我恨前女友</a>
1384                                     <p>7737 个成员</p>
1385                                 </div>
1386                             </li>
1387                             <li>
1388                                 <div class="pic">
1389                                     <a href="#"><img src="http://img3.douban.com/icon/g114355-1.jpg" /></a>
1390                                 </div>
1391                                 <div class="pic-title">
1392                                     <a href="#">八卦来了|三羊开泰</a>
1393                                     <p>7737 个成员</p>
1394                                 </div>
1395                             </li>
1396                             <li>
1397                                 <div class="pic">
1398                                     <a href="#"><img src="http://img3.douban.com/icon/g51464-45.jpg" /></a>
1399                                 </div>
1400                                 <div class="pic-title">
1401                                     <a href="#">狂愛TVB</a>
1402                                     <p>7737 个成员</p>
1403                                 </div>
1404                             </li>
1405                             <li>
1406                                 <div class="pic">
1407                                     <a href="#"><img src="http://img3.douban.com/icon/g70612-4.jpg" /></a>
1408                                 </div>
1409                                 <div class="pic-title">
1410                                     <a href="#">我们是学术gay(LGBTQ)</a>
1411                                     <p>7737 个成员</p>
1412                                 </div>
1413                             </li>
1414                             <li>
1415                                 <div class="pic">
1416                                     <a href="#"><img src="http://img3.douban.com/icon/g22692-14.jpg" /></a>
1417                                 </div>
1418                                 <div class="pic-title">
1419                                     <a href="#">上班这件事</a>
1420                                     <p>7737 个成员</p>
1421                                 </div>
1422                             </li>
1423                             <li>
1424                                 <div class="pic">
1425                                     <a href="#"><img src="http://img3.douban.com/icon/g131409-1.jpg" /></a>
1426                                 </div>
1427                                 <div class="pic-title">
1428                                     <a href="#">非正常资源统计中心↑²</a>
1429                                     <p>7737 个成员</p>
1430                                 </div>
1431                             </li>
1432                             <li>
1433                                 <div class="pic">
1434                                     <a href="#"><img src="http://img3.douban.com/icon/g116837-3.jpg" /></a>
1435                                 </div>
1436                                 <div class="pic-title">
1437                                     <a href="#">没有厨房我也爱做饭</a>
1438                                     <p>7737 个成员</p>
1439                                 </div>
1440                             </li>
1441                             <li>
1442                                 <div class="pic">
1443                                     <a href="#"><img src="http://img3.douban.com/icon/g41454-2.jpg" /></a>
1444                                 </div>
1445                                 <div class="pic-title">
1446                                     <a href="#">课文回忆录</a>
1447                                     <p>7737 个成员</p>
1448                                 </div>
1449                             </li>
1450                             <li>
1451                                 <div class="pic">
1452                                     <a href="#"><img src="http://img3.douban.com/icon/g91671-5.jpg" /></a>
1453                                 </div>
1454                                 <div class="pic-title">
1455                                     <a href="#">像一位孤独的诗人</a>
1456                                     <p>7737 个成员</p>
1457                                 </div>
1458                             </li>
1459                             <li>
1460                                 <div class="pic">
1461                                     <a href="#"><img src="http://img3.douban.com/icon/g17574-1.jpg" /></a>
1462                                 </div>
1463                                 <div class="pic-title">
1464                                     <a href="#">我想开书店</a>
1465                                     <p>7737 个成员</p>
1466                                 </div>
1467                             </li>
1468                             <li>
1469                                 <div class="pic">
1470                                     <a href="#"><img src="http://img3.douban.com/icon/g70612-4.jpg" /></a>
1471                                 </div>
1472                                 <div class="pic-title">
1473                                     <a href="#">我想开书店</a>
1474                                     <p>7737 个成员</p>
1475                                 </div>
1476                             </li>
1477                         </ul>
1478                     </div>
1479                 </div>
1480             </div>
1481         </div>
1482         <!-- 读书部分 -->
1483         <div class="db-book skin">
1484             <div class="wrapper">
1485                 <div class="nav-side">
1486                     <h1>读书</h1>
1487                     <ul>
1488                         <li><a href="#">分类浏览</a></li>
1489                         <li class="new"><a href="#">阅读</a>
1490                             <img src="http://img3.douban.com/pics/new_menu.gif">
1491                         </li>
1492                         <li><a href="#">作者</a></li>
1493                         <li><a href="#">书评</a></li>
1494                         <li><a href="#">分类</a></li>
1495                         <li><a href="#">购书单</a></li>
1496                         <li>
1497                             <a href="#">
1498                                 <i class="app-icon"></i>
1499                             </a>
1500                             <a href="#">豆瓣阅读</a>
1501                         </li>
1502                     </ul>
1503                 </div>
1504                 <div class="side">
1505                     <div class="side-list">
1506                         <div class="act-title">
1507                             <h2>热门标签</h2>
1508                             <a href="#">更多</a>
1509                         </div>
1510                         <div class="side-hot">
1511                             <ul>
1512                                 <li>
1513                                     <span>[文学]</span>
1514                                     <a herf="#">小说</a>
1515                                     <a herf="#">随笔</a>
1516                                     <a herf="#">散文</a>
1517                                     <a herf="#">日本文学</a>
1518                                     <a herf="#">童话</a>
1519                                     <a herf="#">诗歌</a>
1520                                     <a herf="#">名著</a>
1521                                     <a herf="#">港台</a>
1522                                     <a herf="#">更多</a>
1523                                 </li>
1524                                 <li>
1525                                     <span>流行</span>
1526                                     <a herf="#">漫画</a>
1527                                     <a herf="#">绘本</a>
1528                                     <a herf="#">推理</a>
1529                                     <a herf="#">青春</a>
1530                                     <a herf="#">言情</a>
1531                                     <a herf="#">科幻</a>
1532                                     <a herf="#">武侠</a>
1533                                     <a herf="#">奇幻</a>
1534                                     <a herf="#">更多</a>
1535                                 </li>
1536                                 <li>
1537                                     <span>文化</span>
1538                                     <a herf="#">历史</a>
1539                                     <a herf="#">哲学</a>
1540                                     <a herf="#">传记</a>
1541
1542                                     <a herf="#">设计</a>
1543                                     <a herf="#">建筑</a>
1544                                     <a herf="#">电影</a>
1545                                     <a herf="#">回忆录</a>
1546                                     <a herf="#">家居</a>
1547                                     <a herf="#">更多</a>
1548                                 </li>
1549                                 <li>
1550                                     <span>生活</span>
1551                                     <a herf="#">旅行</a>
1552                                     <a herf="#">励志</a>
1553                                     <a herf="#">职场</a>
1554                                     <a herf="#">美食</a>
1555                                     <a herf="#">教育</a>
1556                                     <a herf="#">灵修</a>
1557                                     <a herf="#">健康</a>
1558                                     <a herf="#">家居</a>
1559                                     <a herf="#">更多</a>
1560                                 </li>
1561                                 <li>
1562                                     <span>经管</span>
1563                                     <a herf="#">经济学</a>
1564                                     <a herf="#">管理</a>
1565                                     <a herf="#">金融</a>
1566                                     <a herf="#">商业</a>
1567                                     <a herf="#">营销</a>
1568                                     <a herf="#">理财</a>
1569                                     <a herf="#">股票</a>
1570                                     <a herf="#">企业史</a>
1571                                     <a herf="#">更多</a>
1572                                 </li>
1573                                 <li>
1574                                     <span>科技</span>
1575                                     <a herf="#">科普</a>
1576                                     <a herf="#">互联网</a>
1577                                     <a herf="#">编程</a>
1578                                     <a herf="#">交互设计</a>
1579                                     <a herf="#">算法</a>
1580                                     <a herf="#">通信</a>
1581                                     <a herf="#">神经网络</a>
1582                                     <a herf="#">更多</a>
1583                                 </li>
1584                             </ul>
1585                         </div>
1586                     </div>
1587                 </div>
1588                 <div class="main">
1589                     <div class="">
1590                         <div class="act-title">
1591                         <h2>新书速递</h2>
1592                         <a href="#">更多</a>
1593                     </div>
1594                     <div class="main-list">
1595                         <ul>
1596                             <li>
1597                                 <a href="#"><img src="http://img6.douban.com/mpic/s28059304.jpg" /></a>
1598                                 <a class="main-list-title">和喜欢的一切在</a>
1599                                 <div class="author">
1600                                     一个工作室
1601                                 </div>
1602                                 <a class="main-list-btn" href="#">免费试读</a>
1603                             </li>
1604                             <li>
1605                                 <a href="#"><img src="http://img3.douban.com/view/ark_article_cover/large/public/9949100.jpg?v=1433238228.0" /></a>
1606                                 <a class="main-list-title">支付战争</a>
1607                                 <div class="author">
1608                                     〔美〕埃里克
1609                                 </div>
1610                                 <a class="main-list-btn" href="#">选座购票</a>
1611                             </li>
1612                              <li>
1613                                 <a href="#"><img src="http://img3.douban.com/view/ark_article_cover/large/public/10065363.jpg?v=1432820708.0" /></a>
1614                                 <a class="main-list-title">多多,爸爸一直</a>
1615                                 <div class="author">
1616                                     肉腾腾
1617                                 </div>
1618                                 <a class="main-list-btn" href="#">免费试读</a>
1619                             </li>
1620                              <li>
1621                                 <a href="#"><img src="http://img3.douban.com/view/ark_article_cover/large/public/9372145.jpg?v=1429621724.0" /></a>
1622                                 <a class="main-list-title"><div class="author">
1623                                     〔美〕埃里克
1624                                 </div></a>
1625                                 <div class="author">
1626                                     肉腾腾
1627                                 </div>
1628                                 <a class="main-list-btn" href="#">免费试读</a>
1629                             </li>
1630                         </ul>
1631                     </div>
1632                     </div>
1633                     <div class="">
1634                         <div class="act-title">
1635                         <h2>原创数字作品</h2>
1636                         <a href="#">更多</a>
1637                     </div>
1638                     <div class="main-list">
1639                         <ul>
1640                              <li>
1641                                 <a href="#"><img src="http://img3.douban.com/view/ark_article_cover/large/public/8889550.jpg?v=1429264536.0" /></a>
1642                                 <a class="main-list-title">我不知道该如何</a>
1643                                 <div class="author">
1644                                     徐晚晴
1645                                 </div>
1646                                 <div class="price">
1647                                     1.99元
1648                                 </div>
1649                                 <a class="main-list-btn" href="#">免费试读</a>
1650                             </li>
1651                              <li>
1652                                 <a href="#"><img src="http://img3.douban.com/view/ark_article_cover/large/public/9519908.jpg?v=1431315870.0" /></a>
1653                                 <a class="main-list-title">去地狱玩好吗?</a>
1654                                 <div class="author">
1655                                     照人
1656                                 </div>
1657                                 <div class="price">
1658                                     1.99元
1659                                 </div>
1660                                 <a class="main-list-btn" href="#">免费试读</a>
1661                             </li>
1662                              <li>
1663                                 <a href="#"><img src="http://img3.douban.com/view/ark_article_cover/large/public/7632904.jpg?v=1418622775.0" /></a>
1664                                 <a class="main-list-title">情感问答 2</a>
1665                                 <div class="author">
1666                                     菠菜
1667                                 </div>
1668                                 <div class="price">
1669                                     1.99元
1670                                 </div>
1671                                 <a class="main-list-btn" href="#">免费试读</a>
1672                             </li>
1673                             <li>
1674                                 <a href="#"><img src="http://img3.douban.com/view/ark_article_cover/large/public/228662.jpg?v=1428401858.0" /></a>
1675                                 <a class="main-list-title">夏日便当·修订</a>
1676                                 <div class="author">
1677                                     吉井忍
1678                                 </div>
1679                                 <div class="price">
1680                                     1.99元
1681                                 </div>
1682                                 <a class="main-list-btn" href="#">免费试读</a>
1683                             </li>
1684                         </ul>
1685                     </div>
1686                     </div>
1687                 </div>
1688             </div>
1689         </div>
1690         <!-- 音乐部分 -->
1691         <div class="db-music">
1692             <div class="wrapper">
1693                 <div class="nav-side">
1694                     <h1>音乐</h1>
1695                     <ul>
1696                         <li><a href="#">音乐人</a></li>
1697                         <li><a href="#">金羊毛计划</a></li>
1698                         <li><a href="#">歌单</a></li>
1699                         <li><a href="#">排行榜</a></li>
1700                         <li><a href="#">乐评</a></li>
1701                         <li><a href="#">分类浏览</a></li>
1702                         <li><a href="#">豆瓣FM</a></li>
1703                         <li class="new">
1704                             <a href="#">阿比鹿2014</a>
1705                             <img src="http://img3.douban.com/pics/new_menu.gif">
1706                         </li>
1707                         <li class="app-icon-fm">
1708                             <a href="#">
1709                                 <i class="app-icon"></i>
1710                             </a>
1711                             <a href="#">豆瓣FM</a>
1712                         </li>
1713                         <li class="app-icon-artists">
1714                             <a href="#">
1715                                 <i class="app-icon"></i>
1716                             </a>
1717                             <a href="#">豆瓣音乐人</a>
1718                         </li>
1719                     </ul>
1720                 </div>
1721                 <div class="side">
1722                     <div class="side-list">
1723                         <div class="act-title">
1724                             <h2>本周流行音乐人</h2>
1725                             <a href="#">更多</a>
1726                         </div>
1727                             <ul>
1728                                 <li>
1729                                     <div class="pic">
1730                                         <a href="#"><img src="http://img3.douban.com/view/site/small/public/d30002daad8b242.jpg" /></a>
1731                                     </div>
1732                                     <div class="pic-title">
1733                                         <a href="#">放肆的肆</a>
1734                                         <p>流派: 流行 Pop </p>
1735                                         <p>88144人关注</p>
1736                                     </div>
1737                                 </li>
1738                                 <li>
1739                                     <div class="pic">
1740                                         <a href="#"><img src="http://img3.douban.com/view/site/small/public/bc7824d51453712.jpg" /></a>
1741                                     </div>
1742                                     <div class="pic-title">
1743                                         <a href="#">金玟岐_Vanessa</a>
1744                                         <p>流派: 流行 Pop</p>
1745                                         <p>53831人关注</p>
1746                                     </div>
1747                                 </li>
1748                                 <li>
1749                                     <div class="pic">
1750                                         <a href="#"><img src="http://img3.douban.com/view/site/small/public/db91ba58f8b4334.jpg" /></a>
1751                                     </div>
1752                                     <div class="pic-title">
1753                                         <a href="#">fatshady</a>
1754                                         <p>流派: 说唱 Rap </p>
1755                                         <p>15876人关注</p>
1756                                     </div>
1757                                 </li>
1758                                 <li>
1759
1760                                     <div class="pic">
1761                                         <a href="#"><img src="http://img4.douban.com/view/site/small/public/281d3f7063f82f6.jpg" /></a>
1762                                     </div>
1763                                     <div class="pic-title">
1764                                         <a href="#">林二汶 Eman Lam</a>
1765                                         <p>流派: 流行 Pop</p>
1766                                         <p>374人关注</p>
1767                                     </div>
1768                                 </li>
1769                                 <li>
1770                                     <div class="pic">
1771                                         <a href="#"><img src="http://img3.douban.com/view/site/small/public/5644bf226981f90.jpg" /></a>
1772                                     </div>
1773                                     <div class="pic-title">
1774                                         <a href="#">秦浅</a>
1775                                         <p>流派: 民谣 Folk </p>
1776                                         <p>1055人关注</p>
1777                                     </div>
1778                                 </li>
1779                             </ul>
1780                     </div>
1781
1782
1783                 </div>
1784                 <div class="main">
1785                     <div>
1786                          <div class="act-title">
1787                             <h2>豆瓣新碟榜</h2>
1788                             <a href="#">更多</a>
1789                          </div>
1790                         <div class="main-list">
1791                             <ul>
1792                                 <li>
1793                                     <a href="#"><img src="http://img3.douban.com/spic/s28093942.jpg"/></a>
1794                                     <a class="main-list-title">1. If You Were The Only Girl In The World</a>
1795                                     <a  href="#">李宇春</a>
1796                                     <div class="rating">
1797                                         <i class="allstar45"></i>
1798                                         <span>8.4<span>
1799                                     </div>
1800
1801                                 </li>
1802                                 <li>
1803                                     <a href="#"><img src="http://img3.douban.com/spic/s28092472.jpg" /></a>
1804                                     <a class="main-list-title">2. 所有下雨天</a>
1805                                     <a href="#">薛凯琪</a>
1806                                     <div class="rating">
1807                                         <i class="allstar45"></i>
1808                                         <span>8.4<span>
1809                                     </div>
1810
1811                                 </li>
1812                                  <li>
1813                                     <a href="#"><img src="http://img3.douban.com/spic/s28068382.jpg" /></a>
1814                                     <a class="main-list-title">3. 清平调</a>
1815                                     <a href="#">王菲 邓丽君</a>
1816                                     <div class="rating">
1817                                         <i class="allstar25"></i>
1818                                         <span>6.4<span>
1819                                     </div>
1820                                 </li>
1821                                  <li>
1822                                     <a href="#"><img src="http://img3.douban.com/spic/s28007321.jpg" /></a>
1823                                     <a class="main-list-title">4. How Big, How Blue, How Beautiful</a>
1824                                     <a  href="#">Florence + The Machine</a>
1825                                     <div class="rating">
1826                                         <i class="allstar25"></i>
1827                                         <span>6.4<span>
1828                                     </div>
1829
1830                                 </li>
1831                                  <li>
1832                                     <a href="#"><img src="http://img4.douban.com/spic/s28043838.jpg" /></a>
1833                                     <a class="main-list-title">5. 吹万</a>
1834                                     <a  href="#">Chui Wan 吹万</a>
1835                                     <div class="rating">
1836                                         <i class="allstar20"></i>
1837                                         <span>5.4<span>
1838                                     </div>
1839
1840                                 </li>
1841                                  <li>
1842                                     <a href="#"><img src="http://img3.douban.com/spic/s28036363.jpg" /></a>
1843                                     <a class="main-list-title">6. In Colour</a>
1844                                     <a  href="#">Jamie XX</a>
1845                                     <div class="rating">
1846                                         <i class="allstar25"></i>
1847                                         <span>6.4<span>
1848                                     </div>
1849
1850                                 </li>
1851                                  <li>
1852                                     <a href="#"><img src="http://img3.douban.com/spic/s28036363.jpg" /></a>
1853                                     <a class="main-list-title">7. MADE SERIES [M]</a>
1854                                     <a href="#">BIGBANG ??</a>
1855                                     <div class="rating">
1856                                         <i class="allstar35"></i>
1857                                         <span>7.4<span>
1858                                     </div>
1859
1860                                 </li>
1861                                 <li>
1862                                     <a href="#"><img src="http://img4.douban.com/spic/s28049579.jpg" /></a>
1863                                     <a class="main-list-title">8. 青空の下、キミのとなり 【通常盤】</a>
1864                                     <a href="#">嵐</a>
1865                                     <div class="rating">
1866                                         <i class="allstar45"></i>
1867                                         <span>8.4<span>
1868                                     </div>
1869                                 </li>
1870                             </ul>
1871                         </div>
1872                     </div>
1873                     <div>
1874                         <div class="act-title">
1875                             <h2>热门歌单</h2>
1876                             <a href="#">更多</a>
1877                          </div>
1878                          <div class="main-list">
1879                             <ul>
1880                                 <li>
1881                                     <a href="#"><img src="http://img3.douban.com/img/songlist/large/1609410-1.jpg"/></a>
1882                                     <span>sad song<span>
1883                                 </li>
1884                                 <li>
1885                                     <a href="#"><img src="http://img3.douban.com/img/songlist/large/1545280-2.jpg"/></a>
1886                                     <span>打动我的中国民谣<span>
1887                                 </li>
1888                                 <li>
1889                                     <a href="#"><img src="http://img3.douban.com/img/songlist/large/1377770-1.jpg"/></a>
1890                                     <span>粤语残片(二)<span>
1891                                 </li>
1892                                 <li>
1893                                     <a href="#"><img src="http://img3.douban.com/img/songlist/large/320375-1.jpg"/></a>
1894                                     <span>王菲&窦唯<span>
1895                                 </li>
1896                             </ul>
1897                          </div>
1898                     </div>
1899                 </div>
1900
1901
1902             </div>
1903         </div>
1904         <!-- 东西部分 -->
1905         <div class="db-dongxi skin">
1906             <div class="wrapper">
1907                 <div class="nav-side">
1908                     <h1>东西</h1>
1909                     <ul>
1910                         <li><a href="#">女装</a></li>
1911                         <li><a href="#">女鞋</a></li>
1912                         <li><a href="#">男装</a></li>
1913                         <li><a href="#">男鞋</a></li>
1914                         <li><a href="#">箱包</a></li>
1915                         <li><a href="#">家居服饰</a></li>
1916                         <li><a href="#">美妆</a></li>
1917                         <li><a href="#">美食</a></li>
1918                         <li><a href="#">数码</a></li>
1919                         <li><a href="#">户外/运动</a></li>
1920                         <li><a href="#">礼物</a></li>
1921                         <li><a href="#">日用百货</a></li>
1922                         <li><a href="#">海淘</a></li>
1923                         <li class="weibo">
1924                             <a href="#"><img src="http://img3.douban.com/pics/dongxi/weibo_dongxi.png"/></a>
1925                             <a href="#">关注我们</a>
1926                         </li>
1927                     </ul>
1928                 </div>
1929                 <div class="side">
1930                     <div class="side-list">
1931                         <div class="act-title">
1932                             <h2>本周流行音乐人</h2>
1933                             <a href="#">更多</a>
1934                         </div>
1935                             <ul>
1936                                 <li>
1937                                     <div class="title">
1938                                         <a href="#">回购~回购~回购才是真爱!请看我真爱!</a>
1939                                     </div>
1940                                     <div class="content">
1941                                             <a href="#">
1942                                                 <img src="http://img3.douban.com/view/commodity_review/large/public/p200552490.jpg"/>
1943                                             </a>
1944                                             <span>
1945                                                 空瓶就算真爱了吗?不一定哦~。 Lulu也空瓶过不少产品,但是却没有再用下去的勇气。。。...
1946                                             </span>
1947                                     </div>
1948                                 </li>
1949                                 <li>
1950                                     <div class="title">
1951                                         <a href="#">一个吃货在首尔的夏日护肤记</a>
1952                                     </div>
1953                                     <div class="content">
1954                                             <a href="#">
1955                                                 <img src="http://img3.douban.com/view/commodity_review/large/public/p200572954.jpg"/>
1956                                             </a>
1957                                             <span>
1958                                                 夏天来了,作为一个胖子,我感到非常恐慌!并不是因为我肚腩上的肉让我无法呼吸,...
1959                                             </span>
1960                                     </div>
1961                                 </li>
1962                                 <li>
1963                                     <div class="title">
1964                                         <a href="#">成分才是硬道理——好用的美白精华推荐</a>
1965                                     </div>
1966                                     <div class="content">
1967                                             <a href="#">
1968                                                 <img src="http://img4.douban.com/view/commodity_review/large/public/p200565897.jpg"/>
1969                                             </a>
1970                                             <span>
1971                                                 在这个一白遮百丑的时代里,白成一道光是很多姐妹的追求,卤煮作为一枚不白会死星人,...
1972                                             </span>
1973                                     </div>
1974                                 </li>
1975                                 <li>
1976                                     <div class="title">
1977                                         <a href="#">回购~回购~回购才是真爱!请看我真爱!</a>
1978                                     </div>
1979                                     <div class="content">
1980                                             <a href="#">
1981                                                 <img src="http://img3.douban.com/view/commodity_review/large/public/p200561054.jpg"/>
1982                                             </a>
1983                                             <span>
1984                                                 作为一枚害怕紫外线的地球人,我买了超强防晒霜、美白面膜、苦瓜水、美白原液。...
1985                                             </span>
1986                                     </div>
1987                                 </li>
1988                             </ul>
1989                     </div>
1990                 </div>
1991                 <div class="main">
1992                     <div>
1993                          <div class="act-title">
1994                             <h2>热门东西</h2>
1995                             <a href="#">更多</a>
1996                          </div>
1997                         <div class="story-list">
1998                            <div class="mod">
1999                                        <div class="main-story">
2000                                            <div class="story-pic">
2001                                                <a href="#"><img src="http://img4.douban.com/view/commodity_story/medium/public/p14618078.jpg"/></a>
2002                                            </div>
2003                                         <div class="footer">
2004                                                <div class="story-headline">
2005                                                    <a href="#">
2006                                                     <span class="story-title">拼接蕾丝条纹中...</span>
2007                                                     <span class="story-price">65.99</span>
2008                                                    </a>
2009                                                </div>
2010                                                <span class="story-text">“很爱这种蕾丝拼接tee,不会觉得太腻却带着一...”</span>
2011                                            </div>
2012                                        </div>
2013                                        <div class="other-story">
2014                                        <ul>
2015                                                <li>
2016                                                    <div class="story-pic">
2017                                                        <a href="#"><img src="http://img4.douban.com/view/commodity_story/small/public/p14625857.jpg" width="115px" height="115px"/></a>
2018                                                   </div>
2019                                                    <div class="footer">
2020                                                        <a href="#">女式欧美系...</a>
2021                                                    </div>
2022                                                </li>
2023                                                <li>
2024                                                    <div class="story-pic">
2025                                                        <a href="#"><img src="http://img4.douban.com/view/commodity_story/small/public/p14627246.jpg" width="115px" height="115px"/></a>
2026                                                    </div>
2027                                                    <div class="footer">
2028                                                        <a href="#">女式欧美系...</a>
2029                                                    </div>
2030                                                </li>
2031                                                <li class="">
2032                                                    <div class="story-pic">
2033                                                        <a href="#"><img src="http://img4.douban.com/view/commodity_story/small/public/p14627169.jpg" width="115px" height="115px"/></a>
2034                                                    </div>
2035                                                    <div class="footer">
2036                                                        <a href="#" >女式欧美系...</a>
2037                                                    </div>
2038                                                </li>
2039                                                <li class="">
2040                                                    <div class="story-pic">
2041                                                        <a href="#"><img src="http://img3.douban.com/view/commodity_story/small/public/p14626810.jpg" width="115px" height="115px"/></a>
2042                                                    </div>
2043                                                    <div class="footer">
2044                                                        <a href="#">女式欧美系...</a>
2045                                                    </div>
2046                                                </li>
2047                                        </ul>
2048                                    </div>
2049                            </div>
2050                            <div class="mod">
2051                                        <div class="main-story">
2052                                            <div class="story-pic">
2053                                                <a href="#"><img src="http://img3.douban.com/view/commodity_story/medium/public/p14627223.jpg"/></a>
2054                                            </div>
2055                                         <div class="footer">
2056                                                <div class="story-headline">
2057                                                    <a href="#">
2058                                                     <span class="story-title">超人运动速干衣.</span>
2059                                                     <span class="story-price">65.99</span>
2060                                                    </a>
2061                                                </div>
2062                                                <span class="story-text">“东西确实挺好看 跟图片差不多 也没有色差 ...”</span>
2063                                            </div>
2064                                        </div>
2065                                        <div class="other-story">
2066                                        <ul>
2067                                                <li>
2068                                                    <div class="story-pic">
2069                                                        <a href="#"><img src="http://img3.douban.com/view/commodity_story/small/public/p14623322.jpg"/></a>
2070                                                   </div>
2071                                                    <div class="footer">
2072                                                        <a href="#">三叶立体光...</a>
2073                                                    </div>
2074                                                </li>
2075                                                <li>
2076                                                    <div class="story-pic">
2077                                                        <a href="#"><img src="http://img3.douban.com/view/commodity_story/small/public/p14619050.jpg"/></a>
2078                                                    </div>
2079                                                    <div class="footer">
2080                                                        <a href="#">折叠黑胶卡...</a>
2081                                                    </div>
2082                                                </li>
2083                                                <li class="">
2084                                                    <div class="story-pic">
2085                                                        <a href="#"><img src="http://img4.douban.com/view/commodity_story/small/public/p14616536.jpg"/></a>
2086                                                    </div>
2087                                                    <div class="footer">
2088                                                        <a href="#" >GODIVA歌帝...</a>
2089                                                    </div>
2090                                                </li>
2091                                                <li class="">
2092                                                    <div class="story-pic">
2093                                                        <a href="#"><img src="http://img4.douban.com/view/commodity_story/small/public/p14616516.jpg"/></a>
2094                                                    </div>
2095                                                    <div class="footer">
2096                                                        <a href="#">硅胶动物收...</a>
2097                                                    </div>
2098                                                </li>
2099                                        </ul>
2100                                    </div>
2101                            </div>
2102                         </div>
2103                     </div>
2104                 </div>
2105             </div>
2106         </div>
2107         <!-- 同城部分 -->
2108         <div class="db-events">
2109             <div class="wrapper">
2110                 <div class="nav-side">
2111                     <h1>同城</h1>
2112                     <ul>
2113                         <li><a href="#">同城活动</a></li>
2114                         <li><a href="#">主办方</a></li>
2115                         <li><a href="#">舞台剧</a></li>
2116                     </ul>
2117                 </div>
2118                 <div class="side">
2119                     <div class="side-list">
2120                         <div class="act-title">
2121                             <h2>活动标签 </h2>
2122                         </div>
2123                             <ul>
2124                                 <li>
2125                                     <div class="list-head">
2126                                         <a href="#">音乐»</a>
2127                                     </div>
2128                                     <div class="list-links">
2129                                         <a href="#">小型现场 </a>
2130                                         <a href="#">音乐会 </a>
2131                                         <a href="#">演唱会 </a>
2132                                         <a href="#">音乐节</a>
2133                                     </div>
2134                                 </li>
2135                                 <li>
2136                                     <div class="list-head">
2137                                         <a href="#">戏剧»</a>
2138                                     </div>
2139                                     <div class="list-links">
2140                                         <a href="#">话剧 </a>
2141                                         <a href="#">音乐剧 </a>
2142                                         <a href="#">舞剧</a>
2143                                         <a href="#">歌剧 </a>
2144                                         <a href="#">戏曲</a>
2145
2146                                     </div>
2147                                 </li>
2148                                 <li>
2149                                     <div class="list-head">
2150                                         <a href="#">聚会»</a>
2151                                     </div>
2152                                     <div class="list-links">
2153                                         <a href="#">生活</a>
2154                                         <a href="#">摄影</a>
2155                                         <a href="#">外语</a>
2156                                         <a href="#">桌游</a>
2157                                         <a href="#">交友</a>
2158                                         <a href="#">夜店</a>
2159                                         <a href="#">集市</a>
2160                                     </div>
2161                                 </li>
2162                                 <li>
2163                                     <div class="list-head">
2164                                         <a href="#">电影»</a>
2165                                     </div>
2166                                     <div class="list-links">
2167                                         <a href="#">主题放映 </a>
2168                                         <a href="#">影展 </a>
2169                                         <a href="#">影院活动</a>
2170                                     </div>
2171                                 </li>
2172                                 <li>
2173                                     <div class="list-head">
2174                                         <a href="#">其他»</a>
2175                                     </div>
2176                                     <div class="list-links">
2177                                         <a href="#">讲座</a>
2178                                         <a href="#">展览</a>
2179                                         <a href="#">运动</a>
2180                                         <a href="#">旅行</a>
2181                                         <a href="#">公益</a>
2182                                     </div>
2183                                 </li>
2184                             </ul>
2185
2186                         </ul>
2187                     </div>
2188                 </div>
2189                 <div class="main">
2190                     <div class="act-title">
2191                         <h2>热门小组</h2>
2192                         <a href="#">更多</a>
2193                     </div>
2194                     <div class="events-list">
2195                         <ul>
2196                             <li>
2197                                 <div class="pic">
2198                                     <a href="#"><img src="http://img4.douban.com/view/event_poster/small/public/c3337b4f739a6d8.jpg" /></a>
2199                                 </div>
2200                                 <div class="info">
2201                                     <div class="pic-content">
2202                                         <a href="#">2015李志武汉演唱会</a>
2203                                     </div>
2204                                     <div class="deadtime">
2205                                         <a href="#">6月13日 周六 20:00 - 22:00</a>
2206                                     </div>
2207                                     <adress title="洪山体育馆">洪山体育馆</address>
2208                                     <div class="follow">
2209                                         99人关注
2210                                     </div>
2211                                 </div>
2212                             </li>
2213                             <li>
2214                                 <div class="pic">
2215                                     <a href="#"><img src="http://img3.douban.com/view/event_poster/small/public/9cb6d7e601fb05f.jpg" /></a>
2216                                 </div>
2217                                 <div class="info">
2218                                     <div class="pic-content">
2219                                         <a href="#">2015李志武汉演唱会</a>
2220                                     </div>
2221                                     <div class="deadtime">
2222                                         6月13日 周六 20:00 - 22:00
2223                                     </div>
2224                                     <adress title="洪山体育馆">洪山体育馆</address>
2225                                     <div class="follow">
2226                                         99人关注
2227                                     </div>
2228                                 </div>
2229                             </li>
2230                             <li>
2231                                 <div class="pic">
2232                                     <a href="#"><img src="http://img3.douban.com/view/event_poster/small/public/bc06b5a1d507afc.jpg" /></a>
2233                                 </div>
2234                                 <div class="info">
2235                                     <div class="pic-content">
2236                                         <a href="#">琴韵流觞—著名琴家陈长林师生古琴音乐会
2237                                             <span class="title-tickets">正在售票</span>
2238                                         </a>
2239                                     </div>
2240                                     <div class="deadtime">
2241                                         6月13日 周六 20:00 - 22:00
2242                                     </div>
2243                                     <adress title="武汉琴台音乐厅交响乐厅">武汉琴台音乐厅交响乐厅</address>
2244                                     <div class="follow">
2245                                         7人关注
2246                                     </div>
2247                                 </div>
2248                             </li>
2249                             <li>
2250                                 <div class="pic">
2251                                     <a href="#"><img src="http://img3.douban.com/view/event_poster/small/public/40c426b586d0ba0.jpg" /></a>
2252                                 </div>
2253                                 <div class="info">
2254                                     <div class="pic-content">
2255                                         <a href="#">遇见爵士—以色列亚伦爵士四重奏
2256                                          <span class="title-tickets">正在售票</span>
2257                                         </a>
2258                                     </div>
2259                                     <div class="deadtime">
2260                                         6月13日 周六 20:00 - 22:00
2261                                     </div>
2262                                     <adress title="武汉琴台音乐厅交响乐厅">武汉琴台音乐厅交响乐厅</address>
2263                                     <div class="follow">
2264                                         4人关注
2265                                     </div>
2266                                 </div>
2267                             </li>
2268                         </ul>
2269                     </div>
2270                 </div>
2271             </div>
2272         </div>
2273         <div class="wrapper">
2274             <div class="db-more">
2275                 <ul>
2276                     <li class="db-market">
2277                         <h1>豆瓣市集</h1>
2278                         <span>你的喜欢 · 在这里收获</span>
2279                     </li>
2280                     <li class="db-ypy">
2281                         <h1>一拍一</h1>
2282                         <span>豆瓣旗下女性摄影服务平台</span>
2283                     </li>
2284                 </ul>
2285             </div>
2286             <div class="db-extra">
2287                 <img src="http://img3.douban.com/view/arkenstone/raw/public/577e89f96d2f634.jpg" />
2288             </div>
2289             <div class="footer-link">
2290                 <div class="fleft">
2291                     <span> © 2005-2015 douban.com, all rights reserved </span>
2292                     <br>
2293                     <a href="#">京ICP证090015号</a>
2294                     <span> 京ICP备11027288号 网络视听许可证</span>
2295                     <br>
2296                     <a href="#">0110418</a>
2297                     <span> 号 </span>
2298                     <br>
2299                     <span>文网文[2012]0704-231号 </span>
2300                     <img src="http://img3.douban.com/pics/biaoshi.gif"/>
2301                     <span> 京公网安备110105000728  新出网证(京)字129号</span>
2302                     <br>
2303                     <span>违法和不良信息举报电话:4006910007 </span>
2304                     <img src="http://t.douban.com/img/files/file-1423193113.png" width="15px" />
2305                     <br>
2306                     <img src="http://img3.douban.com/pics/icon/jubao.png" height="16" />
2307                     <a href="#">违法和不良信息举报中心</a>
2308                     <span> 举报电话:12377 举报邮箱:[email protected]</span>
2309                 </div>
2310                 <div class="fright">
2311                     <a href="#">关于豆瓣</a>
2312                     <a href="#">在豆瓣工作 </a>
2313                     <a href="#">联系我们</a>
2314                     <a href="#">联系我们</a>
2315                     <a href="#">帮助中心</a>
2316                     <a href="#"> 开发者</a>
2317                     <a href="#">移动应用</a>
2318                     <a href="#">豆瓣工作</a>
2319                 </div>
2320             </div>
2321         </div>
2322         <script>
2323         //label  用户点击输入框是,默认字体消失
2324             var $ = function(id){return typeof id == ‘string‘ ? document.getElementById(id) : id;};
2325             String.prototype.trim = function(){return this.replace(/(\s+)|(\s+$)/g,"");};//用正则表达式将前后空格用空字符串替代。
2326             function search(q, for_q){
2327                 if($(q) == null) return;
2328                 if(!$(q).value) {$(for_q).style.display = ‘‘;    }
2329                 $(q).onfocus = function(){$(for_q).style.display = ‘none‘;};
2330                 $(q).onblur = function(){
2331                     if($(q).value.trim().length == 0) $(for_q).style.display = ‘block‘;
2332                     else $(for_q).style.display = ‘none‘;
2333                 };
2334                 $(for_q).onclick = function(){$(for_q).style.display = ‘none‘;$(q).focus();    };
2335                 $(q).onblur();
2336             };
2337             search(‘search_input‘, ‘label‘);
2338             search(‘login_account‘, ‘account_label‘);
2339             search(‘login-passwd‘, ‘passwd_label‘);
2340             //IOSAndroid扫码直接下载,鼠标经过出现二维码
2341                 window.onload = function() {var app_other = document.getElementById(‘app_other‘)
2342                 var app_link = document.getElementsByTagName(‘app-link‘);
2343                 app_other.onmouseenter = function() {
2344                     app_link.style.display = ‘block‘;
2345
2346
2347                 }
2348                 app_other.onmouseleave = function() {
2349                     app_link.style.display = ‘none‘;
2350
2351                 }
2352             }
2353         </script>
2354     </body>
2355 </html>
2356   
时间: 06-07

豆瓣首页模仿的相关文章

豆瓣首页话题输入框的实现

在做问答的时候,遇到一个需求,用户的问题需要限制字数,不仅显示计算的超出字数,还需在超出的内容上加一些提醒的效果,例如豆瓣首页的话题输入框,抽时间研究了下,需要考虑下面几个问题: 1.输入框的高度是固定的,如果超出高度需要滚动显示(可上下键移动显示) 2.随时计算输入的字数,并显示在下方 3.根据计算结果将多出的部分加背景显示(textarea里是不可以加背景的 :< ) 4.根据3分析,需要加个hack实现(加个highlight的div),如果超出此div需要根据teatarea的scrol

网易首页模仿心得---导航栏CSS篇

不仅是CSS方面学习到很多技法,而且由于自己也懂一些SEO,对网易的一些CSS+SEO优化方法,也收获颇多!(本人也是平面设计师,很喜欢网易这类简约型的网页) 好了,在此之前强烈推荐大家可以尝试一下sublime text3 这款编辑器,之前用的editplus,感觉前者真的非常强大,很多插件会让网页开发的速度快很多,很多!! 我首先看了网易的重置CSS样式表和mata标签,其中mata标签中有一行 <meta name="robots" content="index,

MongoDB---前世今生

MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本人也刚买了<MongoDB TheDefinitive Guide>的影印版,还没来得及看,本文原作者将其书中一些关于MongoDB内部现实方面的一些知识介绍如下,值得一看. 今天下载了<MongoDB The Definitive Guide>电子版,浏览了里面的内容,还是挺丰富的.是官网文档实际应用方面的一个补充.和官方文档类似,介绍MongoDB的内部原理是少之又少,只有在附

urllib

urllib提供了一系列用于操作URL的功能. Get urllib的request模块可以非常方便地抓取URL内容,也就是发送一个GET请求到指定的页面,然后返回HTTP的响应: 例如,对豆瓣的一个URLhttps://api.douban.com/v2/book/2129650进行抓取,并返回响应: from urllib import request with request.urlopen('https://api.douban.com/v2/book/2129650') as f: d

我是怎么找电子书的?

网盘搜索引擎 http://so.baiduyun.me/ 备注:提供百度谷歌双索,几乎包含所有的网盘,默认搜索百度网盘,如果百度网盘搜不到,各位可以选择其他网盘再进行搜索. 找文件 http://www.zhaofile.com/ 备注:搜索的网盘有限,备用网盘搜索引擎. 掌上书苑 备注:主提供Epub格式电子书,下载需积分,上传赚积分,资源十分十分多. 微盘 http://vdisk.weibo.com/share/hot?log_target=navigation_hot_file 备注:

base64:URL背景图片与web页面性能优化

一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么? 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码: thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== 上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),就

小tip: base64:URL背景图片与web页面性能优化——张鑫旭

一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么?~~ 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码:thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== 上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),

模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)

接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞了好长时间.也好,那就国庆8天好好的写一下,这里写了一半,先放着.先介绍一下这一半的内容.       还是老规矩,先放个图吧,虽然才一点点了 上线的banner大图和京东头条都是可以滚动的,抄写微信小程序社区官方qq群:390289365里 Nige

模仿小猎CMS首页功能展示的JS效果

老婆是前端,接到了设计师的一个效果图,有点懵圈了:上面左右鼠标可以点击滚动图片,点击每个图片下面可以显示这个案例的一点介绍,最近在恶补Jquery,所以我就帮助写了一下这个效果,为了偷懒,我是找了一个效果差不多的修改了一下,那就是小猪CMS展示站首页的“功能介绍”的效果进行了修改. 小猪CMS上面的下面的文字是通过AJAX的调用的,我在这里做了修改. 效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset=&

swift项目-模仿团购(主界面的搭建,以及首页的一些细节)

以前学习oc的时候写的一个团购的项目,现在学习swift,拿来用swift写一遍,也是连猜带蒙的,一点一点的往上凑. 今天主要是把主要的架子搭起来了. 主要有:UITabBarController,UINavigationController,还有navigationItem(这家伙给我搁着坑着了,那个寻思着做出这个效果呢,结果效果出来了,中间的titleview不居中了) 在导航控制器里核心代码: //初始化所有子视图控制器 func setAllChildVC(){ tabbarAddChi