Hugging Face's logo

Spaces:
zhang-wei-jian
/
test
Running

App Files Community
zhang-wei-jian commited on
Commit
ef9bb44
•
1 Parent(s): 4307e2d

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +1857 -0
index.html ADDED
@@ -0,0 +1,1857 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>Document</title>
7
+ <link href="./css/normalize.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ /* font:字体大小/行高 字体系列 */
11
+ font: 12px/1.3 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
12
+ }
13
+
14
+ .topbg {
15
+ /* border:1px solid red; */
16
+ background-color: #EAEAEA;
17
+ }
18
+
19
+ .topbox {
20
+ min-width: 1200px;
21
+ /* border:1px solid red; */
22
+ width: 1200px;
23
+ margin: 0 auto;
24
+ }
25
+
26
+ .topbox::after {
27
+ content: '';
28
+ display: block;
29
+ clear: both;
30
+
31
+ }
32
+
33
+ .topbg .topbox div {
34
+ height: 30px;
35
+ line-height: 30px;
36
+ vertical-align: middle;
37
+ }
38
+
39
+ .topbg .topbox div {
40
+ float: left;
41
+ }
42
+
43
+ .topbg .topbox ul {
44
+ float: right;
45
+ }
46
+
47
+ .topbg .topbox ul li {
48
+ float: left;
49
+ height: 30px;
50
+ line-height: 30px;
51
+
52
+ }
53
+
54
+ .topbg .topbox a {
55
+ padding: 0 10px;
56
+ border-right: 1px solid #B3AEAE;
57
+ text-decoration: none;
58
+ color: #333333;
59
+ }
60
+
61
+ .topbg .topbox div a:hover {
62
+ color: #E1251B;
63
+ }
64
+
65
+ .topbg .topbox ul li a:hover {
66
+ color: #E1251B;
67
+ }
68
+
69
+ ul {
70
+ list-style-position: inside;
71
+ padding: 0;
72
+ margin: 0;
73
+ list-style-type: none;
74
+
75
+ }
76
+
77
+ .clearborder {
78
+ border-style: none !important;
79
+ }
80
+
81
+ /* 第二部分 */
82
+
83
+
84
+ .clerfix::after {
85
+ content: '';
86
+ display: block;
87
+ clear: both;
88
+ }
89
+
90
+ #middlebg {
91
+ width: 1200px;
92
+ margin: 0 auto;
93
+ /* border: 1px solid red; */
94
+ }
95
+
96
+ #middlebg div {
97
+ float: left;
98
+ /* height: 110px; */
99
+ line-height: 110px;
100
+ /* border: 1px solid red; */
101
+
102
+ }
103
+
104
+ #middlebg div img {
105
+ vertical-align: middle;
106
+ margin: 25px 45px;
107
+ }
108
+
109
+ #middlebg form {
110
+ float: right;
111
+ height: 110px;
112
+ line-height: 110px;
113
+
114
+ }
115
+
116
+ #middlebg form input,
117
+ bottom {
118
+ width: 490px;
119
+ height: 32px;
120
+ vertical-align: middle;
121
+ border: 2px solid #EA4A36;
122
+ box-sizing: border-box;
123
+ }
124
+
125
+ #middlebg form button {
126
+ width: 68px;
127
+ height: 32px;
128
+ background-color: #EA4A36;
129
+ color: rgb(255, 255, 255);
130
+ font-size: 12px;
131
+ cursor: pointer;
132
+ border: 1px solid #EA4A36;
133
+ cursor: pointer;
134
+ position: relative;
135
+ left: -4px;
136
+ vertical-align: middle;
137
+
138
+
139
+ }
140
+
141
+ /* 第三部分 */
142
+ #last {
143
+ /* border:1px solid red; */
144
+ min-width: 1200px;
145
+
146
+ border-bottom: 2px solid #E1251B;
147
+ font-size: 16px;
148
+
149
+ }
150
+
151
+ #last ul {
152
+ width: 1200px;
153
+ margin: 0 auto;
154
+ text-align: center;
155
+ /* padding-left: 110px; */
156
+ }
157
+
158
+ #last ul li {
159
+ /* border:1px solid red; */
160
+ float: left;
161
+ padding: 0 22px;
162
+ height: 45px;
163
+ line-height: 45px;
164
+
165
+ }
166
+
167
+ #last ul li a {
168
+ text-decoration: none;
169
+ color: black;
170
+ }
171
+
172
+ #redli {
173
+ padding: 0 !important;
174
+ background-color: #E1251B;
175
+ width: 210px;
176
+
177
+ }
178
+
179
+ #redli {
180
+
181
+ color: rgb(255, 255, 255) !important;
182
+ }
183
+
184
+ #last ul li a:hover {
185
+ color: #E1251B;
186
+ }
187
+
188
+ /* 二级菜单 */
189
+ #caidanhe {
190
+ min-width: 1200px;
191
+ }
192
+
193
+ #caidan {
194
+ width: 1200px;
195
+ margin: 0 auto;
196
+ display: flex;
197
+ justify-content: space-between;
198
+ }
199
+
200
+ #caidan dl dd a {
201
+ color: #747674;
202
+ text-decoration: none;
203
+ font-size: 14px;
204
+ margin-left: 0px;
205
+ }
206
+
207
+ #caidan dl {
208
+ /* border:1px solid red; */
209
+ width: 210px;
210
+ margin: 0;
211
+ padding: 0;
212
+ position: relative;
213
+
214
+ background-color: #FAFAFA;
215
+ }
216
+
217
+ #caidan dl dd {
218
+ margin: 0;
219
+ height: 30px;
220
+ padding-left:20px;
221
+
222
+ }
223
+
224
+ #caidan dl ul {
225
+ z-index: 999999999;
226
+ display: none;
227
+ list-style-type: none;
228
+ padding: 0;
229
+ margin: 0;
230
+ position: absolute;
231
+ top: 0;
232
+ left: 210px;
233
+ border: 1px solid #e4e4e4;
234
+ width: 730px;
235
+ height: 454px;
236
+ background-color: #fafafa;
237
+ }
238
+
239
+ #caidan dl ul li {
240
+ float: left;
241
+ }
242
+
243
+ #caidan dl dd:hover+ul {
244
+ display: block;
245
+
246
+ }
247
+
248
+ /* 第二部分图片 */
249
+ figure {
250
+ margin: 0;
251
+ position: relative;
252
+ border: 1px solid pink;
253
+ height: 454px;
254
+ width: 730px;
255
+
256
+
257
+ }
258
+
259
+ figure a {
260
+ width: 730px;
261
+ position: absolute;
262
+ top: 0px;
263
+ left: 0;
264
+ }
265
+
266
+ figure a:nth-of-type(3) {
267
+ z-index: 999;
268
+ }
269
+
270
+ figure a:target {
271
+ z-index: 9999;
272
+
273
+ }
274
+
275
+ /* 二级菜单第三部分 */
276
+
277
+ #caidanhe #caidan footer {
278
+ border: 1px solid #E4E4E4;
279
+ height: 460px;
280
+ width: 250px;
281
+ display: flex;
282
+ flex-wrap: wrap;
283
+ }
284
+
285
+ #caidanhe #caidan footer>ul>li:nth-of-type(1) {
286
+ width: 250px;
287
+ height: 180px;
288
+ display: flex;
289
+ flex-wrap: wrap;
290
+ justify-content: center;
291
+
292
+
293
+ }
294
+
295
+ #caidanhe #caidan footer>ul>li:nth-of-type(1) div {
296
+ border-bottom: 1px solid #E4E4E4;
297
+ display: flex;
298
+ justify-content: space-between;
299
+ width: 95%;
300
+ align-items: center;
301
+
302
+ }
303
+ #caidanhe #caidan footer>ul>li:nth-of-type(1) dl dd{
304
+ padding:0;
305
+ }
306
+ #caidanhe #caidan footer>ul>li:nth-of-type(1) div h2,#caidanhe #caidan footer>ul>li:nth-of-type(1) div h3{
307
+ margin:0;
308
+ }
309
+ #caidanhe #caidan footer>ul>li:nth-of-type(1) div h2{
310
+ font-size:14px;
311
+ padding-left:15px;
312
+ }
313
+ #caidanhe #caidan footer>ul>li:nth-of-type(1) div h3{
314
+ font-size:12px;
315
+ font-weight: normal;
316
+ }
317
+ #caidanhe #caidan footer>ul li:nth-of-type(1) dl{
318
+ background-color:transparent;
319
+ }
320
+
321
+
322
+ #caidanhe #caidan footer>ul li:nth-of-type(1) dl dd {
323
+ font-size: 12px;
324
+ height: 26px;
325
+ line-height: 26px;
326
+ }
327
+
328
+ #caidanhe #caidan footer>ul ul {
329
+ display: flex;
330
+ flex-wrap: wrap;
331
+
332
+ }
333
+
334
+ #caidanhe #caidan footer>ul ul li {
335
+ display: flex;
336
+ flex-wrap: wrap;
337
+ justify-content: center;
338
+ flex-grow: 1;
339
+ width: 60px;
340
+ height: 65px;
341
+ border-left:1px solid #E4E4E4;
342
+ border-top:1px solid #E4E4E4;
343
+
344
+ }
345
+ #caidanhe #caidan footer>ul ul li span{
346
+ background-image: url(./images/home/icons.png);
347
+ width:61px;
348
+ height:40px;
349
+ }
350
+ #caidanhe #caidan footer>ul ul li:nth-of-type(1) span{
351
+ background-position: 0px -5px;
352
+ }
353
+ #caidanhe #caidan footer>ul ul li:nth-of-type(2) span{
354
+ background-position: -62px -5px;
355
+ }
356
+ #caidanhe #caidan footer>ul ul li:nth-of-type(3) span{
357
+ background-position: -126px -5px;
358
+ }
359
+ #caidanhe #caidan footer>ul ul li:nth-of-type(4) span{
360
+ background-position: -190px -5px;
361
+ }
362
+ #caidanhe #caidan footer>ul ul li:nth-of-type(5) span{
363
+ background-position: 0px -76px;
364
+ }
365
+ #caidanhe #caidan footer>ul ul li:nth-of-type(6) span{
366
+ background-position: -62px -76px;
367
+ }
368
+ #caidanhe #caidan footer>ul ul li:nth-of-type(7) span{
369
+ background-position: -126px -76px;
370
+ }
371
+ #caidanhe #caidan footer>ul ul li:nth-of-type(8) span{
372
+ background-position: -190px -76px;
373
+ }
374
+ #caidanhe #caidan footer>ul ul li:nth-of-type(9) span{
375
+ background-position: 0px -146px;
376
+ }
377
+ #caidanhe #caidan footer>ul ul li:nth-of-type(10) span{
378
+ background-position: -62px -146px;
379
+ }
380
+ #caidanhe #caidan footer>ul ul li:nth-of-type(11) span{
381
+ background-position: -126px -146px;
382
+ }
383
+ #caidanhe #caidan footer>ul ul li:nth-of-type(12) span{
384
+ background-position: -190px -146px;
385
+ }
386
+
387
+ #caidanhe #caidan footer>ul ul li p{
388
+ margin:0;
389
+ }
390
+
391
+
392
+ #caidanhe #caidan footer>ul li:nth-of-type(2) img{
393
+ opacity: .8;
394
+ transition-duration: 1s;
395
+ }
396
+ #caidanhe #caidan footer>ul li:nth-of-type(2):hover img{
397
+ opacity: 1;
398
+ transition-duration: 1s;
399
+ }
400
+
401
+
402
+ /* 今日推荐*/
403
+ .clearfix::after {
404
+ display: block;
405
+ content: '';
406
+ clear: both;
407
+
408
+ }
409
+
410
+ #tuijian {
411
+ /* border:1px solid red; */
412
+ list-style-type: none;
413
+ margin: 10px auto;
414
+ padding: 0;
415
+ width: 1200px;
416
+
417
+ }
418
+
419
+ #tuijian li {
420
+ float: left;
421
+ width: 250px;
422
+ }
423
+
424
+ #tuijian ul {
425
+ margin: 0 auto;
426
+ }
427
+
428
+ #tuijian li:first-of-type {
429
+ width: 200px;
430
+ text-align: center;
431
+ background-color: #5c5251;
432
+ height: 123px;
433
+ padding: 20px 0;
434
+ display: flex;
435
+ flex-direction: column;
436
+ justify-content: center;
437
+ align-items: center;
438
+
439
+
440
+
441
+
442
+ }
443
+
444
+ #tuijian li:first-of-type img {
445
+ vertical-align: middle;
446
+ width:57px;
447
+
448
+ }
449
+
450
+ #tuijian li:first-of-type h3 {
451
+ color: #fff;
452
+ font-size:18px;
453
+ }
454
+
455
+ #tuijian li img:hover {
456
+ opacity: 0.7;
457
+ transition-duration: 1s;
458
+ }
459
+
460
+ /* 猜你喜欢的iphone8 */
461
+ #tuijianwai {
462
+ /* border:1px solid red; */
463
+ min-width: 1200px;
464
+ }
465
+
466
+ #tuijianwai .hot {
467
+ /* border:1px solid pink; */
468
+ text-align: center;
469
+ }
470
+
471
+ #tuijianwai .hot a {
472
+ display: inline-block;
473
+ /* border:1px solid red; */
474
+ color: #dcdcdc;
475
+ text-decoration: none;
476
+ }
477
+
478
+ #tuijianwai .hot a img {
479
+ width: 35px;
480
+ height: 35px;
481
+ background-image: url(./images/home/bg0.png);
482
+ }
483
+
484
+ #tuijianwai .hot a .img1 {
485
+ background-position: -35px;
486
+ }
487
+
488
+ #tuijianwai .hot a:hover p {
489
+ color: palegreen;
490
+ }
491
+
492
+ /* 第二部分 */
493
+ #tuijianwai #hot2 {
494
+
495
+ width: 1300px;
496
+
497
+ margin: 0 auto;
498
+ }
499
+
500
+ #tuijianwai #hot2 div {
501
+ border: 1px solid red;
502
+ width: 271px;
503
+ float: left;
504
+ margin: 0 22px;
505
+ }
506
+
507
+ #tuijianwai #hot2 div img {
508
+ width: 100%;
509
+ }
510
+
511
+ #tuijianwai #hot2 div p {
512
+ font-size: 20px;
513
+ color: red;
514
+ }
515
+
516
+ /* 猜你喜欢的like */
517
+ /* #like .cs::after {
518
+ border: 1px solid red;
519
+
520
+
521
+ }
522
+
523
+ #like{
524
+ border:1px solid red;
525
+ } */
526
+
527
+ #likebox {
528
+ width: 1200px;
529
+ margin: 0 auto;
530
+ }
531
+
532
+ #like h3 {
533
+ float: left;
534
+ margin: 0;
535
+
536
+ }
537
+
538
+ .clearfix::after {
539
+ content: '';
540
+ display: block;
541
+ clear: both;
542
+ }
543
+
544
+ #like a {
545
+ float: right;
546
+ }
547
+
548
+ /* 第二部分 */
549
+ #likebox #like2 {
550
+ border: 1px solid #e4e4e4;
551
+ min-width: 1200px;
552
+ margin: 0 auto;
553
+ }
554
+
555
+ #likebox #like2 ul {
556
+ width: 1176px;
557
+ margin: 0;
558
+ list-style-position: inside;
559
+ padding: 0 auto;
560
+
561
+ }
562
+
563
+ #likebox #like2 ul li {
564
+ list-style: none;
565
+ width: 196px;
566
+ float: left;
567
+ padding: 0;
568
+ margin: 20px 0;
569
+ font-size: 12px;
570
+ text-align: center;
571
+ position: relative;
572
+
573
+
574
+ }
575
+
576
+ #likebox #like2 ul li::after {
577
+ content: '';
578
+ display: inline-block;
579
+ width: 196px;
580
+ height: 100px;
581
+ border-right: 1px solid;
582
+ border-color: transparent #e4e4e4;
583
+ position: absolute;
584
+ bottom: 0;
585
+ left: 0;
586
+
587
+
588
+ }
589
+
590
+
591
+ #likebox #like2 ul li a h3 {
592
+ font-size: 20px;
593
+ color: red;
594
+ text-decoration: none;
595
+
596
+ }
597
+
598
+ #likebox #like2 ul li a {
599
+ text-decoration: none;
600
+ word-break: break-all;
601
+ }
602
+
603
+ #likebox #like2 ul li p {
604
+ width: 150px;
605
+ margin: 0 auto;
606
+ color: #333;
607
+ }
608
+
609
+ #likebox #like2 u li a img {
610
+ width: 300px;
611
+
612
+
613
+ }
614
+
615
+ #likebox #like2 ul li a img:hover {
616
+ transform: scale(1.1);
617
+
618
+ transition-duration: 0.5s;
619
+ transition-property: all;
620
+
621
+
622
+ }
623
+
624
+ /* 家用电器 */
625
+ #dq {
626
+ min-width: 1200px;
627
+ }
628
+
629
+ #dq ul,
630
+ li,
631
+ dd {
632
+ list-style-type: none;
633
+ padding: 0;
634
+ margin: 0;
635
+ }
636
+
637
+ #dq header {
638
+ width: 1200px;
639
+ margin: 0 auto;
640
+ /* border:1px solid red; */
641
+ height: 50px;
642
+ line-height: 50px;
643
+ ;
644
+ }
645
+
646
+ #dq header::after {
647
+ content: '';
648
+ clear: both;
649
+ display: block;
650
+ }
651
+
652
+ #dq header h3 {
653
+ float: left;
654
+ color: #cb026c;
655
+ margin: 0;
656
+ }
657
+
658
+ #dq header li {
659
+ float: right;
660
+
661
+ }
662
+
663
+ #dq header li a {
664
+ font-size: 12px;
665
+ border-right: 1px solid #6677b0;
666
+ padding: 0 6px;
667
+ color: #666666;
668
+ text-decoration: none;
669
+ }
670
+
671
+ /* 第二部分 */
672
+ #dq div {
673
+ border-top: 2px solid #cb0226;
674
+ width: 1200px;
675
+ margin: 0 auto;
676
+
677
+ }
678
+
679
+ #dq div ul {
680
+ box-sizing: border-box;
681
+ font-size: 0;
682
+ }
683
+
684
+ #dq div img {
685
+ width: 100%;
686
+ border: 1px solid #e2e2e2;
687
+
688
+ }
689
+
690
+ #dq div ul::after {
691
+ content: '';
692
+ display: block;
693
+ clear: both;
694
+ }
695
+
696
+ #dq div ul li,
697
+ #dq div ul li dl {
698
+ float: left;
699
+ /* border:1px solid pink; */
700
+ }
701
+
702
+ #dq div ul li,
703
+ #dq div ul li dl dd {
704
+ border-bottom: 1px solid #e4e4e4;
705
+ }
706
+
707
+ #dq div li:first-of-type {
708
+ width: 210px;
709
+ background-color: #f7f7f7;
710
+
711
+ }
712
+
713
+ #dq div li:first-of-type dl {
714
+ width: 83px;
715
+
716
+ text-align: center;
717
+ margin: 10px 10px;
718
+ font-size: 12px;
719
+ padding: 15px 0;
720
+ }
721
+
722
+ #dq div li:nth-of-type(2) {
723
+ width: 330px;
724
+ height: 360px;
725
+ position: relative;
726
+ }
727
+
728
+ #dq div li:nth-of-type(2) a img {
729
+ position: absolute;
730
+ top: 0;
731
+ width: 330px;
732
+
733
+ }
734
+
735
+ #dq div li:nth-of-type(3) {
736
+ width: 220px;
737
+ height: 180px;
738
+ }
739
+
740
+ #dq div li:nth-of-type(4) {
741
+ width: 220px;
742
+ height: 360px;
743
+
744
+ }
745
+
746
+ #dq div li:nth-of-type(5) {
747
+ width: 220px;
748
+ height: 180px;
749
+ }
750
+
751
+ #dq div li img:hover {
752
+ transition-duration: 1s;
753
+ opacity: .8;
754
+ }
755
+
756
+ /* 品牌支持 */
757
+
758
+ #pinpai {
759
+ /* border:1px solid red; */
760
+ min-width: 1200px;
761
+
762
+ font-size: 0;
763
+ }
764
+
765
+ #pinpai ul {
766
+ /* border:1px solid red; */
767
+ background-color: #f7f7f7;
768
+ padding: 0;
769
+ margin: 0 auto;
770
+ list-style-position: inside;
771
+ list-style-type: none;
772
+ text-align: center;
773
+ padding: 15px 0;
774
+ width: 1200px;
775
+ }
776
+
777
+ #pinpai ul li {
778
+ display: inline-block;
779
+ border-right: 1px dashed rgb(201, 201, 201);
780
+
781
+
782
+
783
+ }
784
+
785
+ #pinpai ul li a img {
786
+ padding: 0 10px;
787
+
788
+ }
789
+
790
+ /* 底部foot */
791
+ #footbg {
792
+ min-width: 1200px;
793
+ background-color: #eaeaea;
794
+ text-align: center;
795
+
796
+ }
797
+
798
+ #footbg #foot1 {
799
+ padding: 20px 0;
800
+ border-bottom: 1px solid #E4E1E1;
801
+
802
+ display: inline-block;
803
+ margin: 0 auto;
804
+ }
805
+
806
+ #footbg #foot1 dl {
807
+ display: inline-block;
808
+ padding: 0;
809
+ margin: 0;
810
+ vertical-align: top;
811
+ text-align: left;
812
+ }
813
+
814
+ #footbg #foot1 dl dt {
815
+ font-size: 14px;
816
+ font-weight: bolder;
817
+ }
818
+
819
+ #footbg #foot1 dl dd {
820
+ font-size: 12px;
821
+ width: 190px;
822
+ padding: 0;
823
+ margin: 0;
824
+ list-style: none;
825
+ line-height: 18px;
826
+
827
+ }
828
+
829
+ /* 第二部分 */
830
+ #foot2 {
831
+ /* border: 1px solid red; */
832
+ padding-bottom: 20px;
833
+ }
834
+
835
+ #foot2 dl {
836
+ font-size: 12px;
837
+
838
+ }
839
+
840
+ #foot2 dl dd {
841
+ list-style-position: inside;
842
+ padding: 0 10px;
843
+ margin: 0;
844
+ display: inline-block;
845
+ border-right: 1px solid black;
846
+ }
847
+
848
+ #foot2 p {
849
+ font-size: 12px;
850
+ }
851
+
852
+ #foot2 dl .clearborder {
853
+ border-style: none;
854
+ }
855
+
856
+ /* 侧边栏 */
857
+ aside {
858
+ position: fixed;
859
+ right: -5px;
860
+ top: 0;
861
+ height: 100%;
862
+ width: 300px;
863
+ border: 5px solid #7b6e6e;
864
+
865
+ transition-duration: .5s;
866
+
867
+ z-index: 99999;
868
+ }
869
+
870
+ body>input {
871
+ display: none;
872
+ }
873
+
874
+ aside header {
875
+
876
+ width: 100%;
877
+ height: 100%;
878
+ background-color: #ffffe4;
879
+ }
880
+ /* 删删删删删删删删删删删删删删 */
881
+ aside header div{
882
+ width:300px;
883
+ height:22px;
884
+ background-color:#7B6E6E;
885
+ position:absolute;
886
+ border-radius: 10px;
887
+ bottom:50%;
888
+
889
+ transition-duration: 9s;
890
+
891
+ }
892
+
893
+ input:checked+aside header>div:nth-of-type(1){
894
+ transform: rotate(69999deg);
895
+ transition-duration: 49s;
896
+ bottom:100%;
897
+
898
+ }
899
+ input:checked+aside header>div:nth-of-type(2){
900
+ bottom:100px;
901
+ transform: rotate(-69999deg);
902
+ transition-duration: 49s;
903
+
904
+
905
+ }
906
+
907
+ /* 删删删删删删删删删删删删删删 */
908
+ aside label {
909
+ display: inline-block;
910
+ height: 35px;
911
+ width: 35px;
912
+ border: 1px solid #7b6e6e;
913
+ background-color: #7b6e6e;
914
+ position: absolute;
915
+ top: -5px;
916
+ left: -37px;
917
+ }
918
+
919
+ aside label img {
920
+ position: absolute;
921
+ height: 100%;
922
+ }
923
+
924
+ input:checked+aside {
925
+ transition-duration: .6s;
926
+ transition-property: all;
927
+ right: -306px;
928
+ }
929
+
930
+ input+aside label img:nth-of-type(1) {
931
+ display: none;
932
+ }
933
+
934
+ input:checked+aside img:nth-of-type(1) {
935
+ display: block;
936
+ }
937
+
938
+ input:checked+aside img:nth-of-type(2) {
939
+ display: none;
940
+ }
941
+
942
+ aside ul {
943
+ list-style-type: none;
944
+ padding: 0;
945
+ margin: 0;
946
+ position: absolute;
947
+ left: -35px;
948
+ top: 50%;
949
+ transform: translate(0, -50%);
950
+ z-index: -2;
951
+
952
+ }
953
+
954
+ aside ul li {
955
+ width: 35px;
956
+ height: 35px;
957
+ border-radius: 3px;
958
+ ;
959
+ /* border:1px solid #ff7c6e; */
960
+ position: relative;
961
+ background-color: #7b6e6e;
962
+ background-image: url(./images/toolbars.png);
963
+ font-size: 12px;
964
+ margin-bottom: 1px;
965
+ text-align: center;
966
+ overflow: hidden;
967
+
968
+ }
969
+
970
+ aside ul li div {
971
+ /* border:1px solid pink; */
972
+ border-radius: 3px 0 0 3px;
973
+ position: absolute;
974
+ left: 35px;
975
+ height: 35px;
976
+ width: 62px;
977
+ line-height: 35px;
978
+ z-index: -91;
979
+ color: #fff;
980
+ transition-duration: .5s;
981
+
982
+ }
983
+
984
+ aside ul li:hover {
985
+ overflow: visible;
986
+ }
987
+
988
+ aside ul li:hover div {
989
+ left: -62px;
990
+ transition-duration: .5s;
991
+ width: 64px;
992
+ background-color: rgb(200, 22, 25);
993
+ }
994
+
995
+ aside ul li:hover {
996
+ background-color: rgb(200, 22, 25);
997
+
998
+ }
999
+
1000
+ aside ul:nth-of-type(2) {
1001
+ top: 100%;
1002
+ transform: translate(0, -112%);
1003
+ margin-bottom: 18px;
1004
+
1005
+ }
1006
+
1007
+ aside ul li:nth-of-type(1) {
1008
+ background-position: -88px -175px;
1009
+ }
1010
+
1011
+ aside ul li:nth-of-type(2) {
1012
+ background-position: -50px -0px;
1013
+ }
1014
+
1015
+ aside ul li:nth-of-type(3) {
1016
+ background-position: -50px -50px;
1017
+ }
1018
+
1019
+ aside ul li:nth-of-type(4) {
1020
+ background-position: -50px -100px;
1021
+ }
1022
+
1023
+ aside ul li:nth-of-type(5) {
1024
+ background-position: -190px -150px;
1025
+ }
1026
+
1027
+ aside ul li:nth-of-type(6) {
1028
+ background-position: -50px -150px;
1029
+ }
1030
+
1031
+ aside ul:nth-of-type(2) li:nth-of-type(1) {
1032
+ background-position: -50px -250px;
1033
+ }
1034
+ </style>
1035
+ </head>
1036
+
1037
+ <body>
1038
+ <div class="topbg">
1039
+ <div class="topbox">
1040
+ <div>
1041
+ 尚品汇欢迎你！请
1042
+ <a href="#">登录</a>
1043
+ <a href="#">免费注册</a>
1044
+ </div>
1045
+
1046
+ <ul>
1047
+
1048
+ <li><a href="#">我的订单</a></li>
1049
+ <li><a href="#">我的购物车</a></li>
1050
+ <li><a href="#">我的尚硅谷</a></li>
1051
+ <li><a href="#">尚硅谷会员</a></li>
1052
+ <li><a href="#">企业采购</a></li>
1053
+ <li><a href="#">关注尚品汇</a></li>
1054
+ <li><a href="#">合作招商</a></li>
1055
+ <li><a class="clearborder" href="#">商家后台</a></li>
1056
+
1057
+ </ul>
1058
+
1059
+ </div>
1060
+ </div>
1061
+ <!-- 第二部分 -->
1062
+
1063
+
1064
+ <div id="middlebg" class="clerfix">
1065
+ <div>
1066
+ <a href="http://atguigu.com"> <img src="./images/Logo.png" alt=""></a>
1067
+ </div>
1068
+ <form action="">
1069
+ <input type="text">
1070
+ <button>搜索</button>
1071
+ </form>
1072
+ </div>
1073
+ <!-- 第三部分 -->
1074
+ <div id="last" class="clerfix">
1075
+
1076
+
1077
+ <ul class="clearfix">
1078
+ <li id="redli">
1079
+ 全部商品
1080
+ </li>
1081
+ <li>
1082
+ <a href="#">服装城</a>
1083
+ </li>
1084
+ <li>
1085
+ <a href="#">美妆馆</a>
1086
+ </li>
1087
+ <li>
1088
+ <a href="#">尚品汇超市</a>
1089
+ </li>
1090
+ <li>
1091
+ <a href="#">全球购</a>
1092
+ </li>
1093
+ <li>
1094
+ <a href="#">闪购</a>
1095
+ </li>
1096
+ <li>
1097
+ <a href="#">团购</a>
1098
+ </li>
1099
+ <li>
1100
+ <a href="#">有趣</a>
1101
+ </li>
1102
+ <li>
1103
+ <a href="#">秒杀</a>
1104
+ </li>
1105
+ </ul>
1106
+ </div>
1107
+ <!-- 二级菜单 -->
1108
+ <div id="caidanhe">
1109
+ <div id="caidan" class="clerfix">
1110
+ <dl>
1111
+ <dd><a href="#">图书、音像、数字商品</a></dd>
1112
+ <ul>
1113
+ <li><a href="#">电子书</a></li>
1114
+ <li><a href="#">婚恋/两性</a></li>
1115
+ <li><a href="#">文学</a></li>
1116
+ <li><a href="#">经管</a></li>
1117
+ <li><a href="#">畅销VIP</a></li>
1118
+ </ul>
1119
+
1120
+ <dd><a href="#">家具电器</a></dd>
1121
+ <ul>
1122
+ <li>
1123
+ <a href="">电子书1</a>
1124
+ </li>
1125
+ <dd>
1126
+ <li>
1127
+ <a href="">免费</a>
1128
+ </li>
1129
+ <li>
1130
+ <a href="">小说</a>
1131
+ </li>
1132
+ <li>
1133
+ <a href="">励志与成功</a>
1134
+ </li>
1135
+ <li>
1136
+ <a href="">婚恋/两性</a>
1137
+ </li>
1138
+ <li>
1139
+ <a href="">文学</a>
1140
+ </li>
1141
+ <li>
1142
+ <a href="">经管</a>
1143
+ </li>
1144
+ <li>
1145
+ <a href="">畅读VIP</a>
1146
+ </li>
1147
+ </ul>
1148
+ </ul>
1149
+ <ul>
1150
+ <li>
1151
+ <a href="">数字音乐</a>
1152
+ </li>
1153
+ <dd>
1154
+ <li>
1155
+ <a href="">通俗流行</a>
1156
+ </li>
1157
+ <li>
1158
+ <a href="">古典音乐</a>
1159
+ </li>
1160
+ <li>
1161
+ <a href="">摇滚说唱</a>
1162
+ </li>
1163
+ <li>
1164
+ <a href="">爵士蓝调</a>
1165
+ </li>
1166
+ <li>
1167
+ <a href="">乡村民谣</a>
1168
+ </li>
1169
+ <li>
1170
+ <a href="">有声读物</a>
1171
+ </li>
1172
+ </dd>
1173
+ </ul>
1174
+ <ul>
1175
+ <li>
1176
+ <a href="">音像</a>
1177
+ </li>
1178
+ <dd>
1179
+ <li>
1180
+ <a href="">音乐</a>
1181
+ </li>
1182
+ <li>
1183
+ <a href="">影视</a>
1184
+ </li>
1185
+ <li>
1186
+ <a href="">教育音像</a>
1187
+ </li>
1188
+ <li>
1189
+ <a href="">游戏</a>
1190
+ </li>
1191
+ </dd>
1192
+ </ul>
1193
+ <ul>
1194
+ <li>文艺</li>
1195
+ <dd>
1196
+ <li>
1197
+ <a href="">小说</a>
1198
+ </li>
1199
+ <li>
1200
+ <a href="">文学</a>
1201
+ </li>
1202
+ <li>
1203
+ <a href="">青春文学</a>
1204
+ </li>
1205
+ <li>
1206
+ <a href="">传记</a>
1207
+ </li>
1208
+ <li>
1209
+ <a href="">艺术</a>
1210
+ </li>
1211
+ </dd>
1212
+ </ul>
1213
+ <ul>
1214
+ <li>人文社科</li>
1215
+ <dd>
1216
+ <li>
1217
+ <a href="">历史</a>
1218
+ </li>
1219
+ <li>
1220
+ <a href="">心理学</a>
1221
+ </li>
1222
+ <li>
1223
+ <a href="">政治/军事</a>
1224
+ </li>
1225
+ <li>
1226
+ <a href="">国学/古籍</a>
1227
+ </li>
1228
+ <li>
1229
+ <a href="">哲学/宗教</a>
1230
+ </li>
1231
+ <li>
1232
+ <a href="">社会科学</a>
1233
+ </li>
1234
+ </dd>
1235
+ </ul>
1236
+ <ul>
1237
+ <li>经管励志</li>
1238
+ <dd>
1239
+ <li>
1240
+ <a href="">经济</a>
1241
+ </li>
1242
+ <li>
1243
+ <a href="">金融与投资</a>
1244
+ </li>
1245
+ <li>
1246
+ <a href="">管理</a>
1247
+ </li>
1248
+ <li>
1249
+ <a href="">励志与成功</a>
1250
+ </li>
1251
+ </dd>
1252
+ </ul>
1253
+ <ul>
1254
+ <li>生活</li>
1255
+ <dd>
1256
+ <li>
1257
+ <a href="">家庭与育儿</a>
1258
+ </li>
1259
+ <li>
1260
+ <a href="">旅游/地图</a>
1261
+ </li>
1262
+ <li>
1263
+ <a href="">烹饪/美食</a>
1264
+ </li>
1265
+ <li>
1266
+ <a href="">时尚/美妆</a>
1267
+ </li>
1268
+ <li>
1269
+ <a href="">家居</a>
1270
+ </li>
1271
+ <li>
1272
+ <a href="">婚恋与两性</a>
1273
+ </li>
1274
+ <li>
1275
+ <a href="">娱乐/休闲</a>
1276
+ </li>
1277
+ <li>
1278
+ <a href="">健身与保健</a>
1279
+ </li>
1280
+ <li>
1281
+ <a href="">动漫/幽默</a>
1282
+ </li>
1283
+ <li>
1284
+ <a href="">体育/运动</a>
1285
+ </li>
1286
+ </dd>
1287
+ </ul>
1288
+ <ul>
1289
+ <li>科技</li>
1290
+ <dd>
1291
+ <li>
1292
+ <a href="">科普</a>
1293
+ </li>
1294
+ <li>
1295
+ <a href="">IT</a>
1296
+ </li>
1297
+ <li>
1298
+ <a href="">建筑</a>
1299
+ </li>
1300
+ <li>
1301
+ <a href="">医学</a>
1302
+ </li>
1303
+ <li>
1304
+ <a href="">工业技术</a>
1305
+ </li>
1306
+ <li>
1307
+ <a href="">电子/通信</a>
1308
+ </li>
1309
+ <li>
1310
+ <a href="">农林</a>
1311
+ </li>
1312
+ <li>
1313
+ <a href="">科学与自然</a>
1314
+ </li>
1315
+ </dd>
1316
+ </ul>
1317
+ <ul>
1318
+ <li>少儿</li>
1319
+ <dd>
1320
+ <li>
1321
+ <a href="">少儿</a>
1322
+ </li>
1323
+ <li>
1324
+ <a href="">0-2岁</a>
1325
+ </li>
1326
+ <li>
1327
+ <a href="">3-6岁</a>
1328
+ </li>
1329
+ <li>
1330
+ <a href="">7-10岁</a>
1331
+ </li>
1332
+ <li>
1333
+ <a href="">11-14岁</a>
1334
+ </li>
1335
+ </dd>
1336
+ </ul>
1337
+
1338
+ <dd><a href="#t1">手机、数码、充值</a></dd>
1339
+ <ul></ul>
1340
+ <dd><a href="#t2">电脑、办公</a></dd>
1341
+ <dd><a href="#t3">家具、家居、家装、厨具</a></dd>
1342
+ <dd><a href="#t4">服饰内衣</a></dd>
1343
+ <dd><a href="#t1">个性化妆</a></dd>
1344
+ <dd><a href="#t2">运动健康</a></dd>
1345
+ <dd><a href="#t3">汽车用品</a></dd>
1346
+ <dd><a href="#t4">彩票、旅行</a></dd>
1347
+ <dd><a href="#t3">理财、众筹</a></dd>
1348
+ <dd><a href="#t1">母婴、玩具</a></dd>
1349
+ <dd><a href="#t2">箱包</a></dd>
1350
+ <dd><a href="#t3">运动户外</a></dd>
1351
+ <dd><a href="#t4">箱包</a></dd>
1352
+
1353
+
1354
+ </dl>
1355
+ <!-- 第二部分图片 -->
1356
+ <figure>
1357
+
1358
+
1359
+
1360
+ <a id="t1">
1361
+ <img src="./images/home/banner1.jpg" alt=""></a>
1362
+ <a id="t2">
1363
+ <img src="./images/home/banner2.jpg" alt="">
1364
+ </a>
1365
+ <a id="t3">
1366
+ <img src="./images/home/banner3.jpg" alt="">
1367
+ </a>
1368
+ <a id="t4">
1369
+ <img src="./images/home/banner4.jpg" alt="">
1370
+ </a>
1371
+
1372
+
1373
+ </figure>
1374
+ <!-- 二级菜单第三部分 -->
1375
+ <footer>
1376
+ <ul>
1377
+ <li>
1378
+ <div>
1379
+ <h2>尚品汇快报</h2>
1380
+ <h3>更多 ></h3>
1381
+ </div>
1382
+ <dl>
1383
+ <dd>[特惠]备战开学季 全民半价购数码</dd>
1384
+ <dd>[公告]备战开学季 全民半价购数码</dd>
1385
+ <dd>[特惠]备���开学季 全民半价购数码</dd>
1386
+ <dd>[公告]备战开学季 全民半价购数码</dd>
1387
+ <dd>[特惠]备战开学季 全民半价购数码</dd>
1388
+ </dl>
1389
+
1390
+
1391
+
1392
+ </li>
1393
+ <ul>
1394
+ <li>
1395
+ <span></span>
1396
+ <p>话费</p>
1397
+ </li>
1398
+ <li>
1399
+ <span></span>
1400
+ <p>机票</p>
1401
+ </li>
1402
+
1403
+ <li>
1404
+ <span></span>
1405
+ <p>电影票</p>
1406
+ </li>
1407
+ <li>
1408
+ <span></span>
1409
+ <p>游戏</p>
1410
+ </li>
1411
+ <li>
1412
+ <span></span>
1413
+ <p>彩票</p>
1414
+ </li>
1415
+ <li>
1416
+ <span></span>
1417
+ <p>加油站</p>
1418
+ </li>
1419
+ <li>
1420
+ <span></span>
1421
+ <p>酒店</p>
1422
+ </li>
1423
+ <li>
1424
+ <span></span>
1425
+ <p>火车票</p>
1426
+ </li>
1427
+ <li>
1428
+ <span></span>
1429
+ <p>众筹</p>
1430
+ </li>
1431
+ <li>
1432
+ <span></span>
1433
+ <p>理财</p>
1434
+ </li>
1435
+ <li>
1436
+ <span></span>
1437
+ <p>礼品卡</p>
1438
+ </li>
1439
+ <li>
1440
+ <span></span>
1441
+ <p>白条</p>
1442
+ </li>
1443
+
1444
+ </ul>
1445
+ <li>
1446
+ <img src="./images/home/ad1.png" alt="">
1447
+ </li>
1448
+ </ul>
1449
+ </footer>
1450
+
1451
+ </div>
1452
+ </div>
1453
+ <!-- 今日推荐 -->
1454
+ <ul id="tuijian" class="clearfix">
1455
+ <li>
1456
+ <img src="./images/home/clock.png" alt="">
1457
+ <h3>今日推荐</h3>
1458
+ </li>
1459
+ <li>
1460
+ <img src="./images/home/today01.png" alt="">
1461
+ </li>
1462
+ <li>
1463
+ <img src="./images/home/today02.png" alt="">
1464
+ </li>
1465
+ <li>
1466
+ <img src="./images/home/today03.png" alt="">
1467
+ </li>
1468
+ <li>
1469
+ <img src="./images/home/today04.png" alt="">
1470
+ </li>
1471
+
1472
+ </ul>
1473
+ <!-- 猜你喜欢 的iphone8-->
1474
+ <div id="tuijianwai">
1475
+ <div class="hot">
1476
+ <a href="#" style="color:#ff6d48">
1477
+ <img class="img1">
1478
+ <p>热卖排行</p>
1479
+ </a>
1480
+ <a href="#">
1481
+ <img class="img2">
1482
+ <p>特价排行</p>
1483
+ </a>
1484
+ <a href="#">
1485
+ <img class="img3">
1486
+ <p>新品排行</p>
1487
+ </a>
1488
+
1489
+ </div>
1490
+ <!-- 第二部分 -->
1491
+ <div id="hot2" class="clearfix">
1492
+ <div>
1493
+ <img src="./images/home/1.jpg" alt="">
1494
+ <span>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</span>
1495
+ <p>定金:¥100.00</p>
1496
+ </div>
1497
+ <div>
1498
+ <img src="./images/home/1.jpg" alt="">
1499
+ <span>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</span>
1500
+ <p>定金:¥100.00</p>
1501
+ </div>
1502
+ <div>
1503
+ <img src="./images/home/1.jpg" alt="">
1504
+ <span>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</span>
1505
+ <p>定金:¥100.00</p>
1506
+ </div>
1507
+ <div>
1508
+ <img src="./images/home/1.jpg" alt="">
1509
+ <span>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</span>
1510
+ <p>定金:¥100.00</p>
1511
+ </div>
1512
+ </div>
1513
+ </div>
1514
+ <!-- 猜你喜欢like -->
1515
+ <div id="likebox">
1516
+ <div id="like" class="clearfix">
1517
+ <h3>猜你喜欢</h3>
1518
+ <a href="">换一批</a>
1519
+ </div>
1520
+ <!-- 第二部分 -->
1521
+ <div id=like2 class="clearfix">
1522
+ <ul class="clearfix">
1523
+ <li>
1524
+ <a href="#">
1525
+ <img src="./images/home/like_02.png" alt="">
1526
+ <p>阳光新款单肩包女包时尚字母四件套女</p>
1527
+ <h3>¥116.00</h3>
1528
+ </a>
1529
+ </li>
1530
+ <li>
1531
+ <a href="#">
1532
+ <img src="./images/home/like_03.png" alt="">
1533
+ <p>阳光新款单肩包女包时尚字母四件套女</p>
1534
+ <h3>¥116.00</h3>
1535
+ </a>
1536
+ </li>
1537
+ <li>
1538
+ <a href="#">
1539
+ <img src="./images/home/like_01.png" alt="">
1540
+ <p>阳光新款单肩包女包时尚字母四件套女</p>
1541
+ <h3>¥116.00</h3>
1542
+ </a>
1543
+ </li>
1544
+ <li>
1545
+ <a href="#">
1546
+ <img src="./images/home/like_02.png" alt="">
1547
+ <p>阳光新款单肩包女包时尚字母四件套女</p>
1548
+ <h3>¥116.00</h3>
1549
+ </a>
1550
+ </li>
1551
+ <li>
1552
+ <a href="#">
1553
+ <img src="./images/home/like_03.png" alt="">
1554
+ <p>阳光新款单肩包女包时尚字母四件套女</p>
1555
+ <h3>¥116.00</h3>
1556
+ </a>
1557
+ </li>
1558
+ <li>
1559
+ <a href="#">
1560
+ <img src="./images/home/like_01.png" alt="">
1561
+ <p>阳光新款单肩包女包时尚字母四件套女</p>
1562
+ <h3>¥116.00</h3>
1563
+ </a>
1564
+ </li>
1565
+ </ul>
1566
+ </div>
1567
+ </div>
1568
+
1569
+
1570
+
1571
+ <!-- 家用电器 -->
1572
+
1573
+ <div id="dq">
1574
+ <header>
1575
+ <h3>家用电器</h3>
1576
+ <ul>
1577
+ <li><a href="#">热门</a></li>
1578
+ <li><a href="#">大家电</a></li>
1579
+ <li><a href="#">生活电器</a></li>
1580
+ <li><a href="#">厨房电器</a></li>
1581
+ <li><a href="#">应季电器</a></li>
1582
+ <li><a href="#">空气/净水</a></li>
1583
+ <li><a href="#">高端电器</a></li>
1584
+
1585
+ </ul>
1586
+ </header>
1587
+ <!-- 第二部分 -->
1588
+ <div>
1589
+ <ul>
1590
+ <li>
1591
+ <dl>
1592
+ <dd>节能补贴</dd>
1593
+ <dd>空气净化器</dd>
1594
+ <dd>滚筒洗衣机</dd>
1595
+ </dl>
1596
+ <dl>
1597
+ <dd>4K电视</dd>
1598
+ <dd>IH电饭锅</dd>
1599
+ <dd>电热水器</dd>
1600
+ </dl>
1601
+ <img src="./images/home/floor-1-1.png" alt="">
1602
+ </li>
1603
+ <li><a href="" id="dq1"><img src="./images/home/floor-1-b01.png" alt=""></a>
1604
+ <a href="" id="dq2"><img src="./images/home/floor-1-b02.png" alt=""></a>
1605
+ <a href="" id="dq3"><img src="./images/home/floor-1-b03.png" alt=""></a>
1606
+ </li>
1607
+ <li><img src="./images/home/floor-1-2.png" alt="">
1608
+ <img src="./images/home/floor-1-3.png" alt="">
1609
+ </li>
1610
+ <li><img src="./images/home/floor-1-4.png" alt=""></li>
1611
+ <li><img src="./images/home/floor-1-5.png" alt="">
1612
+ <img src="./images/home/floor-1-6.png" alt="">
1613
+ </li>
1614
+ </ul>
1615
+ </div>
1616
+
1617
+ </div>
1618
+ <div id="dq">
1619
+ <header>
1620
+ <h3>家用电器</h3>
1621
+ <ul>
1622
+ <li><a href="#">热门</a></li>
1623
+ <li><a href="#">大家电</a></li>
1624
+ <li><a href="#">生活电器</a></li>
1625
+ <li><a href="#">厨房电器</a></li>
1626
+ <li><a href="#">应季电器</a></li>
1627
+ <li><a href="#">空气/净水</a></li>
1628
+ <li><a href="#">高端电器</a></li>
1629
+
1630
+ </ul>
1631
+ </header>
1632
+ <!-- 第二部分 -->
1633
+ <div>
1634
+ <ul>
1635
+ <li>
1636
+ <dl>
1637
+ <dd>节能补贴</dd>
1638
+ <dd>空气净化器</dd>
1639
+ <dd>滚筒洗衣机</dd>
1640
+ </dl>
1641
+ <dl>
1642
+ <dd>4K电视</dd>
1643
+ <dd>IH电饭锅</dd>
1644
+ <dd>电热水器</dd>
1645
+ </dl>
1646
+ <img src="./images/home/floor-1-1.png" alt="">
1647
+ </li>
1648
+ <li><a href="" id="dq1"><img src="./images/home/floor-1-b01.png" alt=""></a>
1649
+ <a href="" id="dq2"><img src="./images/home/floor-1-b02.png" alt=""></a>
1650
+ <a href="" id="dq3"><img src="./images/home/floor-1-b03.png" alt=""></a>
1651
+ </li>
1652
+ <li><img src="./images/home/floor-1-2.png" alt="">
1653
+ <img src="./images/home/floor-1-3.png" alt="">
1654
+ </li>
1655
+ <li><img src="./images/home/floor-1-4.png" alt=""></li>
1656
+ <li><img src="./images/home/floor-1-5.png" alt="">
1657
+ <img src="./images/home/floor-1-6.png" alt="">
1658
+ </li>
1659
+ </ul>
1660
+ </div>
1661
+
1662
+ </div>
1663
+ <!-- 品牌支持 -->
1664
+ <div id="pinpai" class="clearfix">
1665
+ <ul class="clearfix">
1666
+ <li>
1667
+ <a href="#">
1668
+ <img src="./images/home/brand_21.png" alt="">
1669
+ </a>
1670
+ </li>
1671
+ <li>
1672
+ <a href="#">
1673
+ <img src="./images/home/brand_03.png" alt="">
1674
+ </a>
1675
+ </li>
1676
+ <li>
1677
+ <a href="#">
1678
+ <img src="./images/home/brand_05.png" alt="">
1679
+ </a>
1680
+ </li>
1681
+ <li>
1682
+ <a href="#">
1683
+ <img src="./images/home/brand_07.png" alt="./images/home/brand_07.png">
1684
+ </a>
1685
+ </li>
1686
+ <li>
1687
+ <a href="#">
1688
+ <img src="./images/home/brand_09.png" alt="">
1689
+ </a>
1690
+ </li>
1691
+ <li>
1692
+ <a href="#">
1693
+ <img src="./images/home/brand_11.png" alt="">
1694
+ </a>
1695
+ </li>
1696
+
1697
+ <li>
1698
+ <a href="#">
1699
+ <img src="./images/home/brand_13.png" alt="">
1700
+ </a>
1701
+ </li>
1702
+ <li>
1703
+ <a href="#">
1704
+ <img src="./images/home/brand_15.png" alt="">
1705
+ </a>
1706
+ </li>
1707
+ <li>
1708
+ <a href="#">
1709
+ <img src="./images/home/brand_17.png" alt="">
1710
+ </a>
1711
+ </li>
1712
+ <li style="border-style:none">
1713
+ <a href="#">
1714
+ <img src="./images/home/brand_19.png" alt="">
1715
+ </a>
1716
+ </li>
1717
+
1718
+ </ul>
1719
+ </div>
1720
+ <!-- 底部foot -->
1721
+ <div id="footbg">
1722
+ <div id="foot1">
1723
+ <dl>
1724
+ <dt>购物指南</dt>
1725
+ <dd>购物流程</dd>
1726
+ <dd>会员介绍</dd>
1727
+ <dd>生活旅行/团购</dd>
1728
+ <dd>常见问题</dd>
1729
+ <dd>购物指南</dd>
1730
+
1731
+ </dl>
1732
+
1733
+ <dl>
1734
+ <dt>配送方式</dt>
1735
+ <dd>上门自提</dd>
1736
+ <dd>211现实达到</dd>
1737
+ <dd>配送服务查询</dd>
1738
+ <dd>配送收取标准</dd>
1739
+ <dd>海外配送</dd>
1740
+ </dl>
1741
+
1742
+ <dl>
1743
+ <dt>支付方式</dt>
1744
+ <dd>货到付款</dd>
1745
+ <dd>在线支付</dd>
1746
+ <dd>分期付款</dd>
1747
+ <dd>邮局汇报</dd>
1748
+ <dd>公司转账</dd>
1749
+ </dl>
1750
+
1751
+ <dl>
1752
+ <dt>售后服务</dt>
1753
+ <dd>价格保护</dd>
1754
+ <dd>服务策略</dd>
1755
+ <dd>退货说明</dd>
1756
+ <dd>返修/退货</dd>
1757
+ <dd>取消订单</dd>
1758
+ </dl>
1759
+
1760
+ <dl>
1761
+ <dt>特色服务</dt>
1762
+ <dd>夺宝岛</dd>
1763
+ <dd>DIY主机</dd>
1764
+ <dd>延保服务</dd>
1765
+ <dd>尚品汇E卡</dd>
1766
+ <dd>尚品汇通信</dd>
1767
+ </dl>
1768
+ <dl>
1769
+ <dt>帮助中心</dt>
1770
+ <dd class="last"><img src="./images/wx_cz.jpg" alt="山龟骨" titile="硅谷二维码"></dd>
1771
+
1772
+
1773
+
1774
+
1775
+ </div>
1776
+ <!-- 第二部分 -->
1777
+ <div id="foot2">
1778
+ <dl>
1779
+ <dd>关于我们</dd>
1780
+ <dd>联系我们</dd>
1781
+ <dd>关于我们</dd>
1782
+ <dd>商家入驻</dd>
1783
+ <dd>营销中心</dd>
1784
+ <dd>友情链接</dd>
1785
+ <dd>关于我们</dd>
1786
+ <dd>营销中心</dd>
1787
+ <dd>友情链接</dd>
1788
+
1789
+ <dd class="clearborder">关于我们</dd>
1790
+ </dl>
1791
+ <p>地址：北京市昌平区宏福科技园综合楼6层</p>
1792
+ <p>京ICP备19006430号</p>
1793
+ </div>
1794
+ </div>
1795
+ <!-- 侧边栏 -->
1796
+ <input type="checkbox" id="c1"checked>
1797
+ <aside>
1798
+ <label for="c1">
1799
+
1800
+ <img src="./images/list.png" alt="">
1801
+
1802
+
1803
+
1804
+ <img src="./images/cross.png" alt="">
1805
+ </label>
1806
+ <ul>
1807
+ <a href="#"></a>
1808
+ <li>
1809
+ <a href="#">
1810
+ <div>购物车</div>
1811
+ </a>
1812
+
1813
+ </li>
1814
+ <li>
1815
+ <a href="#">
1816
+ <div>我的关注</div>
1817
+ </a>
1818
+ </li>
1819
+ <li>
1820
+ <a href="#">
1821
+ <div>我的足迹</div>
1822
+ </a>
1823
+ </li>
1824
+ <li>
1825
+ <a href="#">
1826
+ <div>我的消息</div>
1827
+ </a>
1828
+ </li>
1829
+ <li>
1830
+ <a href="#">
1831
+ <div>我的足迹</div>
1832
+ </a>
1833
+ </li>
1834
+ <li>
1835
+ <a href="#">
1836
+ <div>咨询</div>
1837
+ </a>
1838
+ </li>
1839
+ </ul>
1840
+ <header>
1841
+ <div>
1842
+
1843
+ </div>
1844
+ <div></div>
1845
+
1846
+ </header>
1847
+ <ul>
1848
+ <li>
1849
+ <a href="#">
1850
+ <div>顶部</div>
1851
+ </a>
1852
+ </li>
1853
+ </ul>
1854
+ </aside>
1855
+ </body>
1856
+
1857
+ </html>