CSS3新特性

1.对于CSS3新特性，支持

淘宝手机端页面：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>淘宝</title>
  6         <meta name="viewport" content="width=375,user-scalable=no" />
  7         <link rel="stylesheet" type="text/css" href="css/index.css"/>
  8     </head>
  9     <body>
 10         <!--.nav>(.logo+(a.search>(.icon+span)))-->
 11         <div class="nav">
 12             <div class="logo"></div>
 13             <a href="" class="search"><span class="icon"></span><span>寻找宝贝店铺</span></a>
 14         </div>
 15         
 16         <div class="swiper">  <!--滚动图片-->
 17             
 18         </div>
 19         <!--图标快捷-->
 20         <!--.iconList>(a.iconItem>(img.icon+span.text))*10-->
 21         
 22         <div class="iconList">
 23             <a href="" class="iconItem"><img src="img/TB1.webp" alt="" class="icon" /><span class="text">天猫</span></a>
 24             <a href="" class="iconItem"><img src="img/TB2.png" alt="" class="icon" /><span class="text">聚划算</span></a>
 25             <a href="" class="iconItem"><img src="img/TB9.png" alt="" class="icon" /><span class="text">天猫国际</span></a>
 26             <a href="" class="iconItem"><img src="img/TB8.png" alt="" class="icon" /><span class="text">外卖</span></a>
 27             <a href="" class="iconItem"><img src="img/TB7.webp" alt="" class="icon" /><span class="text">天猫超市</span></a>
 28             <a href="" class="iconItem"><img src="img/TB6.webp" alt="" class="icon" /><span class="text">充值中心</span></a>
 29             <a href="" class="iconItem"><img src="img/TB5.png" alt="" class="icon" /><span class="text">飞猪旅行</span></a>
 30             <a href="" class="iconItem"><img src="img/TB4.png" alt="" class="icon" /><span class="text">领金币</span></a>
 31             <a href="" class="iconItem"><img src="img/TB3.png" alt="" class="icon" /><span class="text">拍卖</span></a>
 32             <a href="" class="iconItem"><img src="img/TB10.png" alt="" class="icon" /><span class="text">分类</span></a>
 33         </div>
 34         <!--淘宝头条-->
 35         <!--快捷代码-->
 36         <!--.toutiao>(.ttLeft+(.ttMain>(.jhItem>(span.tag+span.text))*2)+.ttRight)-->
 37         <div class="toutiao">
 38             <div class="ttLeft"></div>
 39             <div class="ttMain">
 40                 <div class="jhItem"><span class="tag">围观</span><span class="text">正式官宣！骁龙855国产手机新物种来了</span></div>
 41                 <div class="jhItem"><span class="tag">围观</span><span class="text">上市就卖出12000台，国六标准仅8万</span></div>
 42             </div>
 43             <div class="ttRight"></div>
 44         </div>
 45         
 46         <!--淘抢购-->
 47         <!--快捷代码-->
 48         <!--.qg>(.qgItem>(.left>(.h1+.brif+.prod))+.right)*4-->
 49         <div class="qg">
 50             <div class="qgItem">
 51                 <div class="left">
 52                     <div class="h1"></div>
 53                     <div class="brif"></div>
 54                     <div class="prod1"></div>
 55                 </div>
 56                 <div class="right1"></div>
 57             </div>
 58             <div class="qgItem">
 59                 <div class="left">
 60                     <div class="h2"></div>
 61                     <div class="brif">高颜值美物</div>
 62                     <div class="prod2"></div>
 63                 </div>
 64                 <div class="right2"></div>
 65             </div>
 66             <div class="qgItem">
 67                 <div class="left">
 68                     <div class="h3"></div>
 69                     <div class="brif">有料小视频</div>
 70                     <div class="prod3"></div>
 71                 </div>
 72                 <div class="right3"></div>
 73             </div>
 74             <div class="qgItem">
 75                 <div class="left">
 76                     <div class="h4"></div>
 77                     <div class="brif">购物全攻略</div>
 78                     <div class="prod4"></div>
 79                 </div>
 80                 <div class="right4"></div>
 81             </div>
 82         </div>
 83         
 84         <!--淘宝直播-->
 85         <!--快捷代码-->
 86         <!--.zhibo>(.zbTop>((.zbTleft>(.title+.text))+(.zbTright>(.title+.text))))+(.zbCenter>((.liveItem>(img+h1{亲子乐园}+p{印花长袖T恤}))*3))+(.zbBottom>(.tag+.text+.qfl{抢福利}))-->
 87         <div class="zhibo">
 88             
 89             <div class="zbTop">
 90                 <div class="zbTleft">
 91                     <div class="title">“路转粉”每一秒都在发生</div>
 92                     <div class="text">败家主播天天有，边看直播边剁手！</div>
 93                 </div>
 94                 <div class="zbTright">
 95                     <div class="title">主播优选</div>
 96                     <div class="text">宽肩带盒子包</div>
 97                 </div>
 98             </div>
 99             
