标签：display nav lin last asi wrap arc doctype value
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css" media="screen"> 7 body,p,h1,h2,h3,dl,dd{ 8 margin: 0; 9 font-size: 100%; 10 font-weight: normal; 11 color: #3a4752; 12 13 } 14 body{ 15 background-color: #f2f5f7; 16 } 17 ul{ 18 margin: 0; 19 padding: 0; 20 } 21 li{ 22 list-style:none; 23 } 24 a{ 25 26 text-decoration: none; 27 color: #3a4752; 28 } 29 i{ 30 font-style: normal; 31 } 32 header{ 33 width: 100%; 34 background: #fff; 35 } 36 #header{ 37 display: -webkit-flex; 38 display: flex; 39 width: 1350px; 40 height: 78px; 41 margin: 0 auto; 42 color: #868f98; 43 justify-content: space-between; 44 } 45 .nav-left{ 46 display: -webkit-flex; 47 display: flex; 48 width: 600px; 49 align-items: center; 50 51 } 52 .nav-left a{ 53 margin-left: 50px; 54 color: #868f98; 55 border-right: 1px #c2c7cb solid; 56 padding-right: 20px; 57 line-height: 22px; 58 } 59 .nav-left a span{ 60 display: inline-block; 61 width: 11px; 62 height: 6px; 63 background: url(http://i2.muimg.com/567571/dcbb09b61b1dd927.gif) no-repeat; 64 } 65 .nav-left .search{ 66 margin-left: 20px; 67 } 68 .nav-left .search span{ 69 display: inline-block; 70 width: 15px; 71 height: 16px; 72 padding-right: 15px; 73 margin-top: 5px; 74 background: url(http://i2.muimg.com/567571/dcbb09b61b1dd927.gif) no-repeat 0 -15px; 75 } 76 .nav-left .search input{ 77 line-height: 24px; 78 width: 200px; 79 border: none; 80 } 81 .nav-min{ 82 display: -webkit-flex; 83 display: flex; 84 width: 510px; 85 align-items: center; 86 color: #3a4752; 87 font-weight: 700; 88 } 89 .nav-min span{ 90 font-weight: normal; 91 } 92 .nav-right{ 93 display: -webkit-flex; 94 display: flex; 95 width: 240px; 96 align-items: center; 97 color: #868f98; 98 } 99 .nav-right span{ 100 margin: 0 25px; 101 } 102 .menu{ 103 104 } 105 .menu-icon{ 106 position: relative; 107 margin-right: 15px; 108 } 109 .menu-icon li{ 110 position: absolute; 111 width: 20px; 112 height: 2px; 113 background-color: #868f98; 114 } 115 .menu-icon li:nth-child(2){ 116 top: 6px; 117 } 118 .menu-icon li:nth-child(3){ 119 top: 12px; 120 } 121 .menu span{ 122 margin: 0 30px; 123 } 124 125 nav{ 126 position: relative; 127 width: 1350px; 128 overflow: hidden; 129 margin: 0 auto; 130 } 131 nav #turn-left,nav #turn-right{ 132 133 134 position: absolute; 135 z-index: 2; 136 top: 30%; 137 margin-top: -12px; 138 139 140 border-radius: 50px; 141 background: #fff; 142 opacity: 0.5; 143 } 144 nav #turn-left{ 145 display: flex; 146 justify-content: center; 147 left: 2%; 148 width: 100px; 149 height: 100px; 150 } 151 nav #turn-left::after{ 152 content: "◇"; 153 display: block; 154 width: 30px; 155 height: 76px; 156 overflow: hidden; 157 font-size: 100px; 158 font-weight: 700; 159 line-height: 100px; 160 margin-left: -15px; 161 } 162 nav #turn-right{ 163 display: block; 164 right: 2%; 165 166 width: 30px; 167 height: 76px; 168 padding: 12px 37px; 169 170 171 font-size: 100px; 172 font-weight: 700; 173 line-height: 100px; 174 } 175 nav #turn-right i{ 176 display: block; 177 width: 30px; 178 height: 76px; 179 overflow: hidden; 180 position: relative; 181 left: 50%; 182 margin-left: -8px; 183 } 184 nav #turn-right i::after{ 185 content: "◇"; 186 position: absolute; 187 top: -10px; 188 left: -30px; 189 } 190 nav .chageColor{ 191 color: #f3a51d; 192 } 193 nav ul{ 194 width: 1854px; 195 display: flex; 196 } 197 nav .nav-li{ 198 width: 618px; 199 height: 498px; 200 } 201 nav ul li:nth-child(1){ 202 margin-left: -250px; 203 } 204 div[class ^= nav-book-]{ 205 height: 350px; 206 position: relative; 207 border-right: 1px #fff solid; 208 } 209 .nav-book-info1{ 210 background:-webkit-gradient(linear, left 0, right 0, from(#f59da0), to(rgba(249, 169, 171, 0.5))); 211 } 212 .nav-book-info2{ 213 background:-webkit-gradient(linear, left 0, right 0, from(#cf8eb2), to(rgba(237, 185, 214, 0.5))); 214 } 215 .nav-book-info3{ 216 background:-webkit-gradient(linear, left 0, right 0, from(#90d3e0), to(rgba(153, 217, 229, 0.5))); 217 } 218 .nav-book-info1 img,.nav-book-info2 img,.nav-book-info3 img{ 219 position: absolute; 220 top: 42px; 221 left: 42px; 222 -webkit-box-shadow: -1px 0 2px #aca8ad, 223 1px 0 2px #aca8ad, 224 0 -1px 2px #aca8ad, 225 0 10px 20px #aca8ad; 226 } 227 .nav-book-info2-right{ 228 width: 300px; 229 float: right; 230 padding-top: 37px; 231 line-height: 26px; 232 color: #fff; 233 } 234 .nav-book-info2-right dt{ 235 font-size: 20px; 236 font-weight: 700; 237 color: #fff; 238 } 239 .nav-book-info2-right dd{ 240 color: #fff; 241 } 242 .nav-book-info2-right .appraise{ 243 display: flex; 244 height: 40px; 245 } 246 .nav-book-info2-right .appraise ul{ 247 width: 100px; 248 249 } 250 .nav-book-info2-right .appraise li{ 251 display: inline-block; 252 width: 14px; 253 height: 13px; 254 margin: 7px 2px; 255 background: url(http://i2.muimg.com/567571/8904e7230b1e67bd.gif) no-repeat; 256 } 257 .nav-book-info2-right .appraise li:nth-child(5){ 258 background: url(http://i2.muimg.com/567571/8904e7230b1e67bd.gif) no-repeat 0 -13px; 259 } 260 .nav-book-info2-right .appraise span{ 261 display: block; 262 font-size: 14px; 263 } 264 .nav-book-info2-right p{ 265 color: #fff; 266 } 267 .nav-book-info2-right input{ 268 width: 232px; 269 height: 42px; 270 border-radius: 21px; 271 background: #fff; 272 outline: none; 273 margin-top: 37px; 274 color: #8a466c; 275 font-weight: 700; 276 font-size: 18px; 277 } 278 #content{ 279 display: flex; 280 width: 1350px; 281 margin: 0 auto; 282 } 283 aside{ 284 padding-left: 45px; 285 width: 340px; 286 } 287 .aside-author-week h2{ 288 height: 56px; 289 line-height: 56px; 290 font-size: 20px; 291 } 292 .aside-author-week ul{ 293 display: flex; 294 flex-flow: column; 295 } 296 .aside-author-week li{ 297 display: flex; 298 flex-flow: row; 299 align-items: center; 300 height: 50px; 301 } 302 .aside-author-week img{ 303 margin-right: 20px; 304 } 305 .aside-books-year{ 306 margin-top: 54px; 307 } 308 .aside-books-year h2{ 309 height: 66px; 310 line-height: 66px; 311 font-size: 20px; 312 } 313 .aside-books-year ul{ 314 } 315 .aside-books-year li{ 316 display: flex; 317 height: 104px; 318 align-items: center; 319 } 320 .aside-books-year li img{ 321 padding-right: 24px; 322 } 323 .aside-books-year li dl{ 324 height: 75px; 325 } 326 .aside-books-year li dt{ 327 line-height: 25px; 328 } 329 .aside-books-year li dd:nth-of-type(2){ 330 font-size: 14px; 331 color: #738797; 332 padding-top: 12px; 333 } 334 .article-head{ 335 line-height: 60px; 336 width: 966px; 337 border-bottom: 1px #e6eaed solid; 338 display: flex; 339 justify-content: space-between; 340 background: #f2f5f7; 341 } 342 .article-head h2{ 343 width: 200px; 344 line-height: 60px; 345 font-size: 20px; 346 } 347 .article-head dl{ 348 width: 598px; 349 display: flex; 350 justify-content: space-between; 351 } 352 .article-head dt,.article-head dd{ 353 position: relative; 354 } 355 .genre-active{ 356 font-weight: 700; 357 } 358 .genre-active::after{ 359 content: ""; 360 display: block; 361 position: absolute; 362 bottom: 0; 363 left: 50%; 364 margin-left: -16px; 365 width: 33px; 366 height: 3px; 367 background-color: #56d0e9; 368 -webkit-box-shadow: 2px 0 15px #74e3fa; 369 box-shadow: 2px 2 15px #74e3fa; 370 } 371 #books-list{ 372 width: 966px; 373 } 374 #books-list ul{ 375 display: flex; 376 flex-flow: row wrap; 377 justify-content: space-between; 378 } 379 #books-list .books-list-info{ 380 position: relative; 381 width: 457px; 382 height: 300px; 383 margin-top: 53px; 384 } 385 .books-list-info img{ 386 position: absolute; 387 z-index: 1; 388 left: 20px; 389 -webkit-box-shadow: 2px 0 15px #e1e1e1; 390 box-shadow: 2px 2 15px #e1e1e1; 391 } 392 .books-list-info .book-info{ 393 width: 454px; 394 height: 262px; 395 background-color: #fff; 396 border-radius: 10px; 397 position: absolute; 398 bottom: 0; 399 } 400 401 .book-info .book-info-text{ 402 width: 264px; 403 height: 183px; 404 position: absolute; 405 top: 28px; 406 right: 0; 407 } 408 .book-info-text dt{ 409 line-height: 22px; 410 font-weight: 600; 411 } 412 .book-info-text dd{ 413 color: #727272; 414 line-height: 26px; 415 font-size: 14px; 416 } 417 .book-info .appraise{ 418 width: 220px; 419 height: 38px; 420 display: flex; 421 justify-content: space-between; 422 align-items: center; 423 font-size: 14px; 424 color: #727272; 425 } 426 .book-info .appraise li{ 427 width: 14px; 428 height: 13px; 429 background: url(http://i2.muimg.com/567571/8904e7230b1e67bd.gif) no-repeat; 430 } 431 .book-info .appraise li:nth-last-child(1){ 432 background: url(http://i2.muimg.com/567571/8904e7230b1e67bd.gif) no-repeat 0 -13px; 433 } 434 .book-info-text p{ 435 line-height: 20px; 436 color: #738797; 437 } 438 .book-info .reader{ 439 display: flex; 440 align-items: center; 441 position: absolute; 442 bottom: 0; 443 width: 454px; 444 height: 50px; 445 } 446 .book-info .reader span{ 447 position: absolute; 448 top: 5px; 449 } 450 .book-info .reader span:nth-child(2){ 451 left: 35px; 452 } 453 .book-info .reader span:nth-child(3){ 454 left: 70px; 455 } 456 .book-info .reader p{ 457 position: absolute; 458 font-size: 14px; 459 right: 5px; 460 } 461 footer{ 462 display: flex; 463 justify-content: center; 464 align-items: center; 465 width: 100%; 466 height: 100px; 467 background: #3A4752; 468 margin-top: 40px; 469 } 470 footer p{ 471 color: #fff; 472 } 473 </style> 474 </head> 475 <body> 476 <header> 477 <div id="header"> 478 <div class="nav-left"> 479 <a href="#" title="">Browse Category <span></span></a> 480 <label class="search"> 481 <span></span> 482 <input type="text" name="" value="" placeholder="Search Book"> 483 </label> 484 </div> 485 <h1 class="nav-min"><span>read</span>books</h1> 486 <div class="nav-right"> 487 <span><img src="http://i2.muimg.com/567571/3a94dd9cf7d5eee3.gif" alt=""></span> 488 <div class="menu"> 489 <div class="menu-icon"> 490 <ul> 491 <li></li> 492 <li></li> 493 <li></li> 494 </ul> 495 </div> 496 <span>Menu</span> 497 </div> 498 </div> 499 </div> 500 </header> 501 502 <nav> 503 <span id="turn-left" class="chageColor"></span> 504 <span id="turn-right"><i></i></span> 505 <ul> 506 <li class="nav-li"> 507 <div class="nav-book-info1"> 508 <img src="http://i2.muimg.com/567571/5ab132a9e1a84894.gif"/> 509 <div class="nav-book-info2-right"> 510 <dl> 511 <dt>BIG MAGIC:Creative Liv...</dt> 512 <dd>by Elizabeth Gilbert</dd> 513 </dl> 514 <div class="appraise"> 515 <ul> 516 <li></li> 517 <li></li> 518 <li></li> 519 <li></li> 520 <li></li> 521 </ul> 522 <span>1,987,765 voters</span> 523 </div> 524 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 525 <input type="button" name="" value="See The Book"> 526 </div> 527 </div> 528 </li> 529 <li class="nav-li"> 530 <div class="nav-book-info2"> 531 <img src="http://i2.muimg.com/567571/5ab132a9e1a84894.gif"/> 532 <div class="nav-book-info2-right"> 533 <dl> 534 <dt>BIG MAGIC:Creative Liv...</dt> 535 <dd>by Elizabeth Gilbert</dd> 536 </dl> 537 <div class="appraise"> 538 <ul> 539 <li></li> 540 <li></li> 541 <li></li> 542 <li></li> 543 <li></li> 544 </ul> 545 <span>1,987,765 voters</span> 546 </div> 547 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 548 <input type="button" name="" value="See The Book"> 549 </div> 550 </div> 551 </li> 552 553 <li class="nav-li"> 554 <div class="nav-book-info3"> 555 <img src="http://i2.muimg.com/567571/5ab132a9e1a84894.gif"/> 556 <div class="nav-book-info2-right"> 557 <dl> 558 <dt>BIG MAGIC:Creative Liv...</dt> 559 <dd>by Elizabeth Gilbert</dd> 560 </dl> 561 <div class="appraise"> 562 <ul> 563 <li></li> 564 <li></li> 565 <li></li> 566 <li></li> 567 <li></li> 568 </ul> 569 <span>1,987,765 voters</span> 570 </div> 571 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 572 <input type="button" name="" value="See The Book"> 573 </div> 574 </div> 575 </li> 576 </ul> 577 </nav> 578 579 <section id="content"> 580 <aside> 581 <div class="aside-author-week"> 582 <h2>Author of the week</h2> 583 <ul> 584 <li> 585 <img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/> 586 <span>Sebastian Jeremy</span> 587 </li> 588 <li> 589 <img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/> 590 <span>Sebastian</span> 591 </li> 592 <li> 593 <img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/> 594 <span>Sebastian Jeremy</span> 595 </li> 596 <li> 597 <img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/> 598 <span>Sebastian</span> 599 </li> 600 <li> 601 <img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/> 602 <span>Sebastian</span> 603 </li> 604 <li> 605 <img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/> 606 <span>Sebastian Jeremy</span> 607 </li> 608 </ul> 609 </div> 610 <div class="aside-books-year"> 611 <h2>Books of the year</h2> 612 <ul> 613 <li> 614 <img src="http://i1.piimg.com/567571/bbeb54cb7b325252.gif"/> 615 <dl> 616 <dt>Big Magic Creative</dt> 617 <dd>Living Beyon Fear</dd> 618 <dd>By Elizabeth Gilbert</dd> 619 </dl> 620 </li> 621 <li> 622 <img src="http://i1.piimg.com/567571/bbeb54cb7b325252.gif"/> 623 <dl> 624 <dt>Big Magic Creative</dt> 625 <dd>Living Beyon Fear</dd> 626 <dd>By Elizabeth Gilbert</dd> 627 </dl> 628 </li> 629 <li> 630 <img src="http://i1.piimg.com/567571/bbeb54cb7b325252.gif"/> 631 <dl> 632 <dt>Big Magic Creative</dt> 633 <dd>Living Beyon Fear</dd> 634 <dd>By Elizabeth Gilbert</dd> 635 </dl> 636 </li> 637 <li> 638 <img src="http://i1.piimg.com/567571/bbeb54cb7b325252.gif"/> 639 <dl> 640 <dt>Big Magic Creative</dt> 641 <dd>Living Beyon Fear</dd> 642 <dd>By Elizabeth Gilbert</dd> 643 </dl> 644 </li> 645 <li> 646 <img src="http://i1.piimg.com/567571/bbeb54cb7b325252.gif"/> 647 <dl> 648 <dt>Big Magic Creative</dt> 649 <dd>Living Beyon Fear</dd> 650 <dd>By Elizabeth Gilbert</dd> 651 </dl> 652 </li> 653 </ul> 654 </div> 655 </aside> 656 657 <article class = "article"> 658 <header class="article-head"> 659 <h2>Popular by Genre</h2> 660 <dl> 661 <dt class="genre-active">All Genres</dt> 662 <dd>Business</dd> 663 <dd>Science</dd> 664 <dd>Fiction</dd> 665 <dd>Philosphy</dd> 666 <dd>Biography</dd> 667 </dl> 668 </header> 669 <section id="books-list"> 670 <ul> 671 <li class="books-list-info"> 672 <img src="http://i4.buimg.com/567571/c4a7ce6b80bc9fa4.gif" alt=""> 673 <div class="book-info"> 674 <!--<span class="book-info-more"></span>--> 675 <div class="book-info-text"> 676 <dl> 677 <dt>Act Like It</dt> 678 <dd>by Lucy Parker</dd> 679 </dl> 680 <div class="appraise"> 681 <ul> 682 <li></li> 683 <li></li> 684 <li></li> 685 <li></li> 686 <li></li> 687 </ul> 688 <span>1,987,765 voters</span> 689 </div> 690 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 691 </div> 692 <div class="reader"> 693 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 694 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 695 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 696 <p>Samantha William and 2 other friends like this</p> 697 </div> 698 </div> 699 </li> 700 <li class="books-list-info"> 701 <img src="http://i4.buimg.com/567571/c4a7ce6b80bc9fa4.gif" alt=""> 702 <div class="book-info"> 703 <!--<span class="book-info-more"></span>--> 704 <div class="book-info-text"> 705 <dl> 706 <dt>Act Like It</dt> 707 <dd>by Lucy Parker</dd> 708 </dl> 709 <div class="appraise"> 710 <ul> 711 <li></li> 712 <li></li> 713 <li></li> 714 <li></li> 715 <li></li> 716 </ul> 717 <span>1,987,765 voters</span> 718 </div> 719 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 720 </div> 721 <div class="reader"> 722 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 723 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 724 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 725 <p>Samantha William and 2 other friends like this</p> 726 </div> 727 </div> 728 </li> 729 <li class="books-list-info"> 730 <img src="http://i4.buimg.com/567571/c4a7ce6b80bc9fa4.gif" alt=""> 731 <div class="book-info"> 732 <!--<span class="book-info-more"></span>--> 733 <div class="book-info-text"> 734 <dl> 735 <dt>Act Like It</dt> 736 <dd>by Lucy Parker</dd> 737 </dl> 738 <div class="appraise"> 739 <ul> 740 <li></li> 741 <li></li> 742 <li></li> 743 <li></li> 744 <li></li> 745 </ul> 746 <span>1,987,765 voters</span> 747 </div> 748 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 749 </div> 750 <div class="reader"> 751 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 752 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 753 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 754 <p>Samantha William and 2 other friends like this</p> 755 </div> 756 </div> 757 </li> 758 <li class="books-list-info"> 759 <img src="http://i4.buimg.com/567571/c4a7ce6b80bc9fa4.gif" alt=""> 760 <div class="book-info"> 761 <!--<span class="book-info-more"></span>--> 762 <div class="book-info-text"> 763 <dl> 764 <dt>Act Like It</dt> 765 <dd>by Lucy Parker</dd> 766 </dl> 767 <div class="appraise"> 768 <ul> 769 <li></li> 770 <li></li> 771 <li></li> 772 <li></li> 773 <li></li> 774 </ul> 775 <span>1,987,765 voters</span> 776 </div> 777 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 778 </div> 779 <div class="reader"> 780 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 781 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 782 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 783 <p>Samantha William and 2 other friends like this</p> 784 </div> 785 </div> 786 </li> 787 <li class="books-list-info"> 788 <img src="http://i4.buimg.com/567571/c4a7ce6b80bc9fa4.gif" alt=""> 789 <div class="book-info"> 790 <!--<span class="book-info-more"></span>--> 791 <div class="book-info-text"> 792 <dl> 793 <dt>Act Like It</dt> 794 <dd>by Lucy Parker</dd> 795 </dl> 796 <div class="appraise"> 797 <ul> 798 <li></li> 799 <li></li> 800 <li></li> 801 <li></li> 802 <li></li> 803 </ul> 804 <span>1,987,765 voters</span> 805 </div> 806 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 807 </div> 808 <div class="reader"> 809 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 810 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 811 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 812 <p>Samantha William and 2 other friends like this</p> 813 </div> 814 </div> 815 </li> 816 <li class="books-list-info"> 817 <img src="http://i4.buimg.com/567571/c4a7ce6b80bc9fa4.gif" alt=""> 818 <div class="book-info"> 819 <!--<span class="book-info-more"></span>--> 820 <div class="book-info-text"> 821 <dl> 822 <dt>Act Like It</dt> 823 <dd>by Lucy Parker</dd> 824 </dl> 825 <div class="appraise"> 826 <ul> 827 <li></li> 828 <li></li> 829 <li></li> 830 <li></li> 831 <li></li> 832 </ul> 833 <span>1,987,765 voters</span> 834 </div> 835 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 836 </div> 837 <div class="reader"> 838 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 839 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 840 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 841 <p>Samantha William and 2 other friends like this</p> 842 </div> 843 </div> 844 </li> 845 <li class="books-list-info"> 846 <img src="http://i4.buimg.com/567571/c4a7ce6b80bc9fa4.gif" alt=""> 847 <div class="book-info"> 848 <!--<span class="book-info-more"></span>--> 849 <div class="book-info-text"> 850 <dl> 851 <dt>Act Like It</dt> 852 <dd>by Lucy Parker</dd> 853 </dl> 854 <div class="appraise"> 855 <ul> 856 <li></li> 857 <li></li> 858 <li></li> 859 <li></li> 860 <li></li> 861 </ul> 862 <span>1,987,765 voters</span> 863 </div> 864 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 865 </div> 866 <div class="reader"> 867 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 868 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 869 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 870 <p>Samantha William and 2 other friends like this</p> 871 </div> 872 </div> 873 </li> 874 <li class="books-list-info"> 875 <img src="http://i4.buimg.com/567571/c4a7ce6b80bc9fa4.gif" alt=""> 876 <div class="book-info"> 877 <!--<span class="book-info-more"></span>--> 878 <div class="book-info-text"> 879 <dl> 880 <dt>Act Like It</dt> 881 <dd>by Lucy Parker</dd> 882 </dl> 883 <div class="appraise"> 884 <ul> 885 <li></li> 886 <li></li> 887 <li></li> 888 <li></li> 889 <li></li> 890 </ul> 891 <span>1,987,765 voters</span> 892 </div> 893 <p>Lorem ipsum dolor sit amet, conset tur adipiscing elit, sed do elusmo temper incididunt ut labore et.</p> 894 </div> 895 <div class="reader"> 896 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 897 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 898 <span><img src="http://i1.piimg.com/567571/d66868ba4d0467de.gif"/></span> 899 <p>Samantha William and 2 other friends like this</p> 900 </div> 901 </div> 902 </li> 903 </ul> 904 </section> 905 </article> 906 </section> 907 <footer> 908 <p>?2017-4-9 寒雨轩</p> 909 </footer> 910 </body> 911 </html>
标签：display nav lin last asi wrap arc doctype value
原文地址：http://www.cnblogs.com/hanyuxuan/p/6700772.html
