css页眉制作

使用CSS创建固定页眉

固定页眉在滚动页面时保持可见，通常用于导航栏或品牌标识。通过position: fixed属性实现，需设置top: 0和width: 100%以确保覆盖整个视口宽度。

.header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 10px 0;
  z-index: 1000;
}

添加页眉内容与样式

页眉内容通常包含Logo、导航链接等元素。使用Flexbox布局可以轻松实现水平或垂直对齐。通过justify-content和align-items控制子元素位置。

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

处理页眉下方内容偏移

由于固定定位的页眉脱离文档流，页面主体内容可能被遮挡。解决方法是为body或主要内容区域添加与页眉高度匹配的padding-top。

body {
  padding-top: 60px; /* 匹配页眉高度 */
}

响应式页眉设计

使用媒体查询调整小屏幕下的页眉布局。常见的做法是将导航菜单转换为汉堡菜单，或调整字体大小和间距。

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    padding: 10px;
  }
}

添加页眉阴影与过渡效果

通过box-shadow属性添加微妙阴影增强层次感，结合transition实现悬停动画效果，提升用户体验。

.header {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.header:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}