淘宝移动端首页的商品列表代码实现

淘宝移动端首页的商品列表代码实现

实现效果

html 部分

<div class="item">
  <img src="image/7.png" alt="" />
  <span class="spanl"
    ><span class="title"
      >北欧简约床品件套 美式加大印花被套纯棉60支纱贡缎印花四件套</span
    >
    <span class="spans">
      <span class="price">￥ 279.5</span>
      <span class="number">6人已购买</span></span
    >
  </span>
</div>

css 部分

.main .maybelike {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0.1rem;
  gap: 0.1rem;
}
.main .maybelike .item {
  width: 1.725rem;
  background-color: white;
  border-radius: 0.05rem;
}
.main .maybelike .item img {
  width: 100%;
  border-radius: 0.05rem 0.05rem 0 0;
}
.main .maybelike .item .spanl {
  padding: 0.1rem;
  font-size: 0.14rem;
  display: grid;
  gap: 0.05rem;
}
.main .maybelike .item .spanl .title {
  height: 0.4rem;
  overflow: hidden;
}
.main .maybelike .item .spans {
  display: flex;
  gap: 0.1rem;
}
.main .maybelike .item .spans .price {
  color: orangered;
}
.main .maybelike .item .spans .number {
  color: #888;
  font-size: 0.12rem;
  place-self: center;
}