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 }