当前位置：首页 > CSS

css 制作购物网站

2026-01-08 19:43:50CSS

布局设计

使用CSS Grid或Flexbox创建响应式布局。Grid适合整体页面结构，Flexbox适合局部组件排列。定义网格模板区域，如头部、导航、商品展示区、侧边栏和页脚。

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "nav nav"
    "sidebar products"
    "footer footer";
  grid-gap: 20px;
}

商品卡片样式

为商品卡片添加阴影、圆角和悬停效果。使用transform实现悬停放大，transition平滑动画效果。卡片内部包含图片、标题、价格和按钮的层次结构。

.product-card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.product-card:hover {
  transform: scale(1.03);
}

导航菜单

采用Flexbox水平排列导航项，使用伪元素创建下划线动画。固定定位保持菜单始终可见，z-index控制层叠顺序。

.navbar {
  display: flex;
  position: sticky;
  top: 0;
  background: white;
}
.nav-item::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #3498db;
  transition: width 0.3s;
}
.nav-item:hover::after {
  width: 100%;
}

购物车交互

侧边栏购物车使用固定定位，通过CSS变量控制显示/隐藏状态。添加过渡效果使滑动更自然，overflow-y启用滚动条防止内容溢出。

:root {
  --cart-width: 0;
}
.cart-sidebar {
  position: fixed;
  right: 0;
  width: var(--cart-width);
  transition: width 0.5s;
  overflow-y: auto;
}
.cart-open {
  --cart-width: 350px;
}

响应式适配

媒体查询针对不同屏幕尺寸调整布局。移动端改为单列显示，缩小导航菜单字号，商品卡片宽度调整为100%。

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "nav"
      "products"
      "footer";
  }
  .sidebar { display: none; }
  .product-card { width: 100%; }
}

加载动画

为异步数据加载添加旋转指示器，使用CSS动画创建无限旋转效果。通过@keyframes定义关键帧，opacity控制淡入淡出。

.loader {
  animation: spin 1s linear infinite;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

css 制作购物网站