readbooks网页
时间：2021-07-01 10:21:17
帮助过：6人阅读
<!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
