CSS 导航栏

学习创建横向导航菜单 · 难度：进阶 · +15XP

CSS 导航栏制作

导航栏是网站最重要的组件之一，它帮助用户在不同页面间切换。CSS 可以创建各种样式的导航栏，从简单的横向导航到复杂的响应式导航菜单。本节将教你从零开始制作一个完整的导航栏。

基础横向导航栏

横向导航栏通常使用无序列表（ul/li）配合 Flexbox 布局来实现。

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#" class="active">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

.navbar {
  background: #333;
  padding: 0;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.nav-list li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}
.nav-list li a:hover {
  background-color: #555;
}
.nav-list li a.active {
  background-color: #4CAF50;
}

LOGO + 导航混合布局

将品牌 Logo 与导航链接放在同一行是现代网站的常见做法。

<nav class="navbar">
  <div class="nav-brand">
    <img src="logo.png" alt="Logo" height="40">
  </div>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a1a2e;
  padding: 0 20px;
}
.nav-menu {
  display: flex;
  list-style: none;
  gap: 10px;
}
.nav-menu a {
  color: white;
  text-decoration: none;
  padding: 15px 20px;
  border-radius: 5px;
  transition: background 0.3s;
}
.nav-menu a:hover {
  background: rgba(255,255,255,0.1);
}

粘性导航栏 sticky

使用 position: sticky 可以让导航栏在页面滚动时固定在顶部。

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

导航栏样式对比

类型	实现方式	适用场景
基础横向	Flexbox + ul/li	简单网站、后台管理
深色主题	深色背景 + 白色文字	科技、游戏类网站
粘性导航	position: sticky	长页面、内容型网站
Logo+导航	flex + space-between	企业官网、品牌站点
汉堡菜单	媒体查询 + JS 切换	移动端适配
固定导航	position: fixed	始终可见的导航栏

???? 练习

1. 创建一个深色背景的横向导航栏，包含 4 个链接
2. 为导航栏添加 active 类，高亮显示当前页面
3. 实现一个带有 Logo 和导航链接的水平导航栏
4. 使用 position: sticky 让导航栏在滚动时固定在顶部
5. 添加 hover 过渡动画，让链接在鼠标悬停时平滑变色