CSS制作餐饮菜单

设计餐饮菜单的CSS方法

布局与结构 使用Flexbox或Grid布局创建响应式菜单结构。Flexbox适合单列或简单排列，Grid适合复杂分栏设计。设置合理的间距和边距确保可读性。

.menu-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 2rem;
}

视觉层次 通过字体大小、颜色和权重区分菜品类别与价格。标题使用较大字号和强调色，描述文本使用中性色，价格突出显示。

.menu-title {
  font-size: 2.5rem;
  color: #c23b22;
  border-bottom: 2px dashed #f0a202;
}

.item-price {
  font-weight: 700;
  color: #1d7874;
}

交互元素 为菜单项添加悬停效果增强用户体验。使用过渡动画平滑交互，通过轻微阴影或颜色变化指示可点击区域。

.menu-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

移动端适配 通过媒体查询调整小屏幕布局。单列显示确保可读性，缩小字体比例保持整体协调。

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

  .menu-title {
    font-size: 1.8rem;
  }
}

主题一致性 建立CSS变量维护品牌色彩和风格。统一按钮、边框等元素样式强化品牌识别度。

:root {
  --primary-color: #c23b22;
  --secondary-color: #f0a202;
}

.menu-header {
  background: var(--primary-color);
  color: white;
}