search

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

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

恒儿哥哥
恒儿哥哥原创
2022年03月29日 23:04:25441浏览

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  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 rel="stylesheet" href="index.css">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <main>
  12.         <div class="right">
  13.             <div class="img">
  14.                 <img src="https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_500x500q90.jpg_.webp">
  15.             </div>
  16.            <div class="title">
  17.                 <div class="introduce"><span>日本进口缝隙收纳架厨房置物架冰箱夹缝车可移动多层落地超窄柜</span></div>
  18.                 <div class="price">
  19.                     <span class="money">￥</span>
  20.                     <span  class="num">99</span>
  21.                     <span class="play">29人已购买</span>
  22.                 </div>
  23.            </div>
  24.         </div>
  25.         <div class="right">
  26.             <div class="img">
  27.                 <img src="https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_500x500q90.jpg_.webp">
  28.             </div>
  29.            <div class="title">
  30.                 <div class="introduce"><span>日本进口缝隙收纳架厨房置物架冰箱夹缝车可移动多层落地超窄柜</span></div>
  31.                 <div class="price">
  32.                     <span class="money">￥</span>
  33.                     <span  class="num">99</span>
  34.                     <span class="play">29人已购买</span>
  35.                 </div>
  36.            </div>
  37.         </div>
  38.         <div class="right">
  39.             <div class="img">
  40.                 <img src="https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_500x500q90.jpg_.webp">
  41.             </div>
  42.            <div class="title">
  43.                 <div class="introduce"><span>日本进口缝隙收纳架厨房置物架冰箱夹缝车可移动多层落地超窄柜</span></div>
  44.                 <div class="price">
  45.                     <span class="money">￥</span>
  46.                     <span  class="num">99</span>
  47.                     <span class="play">29人已购买</span>
  48.                 </div>
  49.            </div>
  50.         </div>
  51.         <div class="right">
  52.             <div class="img">
  53.                 <img src="https://gw.alicdn.com/bao/uploaded/i2/504369715/O1CN01VDTglP2LdWUZPQ849_!!0-item_pic.jpg_500x500q90.jpg_.webp">
  54.             </div>
  55.            <div class="title">
  56.                 <div class="introduce"><span>日本进口缝隙收纳架厨房置物架冰箱夹缝车可移动多层落地超窄柜</span></div>
  57.                 <div class="price">
  58.                     <span class="money">￥</span>
  59.                     <span  class="num">99</span>
  60.                     <span class="play">29人已购买</span>
  61.                 </div>
  62.            </div>
  63.         </div>
  64.     </main>
  67. </body>
  68. </html>

css

  1. body{
  2.     margin: 0;
  3.     padding: 0;
  4.     background-color: #f2f2f2;
  5. }
  6. main{
  7.     margin: 0;
  8.     display: grid;
  9.     grid-template-columns: repeat(2,1fr);
  10.     padding-bottom: 0.1rem;
  12. }
  13. main img{
  14.     width: 100%;
  15.     border-radius: 0.3rem  0.3rem 0 0;
  16. }
  17. main .right{
  18.     box-sizing: border-box;
  19.     border-radius: 0.4rem;
  20.     margin: 0.4rem 0.4rem;
  21.     min-height: 2rem;
  22.     min-width: 1.1rem;
  23.     background-color: #fff;
  25. }
  26. main .right .title{
  27.     display:grid;
  28.     place-items:center
  29. }
  30. main .right .title .introduce{
  31.     height: 3.4rem;
  32.     width: 90%;
  33.     font-size: 0.8rem;
  34.     line-height: 1.5rem;
  35.     overflow: hidden;
  36. }
  37. main .right .title .price{
  38.     width: 90%;
  39.     font-size: 0.8rem;
  40.     padding-bottom: 1rem;
  42. }
  43. main .right .title .price .money{
  44.     color: coral;
  45.     font-size: smaller;
  47. }
  48. main .right .title .price .num{
  49.     color: coral;
  50.     font-size: larger;
  52. }
  53. main .right .title .price .play{
  54.     color: #ccc;
  55. }

效果图

效果图

上一条：阿里云短信下一条：淘宝移动端首页的商品列表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议