css网站头部制作

网站头部制作方法

固定定位的导航栏
使用position: fixed属性将导航栏固定在页面顶部，确保滚动时始终可见。设置z-index确保导航栏在其他元素上方，背景色和阴影增强视觉层次。

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

响应式设计处理

媒体查询适配不同设备
通过媒体查询调整导航栏布局，移动端改用汉堡菜单。使用flexbox或grid布局确保元素自适应排列。

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

交互效果实现

悬停和点击动画
为导航链接添加过渡效果，使用transform和transition创建平滑动画。下拉菜单采用max-height过渡实现展开效果。

.nav-link {
  transition: all 0.3s ease;
}
.nav-link:hover {
  color: #3498db;
  transform: translateY(-2px);
}

品牌标识优化

LOGO与标题组合
使用flex布局对齐LOGO和网站标题，控制图片尺寸保持比例。添加文字样式增强品牌识别度。

.branding {
  display: flex;
  align-items: center;
}
.logo {
  height: 40px;
  margin-right: 15px;
}
.site-title {
  font-size: 1.5rem;
  font-weight: 700;
}

辅助功能考虑

高对比度和键盘导航
确保颜色对比度符合WCAG标准，为焦点状态添加明显样式。使用aria-label提高屏幕阅读器可访问性。

.nav-link:focus {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}
[aria-current="page"] {
  font-weight: bold;
}