一个网站能不能用，导航先看导航栏。栏代我见过太多页面，导航内容写得漂亮，栏代结果导航栏一塌糊涂——链接挤成一团，导航鼠标移上去没反应，栏代手机打开直接消失。导航问题往往不在设计，栏代而在最基础的导航HTML结构就没搭对。

导航栏的栏代本质是什么？就是一组链接。别把它想复杂了。导航最原始的栏代写法长这样：

<nav> <a href="/">首页</a> <a href="/about">关于</a> <a href="/contact">联系</a> </nav>

三行代码，一个导航栏就出来了。导航浏览器默认把它渲染成一行内联元素，栏代链接之间有点间距，导航能点，能用。但没人会直接这么上线——太丑，而且没有层级感。

关键一步是给<nav>里面套一个列表。为什么用列表？因为导航在语义上就是一组条目。用<ul>和<li>，屏幕阅读器能正确识别，搜索引擎也更容易理解结构。我见过有人用一堆<div>堆导航，能跑，但属于“能走就别用轮椅”的反面教材。

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

默认样式下，列表项会垂直堆叠，前面还带小圆点。所以CSS必须介入：list-style: none;去掉圆点，display: flex;让它们横过来。Flex布局是现在做导航栏最省心的方式，一行代码解决对齐问题。

nav ul {  list-style: none; display: flex; gap: 1.5rem; padding: 0; } nav a {  text-decoration: none; color: #333; font-weight: 500; } nav a:hover {  color: #0066cc; }

注意gap这个属性。以前大家用margin-right，结果最后一个元素多出一截空白，还得写:last-child { margin-right: 0; }。现在直接gap，干净利落。浏览器支持早就不是问题了，除非你要兼容IE——2024年了，放过自己吧。

移动端是另一个战场。宽度一窄，横向排列的链接要么换行，要么溢出。常见的做法是加一个汉堡菜单按钮，点击展开。HTML结构上加一个<button>：

<nav> <button class="menu-toggle" aria-label="菜单">☰</button> <ul> <li><a href="/">首页</a></li> <li><a href="/about">关于</a></li> <li><a href="/contact">联系</a></li> </ul> </nav>

aria-label别省。屏幕阅读器读到一个“☰”符号会懵，加上标签才说得通。按钮默认隐藏，只在媒体查询里显示：

.menu-toggle {  display: none; } @media (max-width: 600px) {  .menu-toggle {  display: block; } nav ul {  display: none; flex-direction: column; } nav ul.open {  display: flex; } }

然后写几行JavaScript切换open类。就这样，没有框架，没有依赖，一个能用的响应式导航栏就完成了。代码总量不到三十行。

我个人的习惯是再加一个aria-current="page"给当前页面的链接。比如你在“关于”页面，那个链接就加上这个属性。CSS里写nav a[aria-current="page"] { color: #0066cc; }，用户一眼就知道自己在哪。这个细节很小，但体验提升明显。

最后说一个坑：别用<div onclick>代替<a>。链接就是链接，该用<a>就用<a>。键盘Tab能聚焦，右键能新窗口打开，这些原生行为是<div>模拟不来的。我见过一个项目，导航栏全是<div>加JS跳转，结果用户中键点击毫无反应，投诉了好几次才改回来。

导航栏代码不难，难的是把语义、可访问性和响应式都照顾到。上面这套结构，复制粘贴就能跑，改改颜色和间距就能用。别想太多，先写出来，再调样式。