css制作导航思路

布局结构设计

使用 display: flex 或 display: grid 构建导航容器，确保子项自动排列。水平导航推荐 flex-direction: row，垂直导航推荐 flex-direction: column。

.nav-container {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

样式定义

为导航项添加基础样式，包括颜色、间距和悬停效果。使用 transition 实现平滑交互。

.nav-item {
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s;
}

.nav-item:hover {
  background-color: #f0f0f0;
}

响应式处理

通过媒体查询调整导航布局，小屏幕时可切换为汉堡菜单。使用 max-width 作为断点判断条件。

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
  }
}

交互增强

为当前选中项添加高亮状态，使用 active 类或 :focus 伪类。结合 JavaScript 可实现动态切换。

.nav-item.active {
  border-bottom: 2px solid #0066cc;
}

无障碍优化

确保导航可通过键盘操作，为焦点状态添加明显样式。使用 aria-label 描述导航区域。

.nav-item:focus {
  outline: 2px dashed #0066cc;
}