当前位置：首页 > CSS

css制作团购

2026-04-02 17:55:40CSS

CSS制作团购页面

团购页面的CSS设计需要突出促销信息、商品展示和购买按钮，吸引用户注意力并提高转化率。以下是关键CSS样式和布局建议。

整体布局

使用Flexbox或Grid布局创建响应式设计，确保在不同设备上都能良好显示。设置最大宽度和居中布局，保持页面整洁。

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

商品卡片样式

商品卡片需要突出价格和折扣信息，使用阴影和边框增强视觉效果。设置悬停效果增加交互性。

css制作团购

.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  background: white;
}

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

价格显示

原价和团购价需要明显区分，使用删除线和颜色对比强调折扣力度。

.original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
}

.group-price {
  color: #ff5722;
  font-size: 24px;
  font-weight: bold;
}

.discount-badge {
  background: #ff5722;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}

倒计时和进度条

团购页面通常包含倒计时和进度条显示销售情况，使用CSS动画增强紧迫感。

css制作团购

.countdown {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  margin: 10px 0;
}

.progress-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  margin: 10px 0;
}

.progress {
  height: 100%;
  background: #ff5722;
  border-radius: 4px;
  transition: width 0.5s ease;
}

按钮样式

购买按钮需要醒目，使用渐变和悬停效果提高点击率。

.buy-button {
  background: linear-gradient(to right, #ff5722, #ff9800);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.3s ease;
}

.buy-button:hover {
  opacity: 0.9;
}

响应式设计

通过媒体查询确保在不同屏幕尺寸下的良好显示效果。

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .product-card {
    margin-bottom: 20px;
  }
}