首页 > 代码库 > readbooks网页

readbooks网页

  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&nbsp;<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&nbsp;&nbsp;寒雨轩</p>
909     </footer>
910 </body>
911 </html>

 

readbooks网页