search

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

淘宝移动端首页商品列表

newbie
newbie原创
2022年04月03日 17:32:19403浏览

商品列表

效果图

代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link
  8.       rel="stylesheet"
  9.       href="//at.alicdn.com/t/font_3280490_h5yvhuo3zq5.css"
  10.     />
  11.     <link rel="stylesheet" href="/0403/1/css/rest.css" />
  12.     <link rel="stylesheet" href="/0403/1/css/heard.css" />
  13.     <link rel="stylesheet" href="/0403/1/css/footer.css" />
  14.     <link rel="stylesheet" href="/0403/1/css/main.css" />
  15.     <title>Document</title>
  16.   </head>
  17.   <body>
  18.     <header>
  19.       <div class="top">
  20.         <div class="iconfont icon-tao"></div>
  21.         <a href="" class="iconfont icon-search">寻找宝贝店铺</a>
  22.       </div>
  23.     </header>
  24.     <main>
  25.       <div class="lunbo"><img src="/0403/1/images/top.jpg" /></div>
  26.       <div class="daohang">
  27.         <a href="">
  28.           <div class="itme1">
  29.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  30.           </div> </a
  31.         ><a href="">
  32.           <div class="itme1">
  33.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  34.           </div> </a
  35.         ><a href="">
  36.           <div class="itme1">
  37.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  38.           </div> </a
  39.         ><a href="">
  40.           <div class="itme1">
  41.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  42.           </div> </a
  43.         ><a href="">
  44.           <div class="itme1">
  45.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  46.           </div> </a
  47.         ><a href="">
  48.           <div class="itme1">
  49.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  50.           </div> </a
  51.         ><a href="">
  52.           <div class="itme1">
  53.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  54.           </div> </a
  55.         ><a href="">
  56.           <div class="itme1">
  57.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  58.           </div>
  59.         </a>
  60.         <a href="">
  61.           <div class="itme1">
  62.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  63.           </div>
  64.         </a>
  65.         <a href="">
  66.           <div class="itme1">
  67.             <img src="/0403/1/images/tianmao.png" alt="" /><span>天猫新品</span>
  68.           </div>
  69.         </a>
  70.       </div>
  71.       <div class="huakuai"></div>
  72.       <div class="cnxh"><img src="/0403/1/images/cainixihuan.png" /></div>
  73.       <div class="splb">
  74.         <a href="">
  75.           <div class="sp">
  76.             <img
  77.               src="/0403/1/images/O1CN01RFdVG02Ca0x1aTC3E_!!0-item_pic.jpg_320x320q90.jpg"
  78.             />
  79.             <div class="jj">
  80.               <span class="biaoti"
  81.                 >【24期免息】HP惠普光影精灵7 11代酷睿i5/i7可选</span
  82.               >
  83.               <div>
  84.                 <span class="jg iconfont icon-renminbi_o">6,799</span>
  85.                 <span class="rs">67人已购买</span>
  86.               </div>
  87.             </div>
  88.           </div>
  89.         </a>
  90.         <a href="">
  91.           <div class="sp">
  92.             <img
  93.               src="/0403/1/images/O1CN01RFdVG02Ca0x1aTC3E_!!0-item_pic.jpg_320x320q90.jpg"
  94.             />
  95.             <div class="jj">
  96.               <span class="biaoti"
  97.                 >【24期免息】HP惠普光影精灵7 11代酷睿i5/i7可选</span
  98.               >
  99.               <div>
  100.                 <span class="jg iconfont icon-renminbi_o">6,799</span>
  101.                 <span class="rs">67人已购买</span>
  102.               </div>
  103.             </div>
  104.           </div>
  105.         </a>
  106.         <a href="">
  107.           <div class="sp">
  108.             <img
  109.               src="/0403/1/images/O1CN01RFdVG02Ca0x1aTC3E_!!0-item_pic.jpg_320x320q90.jpg"
  110.             />
  111.             <div class="jj">
  112.               <span class="biaoti"
  113.                 >【24期免息】HP惠普光影精灵7 11代酷睿i5/i7可选</span
  114.               >
  115.               <div>
  116.                 <span class="jg iconfont icon-renminbi_o">6,799</span>
  117.                 <span class="rs">67人已购买</span>
  118.               </div>
  119.             </div>
  120.           </div>
  121.         </a>
  122.         <a href="">
  123.           <div class="sp">
  124.             <img
  125.               src="/0403/1/images/O1CN01RFdVG02Ca0x1aTC3E_!!0-item_pic.jpg_320x320q90.jpg"
  126.             />
  127.             <div class="jj">
  128.               <span class="biaoti"
  129.                 >【24期免息】HP惠普光影精灵7 11代酷睿i5/i7可选</span
  130.               >
  131.               <div>
  132.                 <span class="jg iconfont icon-renminbi_o">6,799</span>
  133.                 <span class="rs">67人已购买</span>
  134.               </div>
  135.             </div>
  136.           </div>
  137.         </a>
  139.         <a href="">
  140.           <div class="sp">
  141.             <img
  142.               src="/0403/1/images/O1CN01RFdVG02Ca0x1aTC3E_!!0-item_pic.jpg_320x320q90.jpg"
  143.             />
  144.             <div class="jj">
  145.               <span class="biaoti"
  146.                 >【24期免息】HP惠普光影精灵7 11代酷睿i5/i7可选</span
  147.               >
  148.               <div>
  149.                 <span class="jg iconfont icon-renminbi_o">6,799</span>
  150.                 <span class="rs">67人已购买</span>
  151.               </div>
  152.             </div>
  153.           </div>
  154.         </a>
  155.         <a href="">
  156.           <div class="sp">
  157.             <img
  158.               src="/0403/1/images/O1CN01RFdVG02Ca0x1aTC3E_!!0-item_pic.jpg_320x320q90.jpg"
  159.             />
  160.             <div class="jj">
  161.               <span class="biaoti"
  162.                 >【24期免息】HP惠普光影精灵7 11代酷睿i5/i7可选</span
  163.               >
  164.               <div>
  165.                 <span class="jg iconfont icon-renminbi_o">6,799</span>
  166.                 <span class="rs">67人已购买</span>
  167.               </div>
  168.             </div>
  169.           </div>
  170.         </a>
  171.         <a href="">
  172.           <div class="sp">
  173.             <img
  174.               src="/0403/1/images/O1CN01RFdVG02Ca0x1aTC3E_!!0-item_pic.jpg_320x320q90.jpg"
  175.             />
  176.             <div class="jj">
  177.               <span class="biaoti"
  178.                 >【24期免息】HP惠普光影精灵7 11代酷睿i5/i7可选</span
  179.               >
  180.               <div>
  181.                 <span class="jg iconfont icon-renminbi_o">6,799</span>
  182.                 <span class="rs">67人已购买</span>
  183.               </div>
  184.             </div>
  185.           </div>
  186.         </a>
  187.       </div>
  188.     </main>
  189.     <footer>
  190.       <div class="taobaotubiao">
  191.         <a href="" class="iconfont icon-taobao taobao"></a>
  192.       </div>
  193.       <a href="" class="iconfont icon-gouwuche"
  194.         ><div class="gouwu">购物车</div></a
  195.       >
  197.       <a href="" class="iconfont icon-my"><div class="wode">我的淘宝</div></a>
  198.     </footer>
  199.   </body>
  200. </html>
