CSS 导航栏

以下是关于 CSS 导航栏（Navigation Bar） 的中文讲解，包含基本结构、常用样式、布局方式（水平/垂直）、响应式导航菜单等内容，适合初学者和进阶开发者快速掌握。

---

🔰 一、什么是导航栏（Navbar）

导航栏是网页中用于组织和展示网站主要链接的区域，常见于网页顶部或侧边，用于帮助用户快速跳转到不同页面或板块。

---

🧱 二、基本结构（HTML）

<nav class="navbar">
  <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

---

🎨 三、基本样式（水平导航栏）

.navbar {
  background-color: #333;
  padding: 10px 20px;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 横向排列 */
}

.nav li {
  margin-right: 20px;
}

.nav a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  display: block;
}

.nav a:hover {
  background-color: #555;
  border-radius: 4px;
}

📌 效果：

• 横向导航栏
• 鼠标悬停高亮
• 背景深色，文字白色

---

📐 四、垂直导航栏（侧边栏样式）

.nav {
  display: flex;
  flex-direction: column; /* 垂直方向 */
  width: 200px;
  background-color: #f2f2f2;
}

.nav a {
  padding: 12px;
  color: #333;
  border-bottom: 1px solid #ddd;
}

.nav a:hover {
  background-color: #ddd;
}

---

📱 五、响应式导航栏（手机菜单切换）

HTML 示例：

<nav class="navbar">
  <div class="menu-toggle" onclick="toggleMenu()">☰</div>
  <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS 示例：

.nav {
  display: flex;
  flex-direction: row;
}

.menu-toggle {
  display: none;
  font-size: 24px;
  color: white;
  cursor: pointer;
}

/* 小屏幕下改为垂直菜单 */
@media (max-width: 768px) {
  .nav {
    display: none;
    flex-direction: column;
    background: #333;
  }

  .nav.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

JS 示例（用于菜单展开）：

<script>
function toggleMenu() {
  document.querySelector('.nav').classList.toggle('active');
}
</script>

---

🧭 六、导航栏常见布局方式对比

布局方式	技术手段	适用场景
水平导航栏	display: flex	页头导航
垂直导航栏	flex-direction: column	侧边栏
响应式导航栏	@media + JS	移动端适配
固定顶部导航栏	position: fixed; top: 0;	页面滚动时始终可见

---

🧩 七、可选增强功能

功能	实现方式
当前页面高亮	给对应 <li> 添加 .active 类
下拉菜单	使用 :hover 或 JS 切换显示
图标按钮	配合 SVG 或字体图标（如 FontAwesome）
搜索栏	添加 <input> 并美化

---

🧪 八、简易完整示例（水平导航 + 悬停效果）

<nav class="navbar">
  <ul class="nav">
    <li><a href="#">🏠 首页</a></li>
    <li><a href="#">🛠 服务</a></li>
    <li><a href="#">📞 联系</a></li>
  </ul>
</nav>

<style>
.navbar {
  background: #1e1e1e;
  padding: 10px 20px;
}
.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li {
  margin-right: 20px;
}
.nav a {
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  transition: background 0.3s;
}
.nav a:hover {
  background: #555;
  border-radius: 4px;
}
</style>

---

✅ 总结

类型	实现方式
水平导航栏	display: flex 横向
垂直导航栏	flex-direction: column
响应式切换	@media + JS 切换类名
固定导航栏	position: fixed; top: 0
动画 & 交互增强	可结合 JS、SVG、动画等

---

如你希望我根据你的页面风格生成一个导航栏模板（支持 Logo、子菜单、响应式），请告诉我设计需求，我可以直接为你生成 HTML + CSS 代码。