CSS 导航栏

导航栏通常用 HTML 列表（<ul>、<li>）加 链接（<a>）表示结构，再用 CSS 控制为横向或纵向、去掉列表符号、设置间距和悬停效果。这样语义清晰且易维护。

基本 HTML 结构

<nav>
  <ul class="nav">
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/news">新闻</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
</nav>

---

水平导航栏

思路：去掉列表默认样式，让 <li> 横向排列（inline-block 或 flex），再给链接设 padding、悬停样式。

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333;
}

.nav li {
  display: inline-block;
}

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

.nav a:hover {
  background: #555;
}

用 Flex 更简洁：

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333;
  display: flex;
}

.nav li {
  /* 无需 inline-block */
}

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

.nav a:hover {
  background: #555;
}

---

当前页高亮（.active）

给当前页的链接加 class，例如 class="active"：

<li><a href="/news" class="active">新闻</a></li>

.nav a.active {
  background: #0066cc;
}

---

垂直导航栏

列表默认就是纵向，只需保留块级、设宽度、去掉列表符号并美化链接：

.nav-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
}

.nav-vertical a {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  color: #333;
  text-decoration: none;
}

.nav-vertical a:hover {
  background: #f5f5f5;
}

---

小结

• 用 <ul> + <li> + <a> 做结构，用 list-style: none、padding: 0 去掉默认列表样式。
• 水平导航：li 用 display: inline-block 或父级 display: flex。
• 垂直导航：保持块级，设宽度与边框/背景。
• 当前页用 .active 类高亮；链接用 display: block + padding 扩大可点区域。

下一节学习 CSS 下拉菜单。