css代码
  1. main {
  2.   width: 100vw;
  3.   position: relative;
  4.   top: 0.37rem;
  5. }
  6. main .lunbo img {
  7.   width: 100%;
  8.   height: 100%;
  9. }
  10. main .daohang {
  11.   display: grid;
  12.   grid-template-columns: repeat(5, 1fr);
  13.   grid-template-rows: repeat(2, 1fr);
  14.   background-color: white;
  15. }
  16. main .daohang img {
  17.   width: 0.61rem;
  18.   height: 0.48rem;
  19. }
  20. main .daohang div {
  21.   display: grid;
  22.   grid-template-rows: 2, 1fr;
  23.   place-items: center;
  24. }
  25. main .daohang span {
  26.   font-size: 0.12rem;
  27.   line-height: 15px;
  28.   margin-top: 0.04rem;
  29. }
  30. .huakuai {
  31.   width: 100vw;
  32.   height: 0.2rem;
  33.   background-color: white;
  34. }
  35. .cnxh {
  36.   width: 100vw;
  37.   height: 0.47rem;
  38.   text-align: center;
  39.   padding-top: 0.12rem;
  40. }
  41. .cnxh img {
  42.   width: 1.61rem;
  43.   height: 0.19rem;
  44. }
  45. main .splb {
  46.   display: grid;
  47.   grid-template-columns: repeat(2, 1fr);
  48.   padding: 0rem 0.075rem 0.12rem;
  49.   grid-template-rows: auto;
  50.   gap: 0.09rem;
  51. }
  52. main .sp {
  53.   display: grid;
  54.   grid-template-rows: 1.71rem 1fr;
  55.   font-size: 0.13rem;
  56.   border-radius: 0.05rem;
  57.   background-color: white;
  58.   height: 2.6rem;
  59. }
  60. .jj {
  61.   margin-top: 0.12rem;
  62.   display: grid;
  63.   grid-template-rows: 1fr 0.41rem;
  64. }
  65. main .sp img {
  66.   width: 100%;
  67.   height: 100%;
  68.   border-radius: 0.05rem 0.05rem 0 0;
  69. }
  70. .jg {
  71.   color: #ff5500;
  72.   font-size: 0.14rem;
  73. }
  74. .rs {
  75.   color: #999999;
  76.   font-size: 0.12rem;
  77.   font-family: "微软雅黑";
  78. }
  79. .jj {
  80.   padding: 0 0.09rem 0 0.1rem;
  81. }
  82. main .jj .biaoti {
  83.   margin-bottom: 0.15rem;
  84. }
上一条：右侧布局案例下一条：实例演示函数参数与返回值、演示模板字面量与模板函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多