css制作商品列表

使用Flexbox布局制作商品列表

Flexbox是一种现代的CSS布局方式，适合创建响应式商品列表。以下是一个基本实现：

<div class="product-container">
  <div class="product-card">
    <img src="product-image.jpg" alt="商品图片">
    <h3>商品名称</h3>
    <p>商品描述</p>
    <span class="price">¥99.00</span>
    <button>加入购物车</button>
  </div>
  <!-- 更多商品卡片... -->
</div>

.product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.product-card {
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

.price {
  color: #e63946;
  font-weight: bold;
  font-size: 1.2em;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

使用Grid布局制作商品列表

CSS Grid提供了更强大的二维布局能力：

.product-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  /* 卡片样式同上 */
}

响应式设计

确保商品列表在不同设备上都能良好显示：

@media (max-width: 768px) {
  .product-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-container {
    grid-template-columns: 1fr;
  }
}

添加悬停效果

增强用户交互体验：

.product-card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

button:hover {
  background-color: #0056b3;
}

商品标签样式

为促销商品添加特殊标记：

<div class="product-card">
  <span class="sale-tag">促销</span>
  <!-- 其他内容 -->
</div>

.sale-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff4757;
  color: white;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.8em;
}

评分星星样式

添加商品评分显示：

<div class="rating">
  ★★★★☆ <span>4.0</span>
</div>

.rating {
  color: #ffc107;
  margin: 5px 0;
}

.rating span {
  color: #333;
  font-size: 0.9em;
  margin-left: 5px;
}