HTML

  1.   <main style="height: 1600px">
  2.            <div class="list">
  3.                    <div class="shopping">
  4.                      <div class="shopping-a">
  5.                        <a href="#">
  6.                          <img src="../img/item16.webp.jpg" />
  7.                          <p>日本进口缝隙收纳厨房置物架冰箱夹缝可移动</p>
  8.                          <div class="bq">
  9.                            <span>￥12.9</span><span>2000+人已购买</span>
  10.                          </div>
  11.                        </a>
  12.                      </div>
  13.                      <div class="shopping-b">
  14.                        <a href="#">
  15.                          <img src="../img/item17.webp.jpg" />
  16.                          <p>韩国拉面锅网红金色煮面泡面锅泡面小食堂</p>
  17.                          <div class="bq">
  18.                            <span>￥12.9</span><span>2000+人已购买</span>
  19.                          </div>
  20.                        </a>
  21.                      </div>
  22.                      <div class="shopping-c">
  23.                        <a href="#">
  24.                          <img src="../img/item18.webp.jpg" />
  25.                          <p>韩国拉面锅网红金色煮面泡面锅泡面小食堂</p>
  26.                          <div class="bq">
  27.                            <span>￥12.9</span><span>2000+人已购买</span>
  28.                          </div>
  29.                        </a>
  30.                      </div>
  31.                      <div class="shopping-d">
  32.                        <a href="#">
  33.                          <img src="../img/item19.webp.jpg" />
  34.                          <p>日本进口缝隙收纳厨房置物架冰箱夹缝可移动</p>
  35.                          <div class="bq">
  36.                            <span>￥12.9</span><span>2000+人已购买</span>
  37.                          </div>
  38.                        </a>
  39.                      </div>
  40.                    </div>
  41.                  </div> 
  42.         </main>

css部分

  1. .list {
  2.   padding: 3rem 0;
  3. }
  4. .shopping {
  5.   text-align: center;
  6.   margin-bottom: 0.25rem;
  7.   border-radius: 0.05rem;
  8.   background-color: #fff;
  9. }
  10. .shopping img {
  11.   width: 100%;
  12.   height: auto;
  13. }
  14. .shopping {
  15.   display: grid;
  16.   grid-template-columns: repeat(2, 1fr);
  17.   gap: 0.1rem;
  18.   grid-auto-rows: auto;
  19. }
  20. main .shoppingc img {
  21.   width: 100%;
  22.   height: auto;
  23.   border-top-left-radius: 0.05rem;
  24.   border-top-right-radius: 0.05rem;
  25.  }
  26. .shopping a p {
  27.   margin: 0.06rem 0.1rem;
  28.   height: 0.32rem;
  29.   line-height: 0.16rem;
  30.   overflow: hidden;
  31. }
  32. .shopping .bq span:first-child {
  33.   color: red;
  34.   margin-right: 0.1rem;
  35. }
  36. .shopping .bq span:nth-of-type(2) {
  37.   color: #999;
  38. }

最终显示效果

更多相关文章

  1. 为什么我不建议在当前购买5G手机
  2. R语言数据挖掘实践——关联分析预测用户购买行为习惯
  3. SQLServer查询某个时间段购买过商品的所有用户
  4. Android(安卓)Market新增运营商结算方式
  5. 1109标签练习
  6. 长尾关键词有那几种形式？
  7. 二手闲置物品交易数据快照
  8. 2021年便宜购买阿里云服务器攻略（阿里云小站篇）！
  9. 新手购买阿里云服务器图文教程及注意事项

随机推荐

  1. 【Android】Android设计准则
  2. Android 4.0后，自定义Title报错 You canno
  3. 调用android手机微博客户端发送微博
  4. Android 全屏设置
  5. Android TextView Marquee的应用实例详解
  6. Android keytool 生成证书MD5指纹
  7. Android 学习记录
  8. Android 应用指定浏览器开发实例
  9. android 圆环图形的实现
  10. Android视频方向为什么出现问题以及Andro