css顶部制作

固定顶部导航栏

使用position: fixed属性将导航栏固定在页面顶部，确保滚动页面时导航栏始终可见。设置top: 0和width: 100%使其占据整个视窗宽度。

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

添加阴影效果

通过box-shadow属性为顶部导航栏添加轻微的阴影，增强视觉层次感。调整阴影参数控制模糊程度和颜色透明度。

.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

响应式设计

使用媒体查询确保顶部导航在不同屏幕尺寸下正常显示。小屏幕时可考虑将菜单转换为汉堡菜单。

@media (max-width: 768px) {
  .navbar {
    padding: 5px 0;
  }
  .nav-links {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
  }
}

内容下移处理

由于固定定位会脱离文档流，需要在主要内容区域添加与导航栏高度相同的上边距，防止内容被遮挡。

.main-content {
  margin-top: 60px; /* 与导航栏高度匹配 */
}

渐变背景效果

使用CSS渐变创建更现代的顶部背景效果，替代纯色背景。可以结合品牌色设计线性或径向渐变。

.navbar {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
}

悬停交互效果

为导航链接添加悬停动画效果，提升用户体验。过渡效果应平滑自然，持续时间控制在300ms左右。

.nav-link {
  transition: color 0.3s ease;
}
.nav-link:hover {
  color: #ffcc00;
}