search

博客列表 >淘宝移动端首页的商品列表

淘宝移动端首页的商品列表

Blackeye
Blackeye原创
2022年03月31日 19:19:21413浏览

show

  1.     <main>
  2.         <div class="topMain">
  3.             <div class="topMain-left">
  4.               <div class="item1">
  6.                 <div class="title">聚划算</div>
  7.                 <div class="items" style="background-color:bisque;">
  8.                   <a href="">
  9.                     <span style="color: tomato;">品牌折扣</span>
  10.                     <img src="static/images/items/item1.png" alt="">
  11.                   </a>
  12.                 </div>
  14.               </div>
  15.               <div class="item2">
  17.                 <div class="title"></div>
  18.                 <div class="items" style="background-color:bisque;">
  19.                   <a href="">
  20.                     <span style="color: tomato;">划算好货</span>
  21.                     <img src="static/images/items/item2.png" alt="">
  22.                   </a>
  23.                 </div>
  25.               </div>
  26.               <div class="item3">
  28.                 <div class="title">淘抢购</div>
  29.                 <div class="items">
  30.                   <a href="">
  31.                     <span>限时半价</span>
  32.                     <img src="static/images/items/item3.png" alt="">
  33.                   </a>
  34.                 </div>
  36.               </div>
  37.               <div class="item4">
  39.                 <div class="title">天天特卖</div>
  40.                 <div class="items">
  41.                   <a href="">
  42.                     <span>9.9包邮</span>
  43.                     <img src="static/images/items/item4.png" alt="">
  44.                   </a>
  45.                 </div>
  47.               </div>
  48.               <div class="item5">
  50.                 <div class="title">每日好店</div>
  51.                 <div class="items">
  52.                   <a href="">
  53.                     <span>挖深藏的店</span>
  54.                     <img src="static/images/items/item5.png" alt="">
  55.                   </a>
  56.                 </div>
  58.               </div>
  59.               <div class="item6">
  61.                 <div class="title"><span style="color: white; background-color: orange;">精选</span></div>
  62.                 <div class="items" style="background-color: white;">
  63.                   <a href="">
  64.                     <span></span>
  65.                     <img src="static/images/items/item7.jpg" alt="" style="width: 0.7rem; height: 0.75rem;">
  66.                   </a>
  67.                 </div>
  69.               </div>
  70.             </div>
  72.             <div class="topMain-right">
  73.               <div class="item1">
  75.                 <div class="title">淘宝直播</div>
  76.                 <div class="items">
  77.                   <a href="">
  78.                     <span>好物传送门</span>
  79.                     <img src="static/images/items/item1.png" alt="">
  80.                   </a>
  81.                 </div>
  83.               </div>
  84.               <div class="item2">
  86.                 <div class="title"><span style="color:white; background-color: red;">LIVE&gt;</span></div>
  87.                 <div class="items" style="background-color: white;">
  88.                   <a href="">
  89.                     <span></span>
  90.                     <img src="static/images/items/item9.png" alt="" style="width: 0.7rem; height: 0.75rem;">
  91.                   </a>
  92.                 </div>
  94.               </div>
  95.               <div class="item3">
  97.                 <div class="title">有好货</div>
  98.                 <div class="items">
  99.                   <a href="">
  100.                     <span>全民口碑推荐</span>
  101.                     <img src="static/images/items/item10.png" alt="">
  102.                   </a>
  103.                 </div>
  105.               </div>
  106.               <div class="item4">
  108.                 <div class="title"><span style="color: white; background-color: darkturquoise; margin-left: -0.35rem;">品质好物</span></div>
  109.                 <div class="items" style="background-color: white;">
  110.                   <a href="">
  111.                     <span></span>
  112.                     <img src="static/images/items/item11.png" alt="" style="width: 0.7rem; height: 0.75rem;">
  113.                   </a>
  114.                 </div>
  116.               </div>
  117.               <div class="item5">
  119.                 <div class="title">哇哦视频</div>
  120.                 <div class="items">
  121.                   <a href="">
  122.                     <span>粉丝都爱看</span>
  123.                     <img src="static/images/items/item12.png" alt="">
  124.                   </a>
  125.                 </div>
  127.               </div>
  128.               <div class="item6">
  130.                 <div class="title"><span style="color: white; background-color: coral;">亲测</span></div>
  131.                 <div class="items" style="background-color: white;">
  132.                   <a href="">
  133.                     <span></span>
  134.                     <img src="static/images/items/item13.webp" alt="" style="width: 0.7rem; height: 0.75rem;">
  135.                   </a>
  136.                 </div>
  138.               </div>
  139.             </div>
  142.             <div class="topMain-buttom">
  143.               <img src="static/images/taobao/tt.png" alt="">
  144.               <a href="">
  145.                 <span>评测</span>
  146.                 <span>实测：五款最强防霾滤芯安利给你</span>
  147.               </a>
  148.             </div>
  149.         </div>
  151.         <div class="displayMain">
  152.             <div class="advance">
  153.               <img src="static/images/taobao/cnxh.png" alt="">
  154.             </div>
  155.             <div class="displayWindow">
  156.               <div class="item">
  157.                 <a href="">
  158.                   <img src="static/images/items/item14.webp" alt="">
  159.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  160.                   <div class="priceInfo">
  161.                     <span style="font-size: 0.11rem;">￥</span>
  162.                     <span style="font-size: 0.14rem;">361</span>
  163.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  164.                   </div>
  165.                 </a>
  166.               </div>
  167.               <div class="item">
  168.                 <a href="">
  169.                   <img src="static/images/items/item14.webp" alt="">
  170.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  171.                   <div class="priceInfo">
  172.                     <span style="font-size: 0.11rem;">￥</span>
  173.                     <span style="font-size: 0.14rem;">361</span>
  174.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  175.                   </div>
  176.                 </a>
  177.               </div>
  178.               <div class="item">
  179.                 <a href="">
  180.                   <img src="static/images/items/item14.webp" alt="">
  181.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  182.                   <div class="priceInfo">
  183.                     <span style="font-size: 0.11rem;">￥</span>
  184.                     <span style="font-size: 0.14rem;">361</span>
  185.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  186.                   </div>
  187.                 </a>
  188.               </div>
  189.               <div class="item">
  190.                 <a href="">
  191.                   <img src="static/images/items/item14.webp" alt="">
  192.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  193.                   <div class="priceInfo">
  194.                     <span style="font-size: 0.11rem;">￥</span>
  195.                     <span style="font-size: 0.14rem;">361</span>
  196.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  197.                   </div>
  198.                 </a>
  199.               </div>
  200.               <div class="item">
  201.                 <a href="">
  202.                   <img src="static/images/items/item14.webp" alt="">
  203.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  204.                   <div class="priceInfo">
  205.                     <span style="font-size: 0.11rem;">￥</span>
  206.                     <span style="font-size: 0.14rem;">361</span>
  207.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  208.                   </div>
  209.                 </a>
  210.               </div>
  211.               <div class="item">
  212.                 <a href="">
  213.                   <img src="static/images/items/item14.webp" alt="">
  214.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  215.                   <div class="priceInfo">
  216.                     <span style="font-size: 0.11rem;">￥</span>
  217.                     <span style="font-size: 0.14rem;">361</span>
  218.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  219.                   </div>
  220.                 </a>
  221.               </div>
  222.               <div class="item">
  223.                 <a href="">
  224.                   <img src="static/images/items/item14.webp" alt="">
  225.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  226.                   <div class="priceInfo">
  227.                     <span style="font-size: 0.11rem;">￥</span>
  228.                     <span style="font-size: 0.14rem;">361</span>
  229.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  230.                   </div>
  231.                 </a>
  232.               </div>
  233.               <div class="item">
  234.                 <a href="">
  235.                   <img src="static/images/items/item14.webp" alt="">
  236.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  237.                   <div class="priceInfo">
  238.                     <span style="font-size: 0.11rem;">￥</span>
  239.                     <span style="font-size: 0.14rem;">361</span>
  240.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  241.                   </div>
  242.                 </a>
  243.               </div>
  244.               <div class="item">
  245.                 <a href="">
  246.                   <img src="static/images/items/item14.webp" alt="">
  247.                   <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
  248.                   <div class="priceInfo">
  249.                     <span style="font-size: 0.11rem;">￥</span>
  250.                     <span style="font-size: 0.14rem;">361</span>
  251.                     <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
  252.                   </div>
  253.                 </a>
  254.               </div>
  255.             </div>
  256.         </div>
  257.     </main>
  1. main{
  2.     position: relative;
  3.     padding: 0.1rem;
  4.     top: 3.36rem;
  6. }
  7. main .topMain{
  8.     background-color: #fff;
  9.     height: 4.03rem;
  10.     border-radius: 0.06rem;
  11.     display: grid;
  12.     grid-template-columns: repeat(2,1fr);
  13.     grid-template-rows: 1fr 1fr 1fr .4rem;
  14.     gap: .1rem;
  15. }
  17. main .topMain-left{
  18.     grid-area: 1 / 1 / 4 / 2;
  19. }
  21. main .topMain-right{
  22.     grid-area: 1 / 2 / 4 / 3;
  23. }
  25. main .topMain-buttom{
  26.     grid-area: 4 / 1 / 5 / 3;
  27.     height: .4rem;
  28.     font-size: 0.13rem;
  29.     display: grid;
  30.     grid-template-columns: .75rem 1fr;
  31.     place-content: center;
  32. }
  34. main .topMain-buttom img{
  35.     width: 100%;
  36.     height: 100%;
  37. }
  39. main .topMain-buttom img{
  40.     width: .64rem;
  41.     height: .2rem;
  42.     margin-left: .1rem;
  43. }
  45. main .topMain-buttom a{
  46.     place-self: center start;
  47. }
  49. main .topMain-buttom a span:first-of-type{
  50.     padding: 0.02rem 0.05rem;
  51.     background-color: #feefec;
  52.     color: #e86217;
  53.     border-radius: .04rem;
  54.     margin-left: 0.1rem;
  55. }
  57. main .topMain .topMain-left{
  58.     display: grid;
  59.     grid-template-columns: repeat(2,1fr);
  60.     grid-template-rows: repeat(3,1fr);
  61. }
  63. main .topMain .topMain-right{
  64.     display: grid;
  65.     grid-template-columns: repeat(2,1fr);
  66.     grid-template-rows: repeat(3,1fr);
  67.     border-left: .01rem solid #eee;
  68. }
  70. main .topMain .topMain-left img,
  71. main .topMain .topMain-right img
  72. {
  73.     width: 100%;
  74.     height: 100%;
  75.     width: .5rem;
  76.     height: .5rem;
  77. }
  79. main .topMain .topMain-left div,
  80. main .topMain .topMain-right div
  81. {
  82.     text-align: center;
  83. }
  85. main .topMain .title{
  86.     text-align: start !important;
  87.     height: .2rem;
  88.     font-size: 0.15rem;
  89.     font-weight: bold;
  90. }
  92. main .topMain .title>span{
  93.     font-size: 0.1rem;
  94.     font-weight: normal;
  95.     padding: 0.02rem 0.03rem;
  96.     border-radius: .03rem;
  97.     margin-left: -0.2rem;
  98. }
  100. main .topMain .topMain-left .items{
  101.     margin: .1rem;
  102.     background-color: bisque;
  103.     border-radius: .05rem;
  104. }
  106. main .topMain .topMain-left .items a span{
  107.     font-size: 0.12rem;
  108.     font-weight: bold;
  109.     color: #e86217;
  110. }
  112. main .topMain .topMain-right .items{
  113.     margin: .1rem;
  114.     background-color: bisque;
  115.     border-radius: .05rem;
  116. }
  119. main .topMain .topMain-right .items a span{
  120.     font-size: 0.1rem;
  121.     font-weight: bold;
  122.     color: #e86217;
  123. }
  125. main .displayMain{
  126.     top:7.39rem;
  127.     width: 100vw;
  128. }
  130. main .displayMain .advance{
  131.     width: 100vw;
  132.     height: .47rem;
  133.     display: grid;
  134.     place-content: center;
  135. }
  137. main .displayMain .advance img{
  138.     width: 1.61rem;
  139.     height: .20rem;
  140. }
  142. main .displayMain .displayWindow{
  143.     top: 7.85rem;
  144.     height: 100vh;
  145.     display: grid;
  146.     grid-template-columns: repeat(2,1fr);
  147. }
  149. main .displayMain .displayWindow .item{
  150.     width: 1.71rem;
  151.     height: 2.6rem;
  152.     border-radius: .06rem;
  153.     background-color: white;
  154.     margin-top: .1rem;
  155. }
  157. main .displayMain .displayWindow .item .itemName{
  158.     height: .57rem;
  159.     font-size: 0.13rem;
  160.     color:#333;
  161.     margin: .05rem;
  162.     overflow: hidden;
  163.     line-height: .185rem;
  164.     text-overflow: ellipsis;
  165. }
  167. main .displayMain .displayWindow .item img{
  168.     width: 1.71rem;
  169.     height: 1.71rem;
  170.     border-radius: .06rem .06rem 0 0;
  171. }
  173. main .displayMain .displayWindow .item .priceInfo span:nth-last-of-type(n+2){
  174.     color: #ff5500;
  175.     margin: .05rem;
  176. }
上一条：js常用函数类型和数据类型下一条：淘宝移动端首页的商品列表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多