樂
喜
安
平

HTML5-16

唯品会.html

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>唯品会</title>
  6         <link rel="stylesheet" type="text/css" href="css/zixuereset.css"/>
  7         <link rel="stylesheet" type="text/css" href="css/weipinhui.css"/>
  8     </head>
  9     <body>
 10         <!-- 容器 -->
 11         <div id="con">
 12             <!-- 广告 -->
 13             <div id="banner">
 14                 <img src="img/top.jpg" >
 15             </div>
 16             <!-- 商品分类区 -->
 17             <div id="type">
 18                 <div id="type1">
 19                     <img src="img/211.png" >
 20                     <img src="img/212.png" >
 21                     <img src="img/213.png" >
 22                     <img src="img/214.png" >
 23                     <img src="img/215.png" >
 24                 </div>
 25                 <div id="type2">
 26                     <img src="img/221.png" >
 27                     <img src="img/222.png" >
 28                     <img src="img/223.png" >
 29                     <img src="img/224.png" >
 30                     <img src="img/225.png" >
 31                 </div>
 32             </div>
 33             <div id="brand">
 34                 <div id="brandBanner">
 35                     <img src="img/31.jpg" >
 36                 </div>
 37                 <div id="brandimg">
 38                     <div class="brandimgitem">
 39                         <img src="img/311.jpg" >
 40                     </div>
 41                     <div class="brandimgitem">
 42                         <img src="img/312.jpg" >
 43                     </div>
 44                     <div class="brandimgitem">
 45                         <img src="img/313.jpg" >
 46                     </div>
 47                 </div>
 48             </div>
 49             <div id="price">
 50                 <div id="priceBanner">
 51                     <img src="img/41.png" >
 52                 </div>
 53                 <p>
 54                     14点场|还剩
 55                     <span class="time" >00</span>:
 56                     <span class="time" >00</span>:
 57                     <span class="time" >00</span>
 58                 </p>
 59                 <ul id= "pricelist">
 60                     <li>
 61                         <div class="priceimg">
 62                             <img src="img/411.jpg" >
 63                         </div>
 64                         <p><span class="pink" >快抢价</span>&nbsp;$99起</p>
 65                         <p class="curprice">$520</p>
 66                     </li>
 67                     <li>
 68                         <div class="priceimg">
 69                             <img src="img/411.jpg" >
 70                         </div>
 71                         <p><span class="pink" >快抢价</span>&nbsp;$99起</p>
 72                         <p class="curprice">$520</p>
 73                     </li>
 74                     <li>
 75                         <div class="priceimg">
 76                             <img src="img/411.jpg" >
 77                         </div>
 78                         <p><span class="pink" >快抢价</span>&nbsp;$99起</p>
 79                         <p class="curprice">$520</p>
 80                     </li>
 81                     <li>
 82                         <div class="priceimg">
 83                             <img src="img/411.jpg" >
 84                         </div>
 85                         <p><span class="pink" >快抢价</span>&nbsp;$99起</p>
 86                         <p class="curprice">$520</p>
 87                     </li>
 88                 </ul>
 89             </div>
 90             <!-- 特卖区 -->
 91             <div id="temai">
 92                 <div id="temaibanner">
 93                     <img src="img/51.jpg" >
 94                 </div>
 95                 <ul id="temailist">
 96                     <li>
 97                         <div class="temaiimg">
 98                             <img src="img/511.jpg" >
 99                             <p>
100                                 <span>拉夏贝尔集团品牌专场</span>
101                                 <span class="timel">剩余2小时</span>
102                             </p>
103                             <p>2.1折|夏拉贝尔女装,全场折上折7.5折!</p>
104                         </div>
105                     </li>
106                     <li>
107                         <div class="temaiimg">
108                         <img src="img/511.jpg" >
109                         <p>
110                             <span>拉夏贝尔集团品牌专场</span>
111                             <span class="timel">剩余2小时</span>
112                         </p>
113                         <p>2.1折|夏拉贝尔女装,全场折上折7.5折!</p>
114                         </div>
115                     </li>
116                     <li>
117                         <div class="temaiimg">
118                         <img src="img/511.jpg" >
119                         <p>
120                             <span>拉夏贝尔集团品牌专场</span>
121                             <span class="timel">剩余2小时</span>
122                         </p>
123                         <p>2.1折|夏拉贝尔女装,全场折上折7.5折!</p>
124                         </div>
125                     </li>
126                 </ul>
127             </div>
128         </div>
129     </body>
130 </html>

weipinhui.css

 1 *{
 2     border: 1px solid black;
 3 }
 4 html,body,#con{
 5     width: 100%;
 6     height: 100%;
 7 }
 8 #banner{
 9     width: 100%;
10 }
11 #banner img{
12     width: 100%;
13 }
14 #type{
15     width: 100%;
16 }
17 #type1,#type2{
18     width: 100%;
19     display: flex;
20 }
21 #type div img{
22     width: 20%;
23 }
24 /* 品牌区 */
25 #brand,#brandBanner{
26     width: 100%;
27 }
28 #brandBanner img{
29     width: 100%;
30 }
31 #brandimg{
32     display: flex;
33     width: 100%;
34 }
35 .brandimgitem{
36     flex: 1;
37 }
38 .brandimgitem img{
39     width: 100%;
40 }
41 #price,#priceBanner,#priceBanner img{
42     width: 100%;
43 }
44 #price > p{
45     font-size: 3.7vw;
46     text-align: center;
47     margin: 0 0 2.1vw 0;
48 }
49 .time{
50     font-size: 3.7vw;
51     background-color: black;
52     color: white;
53 }
54 #pricelist{
55     width: 100%;
56     display: flex;
57 }
58 #pricelist li{
59     flex: 1;
60 }
61 #pricelist li div{
62     width: 100%;
63 }
64 #pricelist li div img{
65     width: 100%;
66 }
67 #pricelist li p{
68     font-size: 3.7vw;
69 }
70 .pink{
71     font-size: 3.7vw;
72     background-color: pink;
73 }
74 .curprice{
75     color: #A18080;
76     text-align: center;
77 }
78 #temai,#temaibanner,#temaibanner img{
79     width: 100%;
80 }
81 #temailist,#temailist li{
82     width: 100%;
83 }
84 .temaiimg{
85     width: 100%;
86 }
87 .temaiimg img{
88     width: 100%;
89 }
90 #temailist li p{
91     font-size: 3.7vw;
92     margin: 2.1vw 0;
93 }
94 .timel{
95     color: #A1A1A0;
96     float: right;
97     margin: 0 4vw 0 0;
98 }

 

posted @ 2021-07-09 20:39  喵酱爱吃鱼  阅读(33)  评论(0)  编辑  收藏  举报