正在加载...

CSS 导航栏

布局一课勾勒了页面区域。导航栏是帮助人们在这些区域与页面之间移动的链接条。从语义化的链接列表开始，把它们排成从容的一行，再加 hover 提示——嵌套下拉菜单留给下一课。

导航工具箱

📊 导航一览

部件 日常职责
nav 站点主/次链接的地标
ul / li / a 结构化的目的地列表
列表重置 去掉项目符号与默认缩进，便于栏式布局
水平行 Flex 或 inline-block，让链接并排
Hover / 当前 指针反馈与「你在这里」
垂直导航 同一列表纵向堆叠——适合侧栏

导航仍然是链接。保持焦点轮廓可见，给舒适的 padding，不要把含义藏进一堆无名 div。

nav 内的语义列表

用 nav 包裹菜单，并把目的地保持为列表中的真实锚点。屏幕阅读器和未来的你会感谢这种结构。

为 nav 重置列表

css 
.nav {
list-style: none;
margin: 0;
padding: 0;
}

.nav a {
text-decoration: none;
color: inherit;
}

用 Flex 做水平栏

简单的 flex 行把列表变成栏。gap 与 padding 胜过过窄的点击目标。（更深的 Flexbox 技巧稍后——干净导航栏这样就够。）

水平 flex 导航

css 
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}

.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}

Hover 与当前页提示

在 hover 时给出反馈，并用类标记当前页。切勿把 :focus 轮廓当「清理」永久去掉。

Hover 与当前链接

css 
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}

.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}

垂直侧栏导航

同一列表可以在侧栏中堆叠。间距留宽一些，让每个链接都容易点到。

垂直侧栏导航

css 
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}

.sidenav .nav a {
padding: 0.55rem 0.75rem;
}

从容的导航习惯

使用 nav + 列表 + 可读 padding。水平栏优先用 flex 行。巨型菜单与下拉留给下一课。别把链接栏当成整页布局外壳。

命名的 nav 角色

css 
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }

自己动手

  1. 构建 nav > ul.nav > li > a 并重置列表样式。
  2. 用 padding 与 gap 把链接排成水平 flex 行。
  3. 添加 :hover 与 .is-current 样式。
  4. 把列表复制为垂直 sidenav 变体。
  5. 写一句话：什么该留给下拉菜单课，而不是这里？

常见错误

  • padding 太小，触摸与鼠标目标都够不着
  • 永久去掉焦点轮廓
  • 用 div 汤代替 nav 和列表
  • 在本课里就做嵌套下拉巨型菜单
  • 把导航栏当成整个网站布局

小结

  • 导航栏是放在 nav 里的结构化链接列表
  • 先重置项目符号，再用 flex（或 inline-block）排列
  • Hover 与当前样式引导而不杀死焦点
  • 垂直导航是同一列表的堆叠
  • 下拉菜单等下一课

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 42 的 48
Css 教程