怎么学网站设计？
从「网站设计学方法」出发，构建系统化设计能力

Flexbox：一维布局的精准控制

Flex 是处理导航栏、卡片内容对齐、表单布局的首选方案。重点掌握：justify-content（主轴）和 align-items（交叉轴）的组合逻辑。

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 280px;
}

效果：卡片内内容垂直分布——标题在顶部，描述居中，按钮固定在底部。无论文字多长，按钮永远对齐底部，避免传统布局中“高度塌陷”问题。

传统布局为何已淘汰？

绝对定位（position: absolute）、浮动（float）等方案存在致命缺陷：

• 绝对定位：元素脱离文档流，小屏幕下易重叠或溢出；
• 浮动：需手动清除浮动（clear: both），且高度计算复杂；
• 百分比宽度：无法处理“最小宽度”限制，手机上文字可能挤成一团。

.sidebar {
  float: left;
  width: 20%;
}
.main {
  float: left;
  width: 80%;
}

建议：除非做特殊遮罩层或固定导航，否则请彻底告别 float 和 absolute 布局方案。

媒体查询 breakpoints 推荐值

别用“设备型号”设断点，用“内容断点”（Content-based Breakpoints）：

• 320px：小屏手机（iPhone SE）；
• 768px：平板竖屏（iPad）；
• 1024px：平板横屏/小桌面；
• 1280px：主流桌面（1366×768）；
• 1920px+：4K大屏（仅优化大图尺寸）。

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

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

视口设置（Viewport Meta）——易忽略的致命点

若缺失此标签，iOS Safari 会默认按980px渲染，导致页面缩成小点！正确写法：

<meta name="viewport"
     content="width=device-width, initial-scale=1.0">

补充建议：在CSS中添加 touch-action: manipulation; 可消除移动端点击延迟（300ms），提升响应速度。

聚焦：无障碍设计的基石

键盘用户（如视障人士）依赖聚焦状态导航。必须为所有可交互元素定义 :focus 样式。

input:focus,
button:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

注意：不要删除 outline，除非提供等效替代（如 box-shadow）。

按钮设计：重量感营造信任

好按钮有“按下去”的视觉暗示。关键要素：

• 阴影：默认 box-shadow: 0 4px 0 #7a0000（按钮深色边框）；
• 点击态：按压时 transform: translateY(4px)，阴影消失；
• 禁用态：灰色背景 + 不可点击指针。

.btn {
  background: var(--primary-color);
  box-shadow: 0 4px 0 var(--primary-dark);
  transition: all 0.1s ease;
}
.btn:active {
  transform: translateY(4px);
  box-shadow: none;
}