码迷,mamicode.com
首页 > 其他好文 > 详细

M商城

时间:2020-02-20 20:42:29      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:效果   info   tar   closed   cursor   pac   add   back   alt   

技术图片
  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>M商城</title>
  6     <link rel="shortcut icon" type="image/x-icon" href="img/icon.ico">
  7     <link rel="stylesheet" href="css/reset.css">
  8     <link rel="stylesheet" href="css/ad.css">
  9     <link rel="stylesheet" href="css/topbar.css">
 10     <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
 11     <link rel="stylesheet" href="css/header.css">
 12     <link rel="stylesheet" href="css/nav.css">
 13     <link rel="stylesheet" href="css/star.css">
 14     <link rel="stylesheet" href="css/star.css">
 15     <link rel="stylesheet" href="css/main.css">
 16 </head>
 17 <body>
 18     <div class="ad">
 19         <a href="javascript:void(0)"></a>
 20         <span>广告</span>
 21     </div>
 22     <div class="topbar">
 23         <div class="topbar-wrap">
 24             <div class="topbar-nav">
 25                 <a href="javascript:void(0)">小米商城</a>
 26                 <span>|</span>
 27                 <a href="javascript:void(0)">MIUI</a>
 28                 <span>|</span>
 29                 <a href="javascript:void(0)">IoT</a>
 30                 <span>|</span>
 31                 <a href="javascript:void(0)">云服务</a>
 32                 <span>|</span>
 33                 <a href="javascript:void(0)">金融</a>
 34                 <span>|</span>
 35                 <a href="javascript:void(0)">有品</a>
 36                 <span>|</span>
 37                 <a href="javascript:void(0)">小爱开放平台</a>
 38                 <span>|</span>
 39                 <a href="javascript:void(0)">政企服务</a>
 40                 <span>|</span>
 41                 <a href="javascript:void(0)">Select Region</a>
 42             </div>
 43             <div class="topbar-cart">
 44                 <a href="javascript:void(0)">
 45                     <i class="fa fa-shopping-cart"></i>
 46                     购物车
 47                     <span>(0)</span>
 48                 </a>
 49                 <div class="topbar-cart-menu">
 50                     <div class="topbar-cart-txt">
 51                         <span>购物车中还没有商品,赶紧选购吧!</span>
 52                     </div>
 53                 </div>
 54             </div>
 55             <div class="topbar-info">
 56                 <a href="javascript:void(0)">登录</a>
 57                 <span>|</span>
 58                 <a href="javascript:void(0)">注册</a>
 59                 <span>|</span>
 60                 <a href="javascript:void(0)">消息通知</a>
 61             </div>
 62         </div>
 63     </div>
 64     <div class="header">
 65         <div class="header-wrap">
 66             <h1 class="header-logo">
 67                 <a href="javascript:void(0)"></a>
 68                 <span>小米官网</span>
 69             </h1>
 70             <h2 class="header-theme">
 71                 <a href="javascript:void(0)"></a>
 72                 <span>出游季特惠</span>
 73             </h2>
 74             <ul class="header-nav">
 75                 <li class="header-item">
 76                     <a href="javascript:void(0)">小米手机</a>
 77                     <div class="header-item-child">
 78                         <div class="header-item-child-wrap">
 79                             <div class="goods">
 80                                 <h4 class="tag">新品</h4>
 81                                 <img src="img/mix2s-320x220.png" alt="">
 82                                 <div class="info">
 83                                     <p class="title">小米MIX 2S</p>
 84                                     <p class="price">3299元起</p>
 85                                 </div>
 86                             </div>
 87                             <div class="goods">
 88                                 <h4 class="tag">新品</h4>
 89                                 <img src="img/mix2s-320x220.png" alt="">
 90                                 <div class="info">
 91                                     <p class="title">小米MIX 2S</p>
 92                                     <p class="price">3299元起</p>
 93                                 </div>
 94                             </div>
 95                             <div class="goods">
 96                                 <h4 class="tag">新品</h4>
 97                                 <img src="img/mix2s-320x220.png" alt="">
 98                                 <div class="info">
 99                                     <p class="title">小米MIX 2S</p>
