search

博客列表 >淘宝首页商品列表块

淘宝首页商品列表块

弦知音的博客
弦知音的博客原创
2022年04月17日 22:48:43302浏览

淘宝首页商品列表块

  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 rel="stylesheet" href="index.css">
  8.     <title>淘宝首页商品列表块</title></title></title>
  9. </head>
  10. <style>
  11.     body{
  12.     margin: 0;
  13.     padding: 0;
  14.     background-color: #f2f2f2;
  15. }
  16. main{
  17.     margin: 0;
  18.     display: grid;
  19.     grid-template-columns: repeat(2,1fr);
  20.     padding-bottom: 0.1rem;
  21. }
  22. main img{
  23.     width: 100%;
  24.     border-radius: 0.3rem  0.3rem 0 0;
  25. }
  26. main .right{
  27.     box-sizing: border-box;
  28.     border-radius: 0.4rem;
  29.     margin: 0.4rem 0.4rem;
  30.     min-height: 2rem;
  31.     min-width: 1.1rem;
  32.     background-color: #fff;
  33. }
  34. main .right .title{
  35.     display:grid;
  36.     place-items:center
  37. }
  38. main .right .title .introduce{
  39.     height: 3.4rem;
  40.     width: 90%;
  41.     font-size: 0.8rem;
  42.     line-height: 1.5rem;
  43.     overflow: hidden;
  44. }
  45. main .right .title .price{
  46.     width: 90%;
  47.     font-size: 0.8rem;
  48.     padding-bottom: 1rem;
  49. }
  50. main .right .title .price .money{
  51.     color: coral;
  52.     font-size: smaller;
  53. }
  54. main .right .title .price .num{
  55.     color: coral;
  56.     font-size: larger;
  57. }
  58. main .right .title .price .play{
  59.     color: #ccc;
  60. }
  61. </style>
  62. <body>
  63.     <main>
  64.         <div class="right">
  65.             <div class="img">
  66.                 <img src="images/items/item16.webp">
  67.             </div>
  68.            <div class="title">
  69.                 <div class="introduce"><span>测试商品1</span></div>
  70.                 <div class="price">
  71.                     <span class="money">￥</span>
  72.                     <span  class="num">108</span>
  73.                     <span class="play">19人已购买</span>
  74.                 </div>
  75.            </div>
  76.         </div>
  77.         <div class="right">
  78.             <div class="img">
  79.                 <img src="images/items/item17.webp">
  80.             </div>
  81.            <div class="title">
  82.                 <div class="introduce"><span>测试商品2</span></div>
  83.                 <div class="price">
  84.                     <span class="money">￥</span>
  85.                     <span  class="num">109</span>
  86.                     <span class="play">32人已购买</span>
  87.                 </div>
  88.            </div>
  89.         </div>
  90.         <div class="right">
  91.             <div class="img">
  92.                 <img src="images/items/item18.webp">
  93.             </div>
  94.            <div class="title">
  95.                 <div class="introduce"><span>测试商品3</span></div>
  96.                 <div class="price">
  97.                     <span class="money">￥</span>
  98.                     <span  class="num">118</span>
  99.                     <span class="play">23人已购买</span>
  100.                 </div>
  101.            </div>
  102.         </div>
  103.         <div class="right">
  104.             <div class="img">
  105.                 <img src="images/items/item19.webp">
  106.             </div>
  107.            <div class="title">
  108.                 <div class="introduce"><span>测试商品4多打几个字试试测试商品4多打几个字试试</span></div>
  109.                 <div class="price">
  110.                     <span class="money">￥</span>
  111.                     <span  class="num">999</span>
  112.                     <span class="play">1209人已购买</span>
  113.                 </div>
  114.            </div>
  115.         </div>
  116.     </main>
  117. </body>
  118. </html>

淘宝首页商品列表块

上一条：登录表单和iframe后台架构下一条：移动端布局基本思路，三种视口、手机页面3部分基本架构
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多