一个经典的wordpress产品列表模板含CSS样式

最新推荐文章于 2025-02-12 14:28:32 发布

podoor

最新推荐文章于 2025-02-12 14:28:32 发布

阅读量797

点赞数 7

分类专栏： wordpress模板文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/podoor/article/details/136799276

版权

以下是简站wordpress小编，根据多个的从业经验分享的一个WordPress网站的产品列表页模板样式，下面是实例代码，有详细的代码和CSS。如果您需要更多样式，可以在此基础上进行修改的更丰富。

以下是一个简单的WordPress产品列表页样式示例：

HTML结构：

<div class="product-list">
  <div class="product">
    <a href="#"><img src="product-image.jpg" alt="Product Image"></a>
    <h3><a href="#">简站wordpress主题</a></h3>
    <p class="price">$19.99</p>
    <p class="description">简站wordpress主题，崇尚简约、鄙视繁琐、化繁为简、实用即可。</p>
    <a href="#" class="add-to-cart">联系客服</a>
  </div>
  <!-- 对每个产品重复产品div -->
</div>

CSS样式：

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -15px;
}

.product {
  width: calc(33.333% - 30px);
  margin: 1