css 头部制作

CSS 头部制作方法

固定定位法
使用 position: fixed 将头部固定在页面顶部，确保滚动时始终可见。设置 width: 100% 和 top: 0，通过 z-index 控制层级避免被其他元素覆盖。背景色和阴影可增强视觉区分度。

.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

弹性布局法
采用 Flexbox 实现头部内容水平或垂直排列。justify-content 控制子元素间距，align-items 调整垂直对齐。适合包含导航、LOGO 等多元素的复杂头部。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

响应式设计
通过媒体查询适配不同设备。移动端可隐藏部分内容或切换为汉堡菜单，PC 端保持完整导航。使用 max-width 或 min-width 定义断点。

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .hamburger {
    display: block;
  }
}

透明渐变效果
结合 background 的渐变属性或半透明效果，实现滚动时头部透明度变化。通过 JavaScript 监听滚动事件动态添加类名。

.header-transparent {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(5px);
}

粘性定位法
使用 position: sticky 替代固定定位，在父容器内达到阈值后固定。适合需要自然滚动一段距离后才固定的场景。

.header {
  position: sticky;
  top: 0;
  transition: background 0.3s;
}

注意事项

• 固定头部需预留 padding-top 避免内容被遮挡
• 高分辨率屏幕需检查 viewport 元标签
• 测试 Safari 对 sticky 和 backdrop-filter 的兼容性
• 使用 rem 或 em 单位确保可缩放性