100             <div class="zbCenter">
101                 <div class="liveItem">
102                     <img src="img/TB_lejialehuo.webp" alt="" />
103                     <h1>乐家乐活</h1>
104                     <p>免钉粘胶挂钩</p>
105                 </div>
106                 <div class="liveItem">
107                     <img src="img/TB_nanrenzhuang.webp" alt="" />
108                     <h1>男人装</h1>
109                     <p>户外中筒靴</p>
110                 </div>
111                 <div class="liveItem">
112                     <img src="img/TB_quanqiuxinac.webp" alt="" />
113                     <h1>全球现场</h1>
114                     <p>雪花秀爽肤水</p>
115                 </div>
116             </div>
117             
118             <div class="zbBottom">
119                 <div class="tag">主播推荐</div>
120                 <div class="text">品质好货，不能错过的亲民价</div>
121                 <div class="qfl">抢福利</div>
122             </div>
123             
124         </div>
125         <!--tab 导航-->
126         <!--快捷结构代码-->
127         <!--.tabList>(.tabItem>(.icon+.text))*5-->
128         <div class="tabList">
129             <div class="tabItem">
130                 <div class="icon"></div>
131                 <div class="text">首页</div>
132             </div>
133             <div class="tabItem">
134                 <div class="icon"></div>
135                 <div class="text">购物车</div>
136             </div>
137             <div class="tabItem">
138                 <div class="icon"></div>
139                 <div class="text">订单列表</div>
140             </div>
141             <div class="tabItem">
142                 <div class="icon"></div>
143                 <div class="text">我的淘宝</div>
144             </div>
145             <div class="tabItem">
146                 <div class="icon"></div>
147                 <div class="text">更多</div>
148             </div>
149         </div>
150     </body>
151 </html>
  1 /*初始化*/
  2 *{
  3     margin: 0;
  4     padding: 0;
  5     box-sizing: border-box;
  6 }
  7 .nav{
  8     display: flex;
  9     width: 375px;
 10     height: 37;
 11     background: #FF852A;
 12     align-items: center;
 13     justify-content: center;
 14 }
 15 
 16 .nav .logo{
 17     width: 37px;
 18     height: 37px;
 19     background-image: url(../img/taobao_logo.png);
 20     background-position: center;
 21     background-size: 70%;
 22     background-repeat: no-repeat;
 23 }
 24 .nav .search{
 25     width: 324px;
 26     height: 25px;
 27     background: #FF4E22;
 28     border-radius: 4px;
 29     margin-right: 10px;
 30     display: flex;
 31     justify-content: center;
 32     align-items: center;
 33     color: #fff;
 34     font-size: 12px;
 35     text-decoration: none;
 36 }
 37 
 38 .nav .search .icon{
 39     width: 25px;
 40     height: 25px;
 41     background-image: url(../img/search-b.svg);
 42     background-size: 70%;
 43     background-repeat: no-repeat;
 44     background-position: center 70%;
 45     display: block;
 46 }
 47 
 48 /*轮播*/
 49 .swiper{
 50     width: 375px;
 51     height: 120px;
 52     background-image: url(../img/huduxian.webp), url(../img/Tzhuanhuan.jpg);
 53     background-size: 100% 100%;
 54     background-position: 0px 113px, center;
 55 }
 56 
 57 /*图标列表*/
 58 .iconList{
 59     width: 375px;
 60     height: 160px;
 61     display: flex; /*设置弹性布局*/
 62     justify-content: space-around; /*主轴分布*/
 63     flex-wrap: wrap;  /*换行*/
 64     align-content: space-around;   /*多行侧轴分布*/
 65 }
 66 
 67 .iconList .iconItem{
 68     width: 20%;
 69     height: 67px;
 70     display: flex; /*设置弹性布局*/
 71     flex-direction: column;
 72     justify-content: center;
 73     align-items: center;
 74     
 75     font-size: 11px;
 76     color: rgb(102,102,102);
 77     text-decoration: none;
 78     
 79 }
 80 .iconList .iconItem img{
 81     width: 80%;
 82     height: auto;
 83 }
 84 .iconList .iconItem .text{
 85     padding-top: 3px;
 86 }
 87 
 88 /*
 89  * 淘宝头条
 90  */
 91 .toutiao{
 92     background-color: #FFFFFF;
 93     width: 375px;
 94     height: 60px;
 95     display: flex;
 96 }
 97 
 98 .toutiao .ttLeft{
 99     width: 60px;
100     height: 60px;
101     background-image: url(../img/toutiaorewen.webp);
102     background-size: 60%;
103     background-repeat: no-repeat;
104     background-position: center;
105 }
106 .toutiao .ttMain{
107     width: 232px;
108     height: 60px;
109     display: flex;
110     flex-direction: column;
111     font-size: 12px;
112     justify-content: center;
113 }
114 
115 .ttMain .jhItem{
116     width: 232px;
117     height: 19px;
118     display: flex;
119 }
120 .ttMain .jhItem .tag{
121     display: flex;
122     width: 28px;
123     height: 13px;
124     align-items: center;
125     justify-content: center;
126     color: rgb(230, 10, 31);
127     border: 1px solid rgb(230, 10, 31);
128     border-radius: 3px;
129     margin-right: 4px;
130 }
131 
132 .ttMain .jhItem .text{
133     width: 200px;
134     height: 19px;
135     
136     overflow: hidden;  /*溢出隐藏*/
137     white-space: nowrap;  /*不换行*/
138     text-overflow: ellipsis; /*文字超出之后显示的样式*/
139 }
140 
141 .toutiao .ttRight{
142     width: 85px;
143     height: 60px;
144     background-image: url(../img/toutiaorewen3.png),url(../img/toutiaorewen2.png);
145     background-size: 100% 100%;
146 }
147 
148 /*淘抢购*/
149 .qg{
150     background-color: #FFF;
151     margin-top: 10px;
152     width: 375px;
153     height: 224px;
154     display: flex;
155     flex-wrap: wrap;
156 }
157 
158 .qg .qgItem{
159     width: 187.5px;
160     height: 112px;
161     display: flex;
162     border-bottom: 1px solid #efefef;
163 }
164 .qg .qgItem .left{
165     width: 94px;
166     display: flex;
167     flex-direction: column;
168 }
169 
170 .qg .qgItem .h1{
171     background-image: url(../img/taoqianggou.webp);
172     height: 25px;
173     background-size: auto 100%;
174 }
175 .qg .qgItem .prod1{
176     flex: 1;
177     background-image: url(../img/yifu.webp);
178     baseline-shift: 75px auto;
179     background-position: 50% 80%;
180     background-repeat: no-repeat;
181 }
182 .qg .qgItem .brif{
183     font-size: 12px;
184     color: rgb(153, 153, 153);
185       padding-left: 10px;
186       padding-top: 2px;
187 }
188 .qg .qgItem .right1{
189     flex: 1;
190     background-image: url(../img/maozi.webp);
191     background-size: 75px auto;
192     background-position: 50% 80%;
193     background-repeat: no-repeat;
194 }
195 
196 
197 .qg .qgItem .h2{
198     background-image: url(../img/youhaohuo.webp);
199     height: 25px;
200     background-size: auto 100%;
201 }
202 .qg .qgItem .prod2{
203     flex: 1;
204     background-image: url(../img/xiezi.webp);
205     baseline-shift: 75px auto;
206     background-position: 50% 80%;
207     background-repeat: no-repeat;
208 }
209 .qg .qgItem .right2{
210     flex: 1;
211     background-image: url(../img/huazhuangping.webp);
212     background-size: 75px auto;
213     background-position: 50% 80%;
214     background-repeat: no-repeat;
215 }
216 
217 
218 
219 
220 .qg .qgItem .h3{
221     background-image: url(../img/wayouxiaoshiping.webp);
222     height: 25px;
223     background-size: auto 100%;
224 }
225 .qg .qgItem .prod3{
226     flex: 1;
227     background-image: url(../img/shoubiao.webp);
228     baseline-shift: 75px auto;
229     background-position: 50% 40%;
230     background-repeat: no-repeat;
231 }
232 .qg .qgItem .right3{
233     flex: 1;
234     background-image: url(../img/shouji.webp);
235     background-size: 75px auto;
236     background-position: 50% 80%;
237     background-repeat: no-repeat;
238 }
239 
240 
241 
242 .qg .qgItem .h4{
243     background-image: url(../img/bimaiqingdan.webp);
244     height: 25px;
245     background-size: auto 100%;
246 }
247 .qg .qgItem .prod4{
248     flex: 1;
249     background-image: url(../img/hongyifu.webp);
250     baseline-shift: 75px auto;
251     background-position: 50% 80%;
252     background-repeat: no-repeat;
253 }
254 .qg .qgItem .right4{
255     flex: 1;
256     background-image: url(../img/qunzi.webp);
257     background-size: 75px auto;
258     background-position: 50% 80%;
259     background-repeat: no-repeat;
260 }
261 
262 /*直播*/
263 .zhibo{
264     width: 375px;
265     height: 352.5px;
266     margin-top: 20px;
267     position: relative;  /*相对定位*/
268     background-color: #fff;
269     margin-bottom: 43px;
270 }
271 .zhibo:before{
272     content: "";  /*空值也不能省略*/
273     display: block;
274     width: 375px;
275     height: 29px;
276     position: absolute;  /*绝对定位*/
277     left: 0;
278     top: -13px;
279     background-image: url(../img/TB_zhibo.png);
280     background-size: 100% 100%;
281     z-index: 1;
282 }
283 
284 .zhibo .zbTop{
285     width: 375px;
286     height: 125px;
287     display: flex;
288 }
289 .zhibo .zbTop .zbTleft{
290     width: 249.5px;
291     height: 125px;
292     background-image: url(../img/TB_Tleft2.webp),url(../img/TB_Tleft1.jpg);
293     background-size: 100% 100%;
294     padding-left: 10px;
295     position: relative;  /*相对定位*/
296 }
297 .zhibo .zbTop .zbTleft:before{
298     content: "";  /*空值也要写上*/
299     width: 20px;
300     height: 20px;
301     background-image: url(../img/TB_Tleft3.webp);
302     background-size: 100% 100%;
303     position: absolute; /*绝对定位*/
304     right: 15px;
305     bottom: 20px;
306 }
307 .zhibo .zbTop .title{
308     margin-top: 78px;
309     font-size: 14px;
310     color: #fff;
311 }
312 .zhibo .zbTop .text{
313     font-size: 12px;
314     color: #fff;
315     opacity: 0.8;  /*透明度0.8*/
316 }
317 
318 .zhibo .zbTop .zbTright{
319     flex: 1;
320     height: 125px;
321     background-image: url(../img/TB_Tleft2.webp),url(../img/TB_baobao.webp);
322     background-image: 100% 100%;
323     padding-left: 10px;
324 }
325 .zhibo .zbCenter{
326     width: 375px;
327     height: 180px;
328     display: flex;
329 }
330 .zhibo .zbCenter .liveItem{
331     flex: 1;
332     display: flex;
333     flex-direction: column;
334 }
335 .zhibo .zbCenter .liveItem img{
336     width: 100%;
337     height: auto;
338 }
339 .zhibo .zbCenter .liveItem h1{
340     font-size: 14px;
341     color: rgb(51, 51, 51);
342     padding: 5px 10px 0px;
343 }
344 .zhibo .zbCenter .liveItem p{
345     font-size: 12px;
346     color: rgb(153, 153, 153);
347     opacity: 0.8;
348     padding: 0px 10px;
349 }
350 
351 .zhibo .zbBottom{
352     width: 375px;
353     height: 36px;
354     display: flex;
355     align-items: center;  /*盒子居中对齐*/
356     position: relative;  /*相对定位*/
357 }
358 .zhibo .zbBottom .tag{
359     display: inline-block;
360     font-size: 12px;
361     height: 16px;
362     margin-left: 10px;
363     color: rgb(253, 30, 87);
364     border-style: solid;
365     border-width: 0.5px;
366     place-self: center flex-start;
367     border-color: rgb(253, 30, 87);
368     background-color: rgba(255, 255, 255, 0);
369     border-radius: 3px;
370     line-height: 15px;
371 }
372 .zhibo .zbBottom .text{
373     width: 169px;
374     height: 16px;
375     font-size: 12px;
376     padding-left: 5px;
377 }
378 .zhibo .zbBottom .qfl{
379     width: 39;
380     font-size: 12px;
381     position: absolute; /*绝对定位*/
382     right: 20px;
383     top: 10px;
384 }
385 .zhibo .zbBottom .qfl:after{
386     content: ">";
387     color: #ccc;
388     padding-left: 5px;
389 }
390 
391 /*tab导航*/
392 .tabList{
393     width: 375px;
394     height: 43px;
395     background-color: #fff;
396     position: fixed;
397     left: 0;
398     bottom: 0;
399     display: flex;
400     align-items: center;
401     border-top: 1px solid #efefef;
402     z-index: 10;
403 }
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/abcdjava/p/10935093.html