商品卡片布局方式

Hell's Angel

于 2020-07-03 16:31:21 发布

阅读量1.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端技巧分享文章标签： html

本文链接：https://blog.youkuaiyun.com/NET_worker_/article/details/107107991

前端技巧分享专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS在移动端电商页面中实现商品卡片的布局。通过HTML5标记结构和CSS样式，可以创建出标准的商品展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css实现商品卡片布局方式：

在移动端电商页面中，会经常用到商品卡片这种布局方式，像这样：

下面就用html5实现这种样式：

html代码：

   <div class="item-card">

      <img :src="mainPic" @click="gotopic(itemLink)" />

      <div class="item-right">

        <span>{{title}}</span>

        <div class="item-price">
          <span>
            <font color="red">￥{{actualPrice}}</font>&nbsp;&nbsp;
            <s style="color:#999">￥{{originalPrice}}</s>
          </span>
          
          <span>
            <font color="#999">{{monthSales}}</font>
          </span>
        </div>
        <span @click="gotopic(coupouLink)" class="lingquan">领券</span>
      </div>
    </div>

css：

.item-card {
  border-top: 0.3px solid #999;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 5px 0;
}
.item-card img {
  width: 30%;
}
.item-right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.item-price {
  display: flex;
  justify-content: space-between;
}