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>
来源：https://www.cnblogs.com/hanyuxuan/p/6700772.html