100                                     <p class="price">3299元起</p>
101                                 </div>
102                             </div>
103                             <div class="goods">
104                                 <h4 class="tag">新品</h4>
105                                 <img src="img/mix2s-320x220.png" alt="">
106                                 <div class="info">
107                                     <p class="title">小米MIX 2S</p>
108                                     <p class="price">3299元起</p>
109                                 </div>
110                             </div>
111                             <div class="goods">
112                                 <h4 class="tag">新品</h4>
113                                 <img src="img/mix2s-320x220.png" alt="">
114                                 <div class="info">
115                                     <p class="title">小米MIX 2S</p>
116                                     <p class="price">3299元起</p>
117                                 </div>
118                             </div>
119                             <div class="goods">
120                                 <h4 class="tag">新品</h4>
121                                 <img src="img/mix2s-320x220.png" alt="">
122                                 <div class="info">
123                                     <p class="title">小米MIX 2S</p>
124                                     <p class="price">3299元起</p>
125                                 </div>
126                             </div>
127                         </div>
128                     </div>
129                 </li>
130                 <li class="header-item">
131                     <a href="javascript:void(0)">Redmi 红米</a>
132                     <div></div>
133                 </li>
134                 <li class="header-item">
135                     <a href="javascript:void(0)">电视</a>
136                     <div></div>
137                 </li>
138                 <li class="header-item">
139                     <a href="javascript:void(0)">笔记本</a>
140                     <div></div>
141                 </li>
142                 <li class="header-item">
143                     <a href="javascript:void(0)">家电</a>
144                     <div></div>
145                 </li>
146                 <li class="header-item">
147                     <a href="javascript:void(0)">路由器</a>
148                     <div></div>
149                 </li>
150                 <li class="header-item">
151                     <a href="javascript:void(0)">智能硬件</a>
152                     <div></div>
153                 </li>
154                 <li class="header-item">
155                     <a href="javascript:void(0)">服务</a>
156                     <div></div>
157                 </li>
158                 <li class="header-item">
159                     <a href="javascript:void(0)">社区</a>
160                     <div></div>
161                 </li>
162             </ul>
163             <form action="" class="header-search">
164                 <input type="text">
165                 <div class="header-search-list">
166                     <a href="javascript:void(0)">
167                         <span>小米9</span>
168                         <span>约有6件</span>
169                     </a>
170                     <a href="javascript:void(0)">
171                         <span>小米8</span>
172                         <span>约有5件</span>
173                     </a>
174                     <a href="javascript:void(0)">
175                         <span>小米9</span>
176                         <span>约有6件</span>
177                     </a>
178                 </div>
179                 <div class="header-search-placeholder">
180                     <a href="javascript:void(0)">小米9 Pro 5G</a>
181                     <a href="javascript:void(0)">Redmi Note 8</a>
182                 </div>
183                 <button type="submit">
184                     <i class="fa fa-search"></i>
185                 </button>
186             </form>
187         </div>
188     </div>
189     <div class="nav">
190         <div class="nav-wrap">
191             <ul class="nav-list">
192                 <li class="nav-list-li">
193                     <a href="javascript:void" class="nav-list-a">
194                         <span>手机 电话卡</span>
195                         <i class="fa fa-angle-right"></i>
196                     </a>
197                     <ul class="nav-list-details">
198                         <li class="nav-list-details-li">
199                             <ul>
200                                 <li>
201                                     <a href="javascript:void(0)">
202                                         小米4A电视 40英寸
203                                     </a>
204                                 </li>
205                                 <li>
206                                     <a href="javascript:void(0)">
207                                         小米4A电视 40英寸
208                                     </a>
209                                 </li>
210                                 <li>
211                                     <a href="javascript:void(0)">
212                                         小米4A电视 40英寸
213                                     </a>
214                                 </li>
215                                 <li>
216                                     <a href="javascript:void(0)">
217                                         小米4A电视 40英寸
218                                     </a>
219                                 </li>
220                                 <li>
221                                     <a href="javascript:void(0)">
222                                         小米4A电视 40英寸
223                                     </a>
224                                 </li>
225                                 <li>
226                                     <a href="javascript:void(0)">
227                                         小米4A电视 40英寸
228                                     </a>
229                                 </li>
230                             </ul>
231                         </li>
232                         <li class="nav-list-details-li">
233                             <ul>
234                                 <li>
235                                     <a href="javascript:void(0)">
236                                         小米4A电视 40英寸
237                                     </a>
238                                 </li>
239                                 <li>
240                                     <a href="javascript:void(0)">
241                                         小米4A电视 40英寸
242                                     </a>
243                                 </li>
244                                 <li>
245                                     <a href="javascript:void(0)">
246                                         小米4A电视 40英寸
247                                     </a>
248                                 </li>
249                                 <li>
250                                     <a href="javascript:void(0)">
251                                         小米4A电视 40英寸
252                                     </a>
253                                 </li>
254                                 <li>
255                                     <a href="javascript:void(0)">
256                                         小米4A电视 40英寸
257                                     </a>
258                                 </li>
259                                 <li>
260                                     <a href="javascript:void(0)">
261                                         小米4A电视 40英寸
262                                     </a>
263                                 </li>
264                             </ul>
265                         </li>
266 
267 
268                     </ul>
269                 </li>
270                 <li class="nav-list-li">
271                     <a href="javascript:void" class="nav-list-a">
272                         <span>电视 盒子</span>
273                         <i class="fa fa-angle-right"></i>
274                     </a>
275                     <ul class="nav-list-details">
276                         <li class="nav-list-details-li">
277                             <ul>
278                                 <li>
279                                     <a href="javascript:void(0)">
280                                         小米4A电视 40英寸
281                                     </a>
282                                 </li>
283                                 <li>
284                                     <a href="javascript:void(0)">
285                                         小米4A电视 40英寸
286                                     </a>
287                                 </li>
288                                 <li>
289                                     <a href="javascript:void(0)">
290                                         小米4A电视 40英寸
291                                     </a>
292                                 </li>
293                                 <li>
294                                     <a href="javascript:void(0)">
295                                         小米4A电视 40英寸
296                                     </a>
297                                 </li>
298                                 <li>
299                                     <a href="javascript:void(0)">
300                                         小米4A电视 40英寸
301                                     </a>
302                                 </li>
303                                 <li>
304                                     <a href="javascript:void(0)">
305                                         小米4A电视 40英寸
306                                     </a>
307                                 </li>
308                             </ul>
309                         </li>
310                         <li class="nav-list-details-li">
311                             <ul>
312                                 <li>
313                                     <a href="javascript:void(0)">
314                                         小米4A电视 40英寸
315                                     </a>
316                                 </li>
317                                 <li>
318                                     <a href="javascript:void(0)">
319                                         小米4A电视 40英寸
320                                     </a>
321                                 </li>
322                                 <li>
323                                     <a href="javascript:void(0)">
324                                         小米4A电视 40英寸
325                                     </a>
326                                 </li>
327                                 <li>
328                                     <a href="javascript:void(0)">
329                                         小米4A电视 40英寸
330                                     </a>
331                                 </li>
332                                 <li>
333                                     <a href="javascript:void(0)">
334                                         小米4A电视 40英寸
335                                     </a>
336                                 </li>
337                                 <li>
338                                     <a href="javascript:void(0)">
339                                         小米4A电视 40英寸
340                                     </a>
341                                 </li>
342                             </ul>
343                         </li>
344 
345                     </ul>
346                 </li>
347                 <li class="nav-list-li">
348                     <a href="javascript:void" class="nav-list-a">
349                         <span>笔记本 平板</span>
350                         <i class="fa fa-angle-right"></i>
351                     </a>
352                     <ul class="nav-list-details">
353                         <li class="nav-list-details-li">
354                             <ul>
355                                 <li>
356                                     <a href="javascript:void(0)">
357                                         小米4A电视 40英寸
358                                     </a>
359                                 </li>
360                                 <li>
361                                     <a href="javascript:void(0)">
362                                         小米4A电视 40英寸
363                                     </a>
364                                 </li>
365                                 <li>
366                                     <a href="javascript:void(0)">
367                                         小米4A电视 40英寸
368                                     </a>
369                                 </li>
370                                 <li>
371                                     <a href="javascript:void(0)">
372                                         小米4A电视 40英寸
373                                     </a>
374                                 </li>
375                                 <li>
376                                     <a href="javascript:void(0)">
377                                         小米4A电视 40英寸
378                                     </a>
379                                 </li>
380                                 <li>
381                                     <a href="javascript:void(0)">
382                                         小米4A电视 40英寸
383                                     </a>
384                                 </li>
385                             </ul>
386                         </li>
387                         <li class="nav-list-details-li">
388                             <ul>
389                                 <li>
390                                     <a href="javascript:void(0)">
391                                         小米4A电视 40英寸
392                                     </a>
393                                 </li>
394                                 <li>
395                                     <a href="javascript:void(0)">
396                                         小米4A电视 40英寸
397                                     </a>
398                                 </li>
399                                 <li>
400                                     <a href="javascript:void(0)">
401                                         小米4A电视 40英寸
402                                     </a>
403                                 </li>
404                                 <li>
405                                     <a href="javascript:void(0)">
406                                         小米4A电视 40英寸
407                                     </a>
408                                 </li>
409                                 <li>
410                                     <a href="javascript:void(0)">
411                                         小米4A电视 40英寸
412                                     </a>
413                                 </li>
414                                 <li>
415                                     <a href="javascript:void(0)">
416                                         小米4A电视 40英寸
417                                     </a>
418                                 </li>
419                             </ul>
420                         </li>
421 
422                     </ul>
423                 </li>
424             </ul>
425             <div class="nav-slider">
426                 <a href="javascript:void(0)">
427                     <i class="left fa fa-angle-left"></i>
428                     <i class="right fa fa-angle-right"></i>
429                     <ul>
430                         <li class="fa fa-circle"></li>
431                         <li class="fa fa-circle-o"></li>
432                         <li class="fa fa-circle-o"></li>
433                         <li class="fa fa-circle-o"></li>
434                         <li class="fa fa-circle-o"></li>
435                     </ul>
436                 </a>
437             </div>
438         </div>
439     </div>
440     <div class="star">
441         <div class="star-wrap">
442             <ul class="star-list">
443                 <li>
444                     <a href="javascript:void(0)">
445                         <i class="fa fa-clock-o"></i>
446                         <span>小米秒杀</span>
447                     </a>
448                 </li>
449                 <li>
450                     <a href="javascript:void(0)">
451                         <i class="fa fa-user-circle"></i>
452                         <span>企业团购</span>
453                     </a>
454                 </li>
455                 <li><a href=""><i class="fa fa-user-circle"></i><span>F码通道</span></a></li>
456                 <li><a href=""><i class="fa fa-user-circle"></i><span>米粉卡</span></a></li>
457                 <li><a href=""><i class="fa fa-user-circle"></i><span>以旧换新</span></a></li>
458                 <li><a href=""><i class="fa fa-user-circle"></i><span>话费充值</span></a></li>
459             </ul>
460             <a href="javascript:void(0)" class="star-a"></a>
461             <a href="javascript:void(0)" class="star-a"></a>
462             <a href="javascript:void(0)" class="star-a">
463                 <img src="img/mi-316x170.jpg" alt="">
464             </a>
465         </div>
466     </div>
467     <div class="main">
468         <div class="main-wrap">
469             <div class="main-part1">
470                 <div class="main-part1-head">
471                     <h3>家电</h3>
472                     <ul>
473                         <li>家居</li>
474                         <li>电脑</li>
475                         <li>电视影音</li>
476                         <li>热门</li>
477                     </ul>
478                 </div>
479                 <div class="main-part1-body">
480                     <ul class="main-part1-star">
481                         <li>
482                             <a href="javascript:void(0)"></a>
483                         </li>
484                         <li>
485                             <a href="javascript:void(0)"></a>
486                         </li>
487                     </ul>
488                     <ul class="main-part1-normal">
489                         <li>
490                             <h4>减 200 元</h4>
491                             <img src="img/mix2s-320x220.png" alt="">
492                             <div class="info">
493                                 <h5>小米10</h5>
494                                 <p>骁龙865/1亿像素相机</p>
495                                 <p>1499元 <span>1699元</span></p>
496                             </div>
497                             <div class="bottom">
498                                 <p>手机很好用手机很好用手机很好用手机很好用</p>
499                                 <p>拍照效果不错!</p>
500                             </div>
501                         </li>
502                         <li></li>
503                         <li></li>
504                         <li></li>
505                         <li></li>
506                         <li></li>
507                         <li></li>
508                         <li></li>
509                     </ul>
510                 </div>
511             </div>
512         </div>
513     </div>
514     <br>
515     <br>
516     <br>
517     <br>
518     <br>
519     <br>
520     <br>
521     <br>
522     <br>
523     <br>
524 </body>
525 </html>
index.html
技术图片
 1 .ad {
 2     width: 100%;
 3     min-width: 1226px;
 4     background: url(../img/ad.jpg) no-repeat center 0;
 5     /*height: 100%;*/
 6 }
 7 .ad a {
 8     display: block;
 9     width: 100%;
10     height: 120px;
11 }
12 .ad span {
13     display: none;
14 }
ad.css
技术图片
 1 .topbar {
 2     width: 100%;
 3     min-width: 1226px;
 4     background-color: #333;
 5     color: #b0b0b0;
 6 }
 7 
 8 
 9 
