CSS 导航栏

导航栏（navbar）是网站最重要的组件之一，负责把访客带到各个页面。它通常由一组链接组成，可以用无序列表来写，再配合 CSS 去掉默认样式、摆成垂直或水平布局。讲师带你从零手写一个导航栏。

导航栏的基础结构

语义化写法是用 ul + li + a 表示一组导航链接，先把浏览器默认的列表与链接样式清掉：

<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 { list-style: none; margin: 0; padding: 0; }  /* 去掉圆点 */
.nav a { text-decoration: none; color: #333; }     /* 去掉下划线 */

垂直导航栏

把链接变成占满整行的块级元素，点击区域更大、更易点中：

.nav li a {
  display: block;          /* 链接撑满整行 */
  padding: 10px 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}
.nav li a:hover {
  background: #4caf50;
  color: #fff;             /* 悬停变绿底白字 */
}

运行效果：四行导航项纵向排列，鼠标移过时背景变绿，选中反馈清晰。

水平导航栏

把 li 横过来排：inline-block、float 都行，现代写法用 Flex 更省心：

.nav-flex { display: flex; }   /* 弹性盒一行排列 */
.nav-flex li a {
  display: block;
  padding: 10px 18px;
}

运行效果：导航项横向排成一条，悬停的背景色只覆盖单个链接块。

当前页高亮

给当前所在页面加一个 class，让用户知道自己在哪：

.nav li a.active {
  background: #4caf50;
  color: #fff;
}

<ul class="nav-flex">
  <li><a class="active" href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
</ul>

运行效果："首页"一栏常驻绿底白字，其余栏目只有悬停时才变色。

固定与吸顶导航

让导航栏固定在视口顶部，滚动页面时始终可见：

.navbar-fixed {
  position: fixed;   /* 固定在视口 */
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
}
body { margin-top: 50px; }  /* 给固定导航腾出空间 */

运行效果：向下滚动时导航栏始终贴在浏览器顶部，内容从导航下方滚过。

小结

导航栏推荐用 ul/li/a 语义化结构：display:block 加 padding 扩大点击区做垂直导航，用 Flex 或 inline-block 转成水平导航，再配合 :hover 与 .active 给出状态反馈。会写导航栏，就等于会搭页面骨架了。