CSS导航栏教程

最后修改时间：2026年5月23日

• 水平导航栏：适合网站顶部主菜单、栏目入口和工具分类导航。
• 垂直导航栏：适合侧边栏目录、后台菜单或文章章节索引。
• 链接状态：通过不同状态颜色提升可读性和交互反馈。

水平导航栏（Horizontal Nav）

适合放在页面顶部，用于主导航菜单。

CSS 代码：

<style>
  #h_nav_bar a { padding:15px; font-weight:bold; float:left; }
  #h_nav_bar a:link { color:#d0d0d0; background-color:#0000a0; }
  #h_nav_bar a:visited { color:#c0c0c0; background-color:#0000a0; }
  #h_nav_bar a:hover { color:#ffffff; background-color:#000060; }
  #h_nav_bar a:active { color:#f0f0f0; background-color:#00ff00; }
</style>

HTML 代码：

<div id="h_nav_bar">
  <a href="../html/link/html-anchor-link.html">锚链接</a>
  <a href="../html/link/html-link-color.html">链接颜色</a>
  <a href="../html/mailto.html">电子邮件链接</a>
  <a href="../html/link/html-image-link.html">图像链接</a>
  <a href="../html/link/html-text-link.html">文本链接</a>
</div>

效果预览：

• #h_nav_bar a：所有链接的基础样式。
• #h_nav_bar a:link：未访问状态。
• #h_nav_bar a:visited：已访问状态。
• #h_nav_bar a:hover：鼠标悬停状态。
• #h_nav_bar a:active：按下瞬间状态。

垂直导航栏（Vertical Nav）

适合放在侧边栏，用于分类目录或工具列表。

CSS 代码：

<style>
  #v_nav_bar a { padding:15px; font-weight:bold; display:block; width:120px; }
  #v_nav_bar a:link { color:#d0d0d0; background-color:#0000a0; }
  #v_nav_bar a:visited { color:#c0c0c0; background-color:#0000a0; }
  #v_nav_bar a:hover { color:#ffffff; background-color:#000060; }
  #v_nav_bar a:active { color:#f0f0f0; background-color:#00ff00; }
</style>

HTML 代码：

<div id="v_nav_bar">
  <a href="../html/link/html-anchor-link.html">锚链接</a>
  <a href="../html/link/html-link-color.html">链接颜色</a>
  <a href="../html/mailto.html">电子邮件链接</a>
  <a href="../html/link/html-image-link.html">图像链接</a>
  <a href="../html/link/html-text-link.html">文本链接</a>
</div>

效果预览：

常见问题

• 为什么要同时写四种链接状态？ 这样能让用户明确感知交互状态，导航可用性更高。
• 水平导航在手机上会挤压吗？ 本页已加移动端样式，小屏时横向导航会自动换成纵向排列。
• 可以只保留 hover 样式吗？ 可以，但建议至少保留 :link 和 :hover 以保证可读性。
• 导航栏必须使用列表标签吗？ 实际项目中常用 nav、ul、li 组织菜单；本页为了突出样式逻辑，使用更短的示例代码。

---

相关CSS教程

• CSS颜色代码