10 .topbar-wrap {
11     width: 1226px;
12     margin: 0 auto;
13 }
14 .topbar-wrap:after {
15     content: ‘‘;
16     display: block;
17     clear: both;
18 }
19 
20 
21 
22 .topbar-nav {
23     /*width: 500px;*/
24     float: left;
25     font: normal 12px/40px ‘Arial‘;
26 }
27 .topbar-nav a {
28     color: #b0b0b0;
29 }
30 .topbar-nav span {
31     color: #424242;
32     margin: 0 3px;
33 }
34 .topbar-nav a:hover {
35     color: #fff;
36 }
37 
38 
39 
40 .topbar-cart {
41     width: 120px;
42     float: right;
43     font: normal 12px/40px ‘Arial‘;
44     background-color: #424242;
45     position: relative;
46 }
47 .topbar-cart:hover {
48     background-color: #fff;
49 }
50 .topbar-cart:hover a {
51     color: #ff6700;
52 }
53 .topbar-cart a {
54     color: #b0b0b0;
55 }
56 .topbar-cart i {
57     font-size: 20px;
58     margin: 0 5px 0 20px;
59 }
60 
61 .topbar-cart-menu {
62     width: 316px;
63     background-color: #fff;
64     position: absolute;
65     z-index: 88888;
66     right: 0;
67     box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.25);
68 }
69 
70 .topbar-cart-txt {
71     height: 0px;
72     text-align: center;
73     transition: .1s;
74     overflow: hidden;
75     box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.7);
76 }
77 .topbar-cart:hover .topbar-cart-txt {
78     height: 100px;
79     line-height: 100px;
80 }
81 
82 
83 
84 .topbar-info {
85     width: 140px;
86     float: right;
87     font: normal 12px/40px ‘Arial‘;
88 }
89 .topbar-info a {
90     color: #b0b0b0;
91 }
92 .topbar-info span {
93     color: #424242;
94     margin: 3px;
95 }
96 .topbar-info a:hover {
97     color: #fff;
98 }
topbar.css
技术图片
  1 .header {
  2     width: 100%;
  3     min-width: 1226px;
  4     background-color: #fff;
  5     color: #333;
  6     /*为header-item-child通过参考*/
  7     position: relative;
  8 }
  9 
 10 
 11 
 12 .header-wrap {
 13     width: 1226px;
 14     margin: 0 auto;
 15 }
 16 .header-wrap:after {
 17     content: ‘‘;
 18     display: block;
 19     clear: both;
 20 }
 21 
 22 
 23 
 24 .header-logo {
 25     float: left;
 26     margin-top: 22px;
 27 }
 28 .header-logo a {
 29     display: block;
 30     width: 55px;
 31     height: 55px;
 32     background: url(‘../img/logo.png‘);
 33 }
 34 .header-logo span {
 35     display: none;
 36 }
 37 
 38 
 39 
 40 .header-theme {
 41     float: left;
 42     margin-top: 17px;
 43     margin-left: 10px;
 44 }
 45 .header-theme a {
 46     display: block;
 47     width: 163px;
 48     height: 66px;
 49     background: url(‘../img/theme-163x66.webp‘) no-repeat;
 50 }
 51 .header-theme span {
 52     display: none;
 53 }
 54 
 55 
 56 
 57 .header-nav {
 58     float: left;
 59     font-size: 16px;
 60 }
 61 
 62 .header-item {
 63     float: left;
 64     height: 60px;
 65     margin: 40px 10px 0;
 66 }
 67 .header-item:hover a {
 68     color: #ff6700
 69 }
 70 
 71 .header-item-child {
 72     /*参考系为header*/
 73     position: absolute;
 74     z-index: 666;
 75     left: 0;
 76     top: 100px;
 77     width: 100vw;
 78     background-color: #fff;
 79     min-width: 1226px;
 80     height: 0px;
 81     transition: .2s;
 82     overflow: hidden;
 83 }
 84 .header-item:hover .header-item-child {
 85     height: 260px;
 86     box-shadow: 0 -1px rgba(0, 0, 0, 0.25), 0 5px 5px -3px rgba(0, 0, 0, 0.25);
 87 }
 88 
 89 .header-item-child-wrap {
 90     width: 1226px;
 91     height: 260px;
 92     margin: 0 auto;
 93 }
 94 .header-item-child-wrap .goods {
 95     width: 204px;
 96     font-size: 14px;
 97     font-weight: 400;
 98     text-align: center;
 99     float: left;
100     position: relative;
101 }
102 .header-item-child-wrap .tag {
103     width: 60px;
104     border: 1px solid #ff6700;
105     font-weight: inherit;
106     color: #ff6700;
107     position: absolute;
108     left: 72px;
109     top: 10px;
110 }
111 .header-item-child-wrap img {
112     height: 140px;
113     margin-top: 40px;
114 }
115 .header-item-child-wrap .goods:not(:last-child) img {
116     border-right: 1px solid #ddd;
117 }
118 .header-item-child-wrap .info {
119     margin-top: 20px;
120 }
121 .header-item-child-wrap .price {
122     color: #ff6700;
123 }
124 
125 
126 
127 .header-search {
128     width: 295px;
129     float: right;
130     padding-top: 25px;
131     position: relative;
132 }
133 .header-search input {
134     width: 223px;
135     height: 48px;
136     padding: 0 10px;
137     font-size: 18px;
138     border: 1px solid #e0e0e0;
139     float: left;
140 }
141 .header-search input:focus {
142     border-color: #ff6700;
143 }
144 
145 .header-search button {
146     width: 50px;
147     height: 50px;
148     border: 1px solid #e0e0e0;
149     border-left: none;
150     float: right;
151 }
152 .header-search button:hover {
153     background-color: #ff6700;
154 }
155 .header-search input:focus ~ button {
156     border-color: #ff6700;
157 }
158 
159 .header-search i {
160     font-size: 20px;
161     color: rgba(0, 0, 0, 0.5);
162 }
163 .header-search button:hover i {
164     color: #fff;
165 }
166 
167 
168 
169 .header-search-list {
170     position: absolute;
171     z-index: 666;
172     top: 75px;
173     border: 1px solid #ff6700;
174     border-top: none;
175     width: 243px;
176     background-color: #fff;
177     /*height: 300px; */
178     display: none;
179 }
180 .header-search input:focus ~ .header-search-list {
181     display: block;
182 }
183 .header-search-list a {
184     display: block;
185     padding: 5px 10px;
186 }
187 .header-search-list a:hover {
188     background-color: #eee;
189 }
190 .header-search-list a span:last-child {
191     color: #bbb;
192     float: right;
193 }
194 
195 
196 .header-search-placeholder {
197     position: absolute;
198     top: 42px;
199     right: 60px;
200     font-size: 12px;
201 }
202 .header-search input:focus ~ .header-search-placeholder {
203     display: none;
204 }
205 .header-search-placeholder a {
206     color: #999;
207     float: right;
208     background-color: #eee;
209     margin-left: 10px;
210     padding: 0 5px;
211 }
212 .header-search-placeholder a:hover {
213     color: #fff;
214     background-color: #ff6700;
215 }
header.css
技术图片
 1 html, body, p, h1, h2, h3, h4, h5, h6, form, ul {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 a {
 6     color: #333;
 7     text-decoration: none;
 8 }
 9 img {
10     border: none;
11     vertical-align: middle;
12 }
13 ul {
14     list-style: none;
15 }
16 i {
17     font-style: normal;
18     vertical-align: middle;
19 }
20 textarea {
21     resize: none;
22 }
23 select, input, textarea, button {
24     outline: none;
25     vertical-align: middle;
26 }
27 /*button {
28     -webkit-appearance: none;
29 }
30 */
reset.css
技术图片
  1 .nav {
  2     width: 100%;
  3     min-width: 1226px;
  4     background-color: #fff;
  5 }
  6 
  7 
  8 
  9 .nav-wrap {
 10     width: 1226px;
 11     height: 460px;
 12     margin: 0 auto;
 13     /*background: pink;*/
 14 }
 15 
 16 
 17 
 18 .nav-list {
 19     width: 234px;
 20     height: 420px;
 21     background-color: rgba(0, 0, 0, 0.6);
 22     padding: 20px 0;
 23     /*服务于nav-list-details*/
 24     position: absolute;
 25     z-index: 333;
 26 }
 27 .nav-list-li {
 28     font: 400 14px/42px ‘Arial‘;
 29 }
 30 .nav-list-a {
 31     display: block;
 32     padding-left: 30px;
 33     color: #fff;
 34     position: relative;
 35 }
 36 .nav-list-a:hover {
 37     background-color: #ff6700;
 38 }
 39 .nav-list i {
 40     position: absolute;
 41     right: 20px;
 42     top: 10px;
 43     font-size: 20px;
 44 }
 45 
 46 
 47 
 48 .nav-list-details {
 49     width: 992px;
 50     /*height: 460px;*/
 51     display: none;
 52     background-color: cyan;
 53     /*参考nav-list*/
 54     position: absolute;
 55     top: 0;
 56     left: 234px;
 57 }
 58 .nav-list-li:hover .nav-list-details {
 59     display: block;
 60 }
 61 
 62 .nav-list-details-li {
 63     width: 248px;
 64     height: 460px;
 65     float: left;
 66 }
 67 .nav-list-details-li:nth-child(2n) {
 68     background-color: #eee;
 69 }
 70 .nav-list-details-li:nth-child(2n - 1) {
 71     background-color: #ddd;
 72 }
 73 
 74 .nav-list-details-li a {
 75     display: block;
 76     height: calc(460px / 6);
 77     background: url(../img/TV4A-80x80.png) 20px no-repeat;
 78     background-size: 40px;
 79     padding-left: 80px;
 80     font: normal 16px/calc(460px / 6) ‘Arial‘;
 81     /*background-color: #ccc;*/
 82 }
 83 
 84 
 85 
 86 .nav-slider {
 87     width: 100%;
 88     height: 100%;
 89     background: url(‘../img/slider-2452x920.jpg‘);
 90     background-size: auto 100%;
 91 
 92     position: relative;
 93 }
 94 .nav-slider-mask {
 95     display: block;
 96     width: 992px;
 97     height: 100%;
 98     background-color: rgba(0, 0, 0, 0);
 99     position: absolute;
100     right: 0;
101 
102     font-size: 60px;
103     color: #ccc;
104 }
105 
106 .nav-slider-mask i {
107     padding: 0 5px;
108 }
109 .nav-slider-mask .left {
110     position: absolute;
111     top: 200px;
112 }
113 .nav-slider-mask .right {
114     position: absolute;
115     right: 0;
116     top: 200px;
117 }
118 .nav-slider-mask i:hover {
119     background-color: rgba(0, 0, 0, 0.5);
120 }
121 
122 .nav-slider-mask ul {
123     font-size: 10px;
124     position: absolute;
125     bottom: 20px;
126     right: 50px;
127     letter-spacing: 5px;
128 }
nav.css
技术图片
  1 .main {
  2     width: 100%;
  3     min-width: 1226px;
  4     background-color: #ddd;
  5     margin-top: 20px;
  6 }
  7 .main-wrap {
  8     width: 1226px;
  9     margin: 0 auto;
 10 }
 11 
 12 .main-part1-head {
 13     font-size: 16px;
 14     line-height: 60px;
 15 }
 16 .main-part1-head:after {
 17     content: ‘‘;
 18     display: block;
 19     clear: both;
 20 }
 21 .main-part1-head h3 {
 22     float: left;
 23     font-weight: 500;
 24     letter-spacing: .1em;
 25 }
 26 .main-part1-head ul {
 27     float: right;
 28 }
 29 .main-part1-head li {
 30     float: right;
 31     margin-left: 20px;
 32     line-height: 20px;
 33     margin-top: 20px;
 34 }
 35 .main-part1-head li:hover {
 36     cursor: pointer;
 37     border-bottom: 2px solid #ff6700;
 38     color: #ff6700;
 39 }
 40 
 41 .main-part1-body:after {
 42     content: "";
 43     display: block;
 44     clear: both;
 45 }
 46 .main-part1-star {
 47     float: left;
 48 }
 49 .main-part1-star li {
 50     width: 234px;
 51     transition: .2s;
 52 }
 53 .main-part1-star li:first-child {
 54     margin-bottom: 20px;
 55 }
 56 .main-part1-star a {
 57     display: block;
 58     height: 300px;
 59     background: url(../img/body-star-468x600.jpg) no-repeat;
 60     background-size: auto 100%;
 61 }
 62 .main-part1-star li:hover {
 63     transform: translateY(-1px);
 64     box-shadow: 0 3px 20px -2px rgba(0, 0, 0, .7);
 65 }
 66 .main-part1-normal {
 67     float: right;
 68     width: 976px;
 69     text-align: center;
 70 }
 71 .main-part1-normal li {
 72     width: 234px;
 73     height: 300px;
 74     background-color: #fff;
 75     float: left;
 76     margin: 0 0 20px 10px;
 77     transition: .2s;
 78 }
 79 .main-part1-normal li:hover {
 80     transform: translateY(-1px);
 81     box-shadow: 0 3px 20px -2px rgba(0, 0, 0, .7);
 82 }
 83 .main-part1-normal h4 {
 84     color: #fff;
 85     float: left;
 86     padding: 0 3px;
 87     line-height: 20px;
 88     background-color: red;
 89     font-size: 12px;
 90     margin: 10px 0 0 calc((234px - 60px) / 2);
 91 }
 92 .main-part1-normal img {
 93     display: block;
 94     width: 200px;
 95     padding: 10px 0 0;
 96     margin: 20px auto;
 97 }
 98 .main-part1-normal .info {
 99     line-height: 25px;
100 }
101 .main-part1-normal h5 {
102     font: 600 16px/25px ‘Arial‘;
103 }
104 .main-part1-normal span {
105     text-decoration: line-through;
106     color: #666;
107 }
108 .main-part1-normal li {
109     position: relative;
110 }
111 .main-part1-normal .bottom {
112     width: 234px;
113     
114     background-color: orange;
115     position: absolute;
116     bottom: 0;
117 }
118 .main-part1-normal .bottom p {
119     text-align: left;
120     padding: 0 20px;
121     font-size: 12px;
122     text-indent: 2em;
123 }
124 .main-part1-normal .bottom {
125     height: 0;
126     padding: 0;
127     transition: .2s;
128     overflow: hidden;
129 }
130 .main-part1-normal li:hover .bottom {
131     height: 60px;
132     padding: 10px 0;
133 }
main.css
技术图片
 1 .star {
 2     width: 100%;
 3     min-width: 1226px;
 4     margin-top: 20px;
 5 }
 6 .star-wrap {
 7     width: 1226px;
 8     margin: 0 auto;
 9 }
10 .star-wrap:after {
11     content: ‘‘;
12     display: block;
13     clear: both;
14 }
15 .star-list {
16     float: left;
17     width: 210px;
18     padding: 15px 12px;
19     background-color: #5f5750;
20 }
21 .star-list li {
22     float: left;
23     position: relative;
24 }
25 .star-list li:nth-child(1):after,
26 .star-list li:nth-child(2):after,
27 .star-list li:nth-child(3):after {
28     content: ‘‘;
29     width: 50px;
30     height: 1px;
31     background-color: #665e57;
32     position: absolute;
33     left: 10px;
34 }
35 .star-list li:not(:nth-child(3n+1)):before {
36     content: ‘‘;
37     width: 1px;
38     height: 50px;
39     background-color: #665e57;
40     position: absolute;
41     top: 10px;
42 }
43 .star-list li a {
44     display: block;
45     width: 50px;
46     height: 50px;
47     margin: 10px;
48     font-size: 12px;
49     color: #ddd;
50     text-align: center;
51 }
52 .star-list li i {
53     display: block;
54     font-size: 20px;
55 }
56 .star-list li span {
57     line-height: 25px;
58 }
59 .star-list li:hover a {
60     color: #fff;
61 }
62 .star-a {
63     display: block;
64     width: 316px;
65     height: 170px;
66     float: right;
67 }
68 .star-a:not(:nth-of-type(3)) {
69     margin-left: 15px;
70     background: url(../img/mi-316x170.jpg) no-repeat;
71     background-size: auto 170px;
72 }
73 .star-a img {
74     /*width: 100%;*/
75     height: 100%;
76 }
77 .star-a {
78     transition: .2s;
79 }
80 .star-a:hover {
81     transform: translateY(-1px) scale(1.02);
82     box-shadow: 0 10px 30px -5px rgba(0, 0, 0, .7); 
83 }
star.css

 

M商城

标签:效果   info   tar   closed   cursor   pac   add   back   alt   

原文地址:https://www.cnblogs.com/xuqidong/p/12336936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!