css生鲜网页制作

CSS生鲜网页制作要点

色彩搭配 使用新鲜、自然的色调如绿色、橙色、红色，营造生鲜产品的视觉吸引力。主色调可采用#4CAF50（鲜绿）或#FF9800（橙色），辅助色用白色或浅灰保持清爽。

布局设计 采用网格布局展示商品，每项商品包含图片、名称、价格和购买按钮。顶部设置导航栏，包含分类、搜索和购物车图标。重点区域放置促销或特色商品轮播图。

字体选择 标题使用粗体无衬线字体如Roboto或Arial增强可读性，正文采用Open Sans等简洁字体。价格字体加大并用红色突出显示。

图片处理 商品图片需统一尺寸和圆角边框，添加悬停放大效果。使用高质量图片展示生鲜细节，背景透明或纯色避免杂乱。

响应式设计 通过媒体查询确保手机端商品单列显示，平板端双列布局。导航栏在小屏幕下转为汉堡菜单，字体大小相应调整。

交互元素 购买按钮添加悬停颜色变化和点击反馈。购物车图标设计气泡数字提示，商品详情页设置数量选择器。

代码示例：商品卡片样式

.product-card {
  width: 250px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}
.product-card:hover {
  transform: translateY(-5px);
}
.product-image {
  height: 180px;
  object-fit: cover;
}
.price {
  color: #f44336;
  font-weight: bold;
  font-size: 1.2em;
}
.add-to-cart {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.add-to-cart:hover {
  background-color: #45a049;
}