仿移动端商品部分

发布于：2022-03-31 10:14:38  栏目：技术文档

HTML

  <main style="height: 1600px">
           <div class="list">
                   <div class="shopping">
                     <div class="shopping-a">
                       <a href="#">
                         <img src="../img/item16.webp.jpg" />
                         <p>日本进口缝隙收纳厨房置物架冰箱夹缝可移动</p>
                         <div class="bq">
                           <span>￥12.9</span><span>2000+人已购买</span>
                         </div>
                       </a>
                     </div>
                     <div class="shopping-b">
                       <a href="#">
                         <img src="../img/item17.webp.jpg" />
                         <p>韩国拉面锅网红金色煮面泡面锅泡面小食堂</p>
                         <div class="bq">
                           <span>￥12.9</span><span>2000+人已购买</span>
                         </div>
                       </a>
                     </div>
                     <div class="shopping-c">
                       <a href="#">
                         <img src="../img/item18.webp.jpg" />
                         <p>韩国拉面锅网红金色煮面泡面锅泡面小食堂</p>
                         <div class="bq">
                           <span>￥12.9</span><span>2000+人已购买</span>
                         </div>
                       </a>
                     </div>
                     <div class="shopping-d">
                       <a href="#">
                         <img src="../img/item19.webp.jpg" />
                         <p>日本进口缝隙收纳厨房置物架冰箱夹缝可移动</p>
                         <div class="bq">
                           <span>￥12.9</span><span>2000+人已购买</span>
                         </div>
                       </a>
                     </div>
                   </div>
                 </div> 
        </main>

css部分

.list {
  padding: 3rem 0;
}
.shopping {
  text-align: center;
  margin-bottom: 0.25rem;
  border-radius: 0.05rem;
  background-color: #fff;
}
.shopping img {
  width: 100%;
  height: auto;
}
.shopping {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.1rem;
  grid-auto-rows: auto;
}
main .shoppingc img {
  width: 100%;
  height: auto;
  border-top-left-radius: 0.05rem;
  border-top-right-radius: 0.05rem;
 }
.shopping a p {
  margin: 0.06rem 0.1rem;
  height: 0.32rem;
  line-height: 0.16rem;
  overflow: hidden;
}
.shopping .bq span:first-child {
  color: red;
  margin-right: 0.1rem;
}
.shopping .bq span:nth-of-type(2) {
  color: #999;
}

最终显示效果

相关推荐