参考手册
CSS 导航栏
CSS 垂直导航栏
CSS 响应式导航条
返回 CSS 导航栏

CSS 水平导航栏

水平导航栏

有两种创建水平导航条的方法：使用行内或浮动列表项。

行内列表项

构建水平导航条的一种方法是，除了上一章中的“标准”代码外，还要将 <li> 元素指定为 inline：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9. }
  11. li {
  12.   display: inline;
  13. }
  14. </style>
  15. </head>
  16. <body>
  18. <ul>
  19.   <li><a href="#home">首页</a></li>
  20.   <li><a href="#news">新闻</a></li>
  21.   <li><a href="#contact">联系方式</a></li>
  22.   <li><a href="#about">关于我们</a></li>
  23. </ul>
  25. </body>
  26. </html>
运行一下
例子解释：

display: inline; -默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

浮动列表项

创建水平导航条的另一种方法是浮动 <li> 元素，并为导航链接规定布局：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10. }
  12. li {
  13.   float: left;
  14. }
  16. li a {
  17.   display: block;
  18.   padding: 8px;
  19.   background-color: #dddddd;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <ul>
  26.   <li><a href="#home">首页</a></li>
  27.   <li><a href="#news">新闻</a></li>
  28.   <li><a href="#contact">联系方式</a></li>
  29.   <li><a href="#about">关于我们</a></li>
  30. </ul>
  32. <p><b>注释：</b>如果未指定 !DOCTYPE，则浮动项目可能会产生意外结果。</p>
  33. <p>背景色被添加到链接以显示链接区域。整个链接区域都是可单击的，而不仅仅是文本。</p>
  34. <p><b>注释：</b>overflow:hidden 被添加到 ul 元素，以防止 li 元素超出列表。</p>
  36. </body>
  37. </html>
运行一下
例子解释：
  • float: left; - 使用 float 使块元素滑动为彼此相邻
  • display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
  • padding: 8px; - 使块元素更美观
  • background-color: #dddddd; - 为每个元素添加灰色背景色

提示：如需全宽的背景色，请将 background-color 添加到 <ul> 而不是每个 <a> 元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10.   background-color: #dddddd;
  11. }
  13. li {
  14.   float: left;
  15. }
  17. li a {
  18.   display: block;
  19.   padding: 8px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <ul>
  26.   <li><a href="#home">首页</a></li>
  27.   <li><a href="#news">新闻</a></li>
  28.   <li><a href="#contact">联系方式</a></li>
  29.   <li><a href="#about">关于我们</a></li>
  30. </ul>
  32. <p>将背景色添加到列表中（而不是每个链接），以创建全宽的背景色。</p>
  33. <p><b>注释：</b>overflow:hidden 被添加到 ul 元素，以防止 li 元素超出列表。</p>
  35. </body>
  36. </html>
运行一下

水平导航条实例

创建具有深色背景色的基础水平导航条，并在用户将鼠标移到链接上方时改变链接的背景色：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10.   background-color: #333;
  11. }
  13. li {
  14.   float: left;
  15. }
  17. li a {
  18.   display: block;
  19.   color: white;
  20.   text-align: center;
  21.   padding: 14px 16px;
  22.   text-decoration: none;
  23. }
  25. li a:hover {
  26.   background-color: #111;
  27. }
  28. </style>
  29. </head>
  30. <body>
  32. <ul>
  33.   <li><a class="active" href="#home">首页</a></li>
  34.   <li><a href="#news">新闻</a></li>
  35.   <li><a href="#contact">联系方式</a></li>
  36.   <li><a href="#about">关于我们</a></li>
  37. </ul>
  39. </body>
  40. </html>
运行一下

活动/当前导航链接

向当前链接添加 "active" 类，这样用户就知道他/她在哪个页面上：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10.   background-color: #333;
  11. }
  13. li {
  14.   float: left;
  15. }
  17. li a {
  18.   display: block;
  19.   color: white;
  20.   text-align: center;
  21.   padding: 14px 16px;
  22.   text-decoration: none;
  23. }
  25. li a:hover:not(.active) {
  26.   background-color: #111;
  27. }
  29. .active {
  30.   background-color: #04AA6D;
  31. }
  32. </style>
  33. </head>
  34. <body>
  36. <ul>
  37.   <li><a class="active" href="#home">首页</a></li>
  38.   <li><a href="#news">新闻</a></li>
  39.   <li><a href="#contact">联系方式</a></li>
  40.   <li><a href="#about">关于我们</a></li>
  41. </ul>
  43. </body>
  44. </html>
运行一下

右对齐链接

通过将列表项向右浮动来右对齐链接（float:right;）：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10.   background-color: #333;
  11. }
  13. li {
  14.   float: left;
  15. }
  17. li a {
  18.   display: block;
  19.   color: white;
  20.   text-align: center;
  21.   padding: 14px 16px;
  22.   text-decoration: none;
  23. }
  25. li a:hover:not(.active) {
  26.   background-color: #111;
  27. }
  29. .active {
  30.   background-color: #04AA6D;
  31. }
  32. </style>
  33. </head>
  34. <body>
  36. <ul>
  37.   <li><a href="#home">首页</a></li>
  38.   <li><a href="#news">新闻</a></li>
  39.   <li><a href="#contact">联系方式</a></li>
  40.   <li style="float:right"><a class="active" href="#about">关于我们</a></li>
  41. </ul>
  43. </body>
  44. </html>
运行一下

边框分隔栏

将 border-right 属性添加到 <li>，以创建链接分隔符：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10.   background-color: #333;
  11. }
  13. li {
  14.   float: left;
  15.   border-right:1px solid #bbb;
  16. }
  18. li:last-child {
  19.   border-right: none;
  20. }
  22. li a {
  23.   display: block;
  24.   color: white;
  25.   text-align: center;
  26.   padding: 14px 16px;
  27.   text-decoration: none;
  28. }
  30. li a:hover:not(.active) {
  31.   background-color: #111;
  32. }
  34. .active {
  35.   background-color: #04AA6D;
  36. }
  37. </style>
  38. </head>
  39. <body>
  41. <ul>
  42.   <li><a class="active" href="javascript:void(0)">首页</a></li>
  43.   <li><a href="javascript:void(0)">新闻</a></li>
  44.   <li><a href="javascript:void(0)">联系方式</a></li>
  45.   <li style="float:right"><a href="javascript:void(0)">关于我们</a></li>
  46. </ul>
  48. </body>
  49. </html>
运行一下

固定的导航条

使导航条保持在页面的顶部或底部，即使用户滚动页面也是如此：

固定在顶部
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         html, body {
  6.             font-family: Verdana,sans-serif;
  7.             font-size: 15px;
  8.             line-height: 1.5
  9.         }
  11.         body {
  12.             margin: 0;
  13.         }
  15.         ul {
  16.             list-style-type: none;
  17.             margin: 0;
  18.             padding: 0;
  19.             overflow: hidden;
  20.             background-color: #333;
  21.             position: fixed;
  22.             top: 0;
  23.             width: 100%;
  24.         }
  26.         li {
  27.             float: left;
  28.         }
  30.         li a {
  31.             display: block;
  32.             color: white;
  33.             text-align: center;
  34.             padding: 14px 16px;
  35.             text-decoration: none;
  36.         }
  38.         li a:hover:not(.active) {
  39.             background-color: #111;
  40.         }
  42.         .active {
  43.             background-color: #04AA6D;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  49.     <ul>
  50.         <li><a class="active" href="#home">首页</a></li>
  51.         <li><a href="#news">新闻</a></li>
  52.         <li><a href="#contact">联系方式</a></li>
  53.     </ul>
  55.     <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1000px;">
  56.         <h1>顶部固定导航条</h1>
  57.         <h2>滚动时，导航条将停留在页面顶部</h2>
  59.         <p>这是一些文本，这是一些文本</p>
  60.         <p>这是一些文本，这是一些文本</p>
  61.         <p>这是一些文本，这是一些文本</p>
  62.         <p>这是一些文本，这是一些文本</p>
  63.         <p>这是一些文本，这是一些文本</p>
  64.         <p>这是一些文本，这是一些文本</p>
  65.         <p>这是一些文本，这是一些文本</p>
  66.         <p>这是一些文本，这是一些文本</p>
  67.         <p>这是一些文本，这是一些文本</p>
  68.         <p>这是一些文本，这是一些文本</p>
  69.         <p>这是一些文本，这是一些文本</p>
  70.         <p>这是一些文本，这是一些文本</p>
  71.         <p>这是一些文本，这是一些文本</p>
  72.         <p>这是一些文本，这是一些文本</p>
  73.     </div>
  75. </body>
  76. </html>
运行一下
固定在底部
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         html, body {
  7.             font-family: Verdana,sans-serif;
  8.             font-size: 15px;
  9.             line-height: 1.5
  10.         }
  12.         body {
  13.             margin: 0;
  14.         }
  16.         ul {
  17.             list-style-type: none;
  18.             margin: 0;
  19.             padding: 0;
  20.             overflow: hidden;
  21.             background-color: #333;
  22.             position: fixed;
  23.             bottom: 0;
  24.             width: 100%;
  25.         }
  27.         li {
  28.             float: left;
  29.         }
  31.         li a {
  32.             display: block;
  33.             color: white;
  34.             text-align: center;
  35.             padding: 14px 16px;
  36.             text-decoration: none;
  37.         }
  39.         li a:hover:not(.active) {
  40.             background-color: #111;
  41.         }
  43.         .active {
  44.             background-color: #04AA6D;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  50.     <ul>
  51.         <li><a class="active" href="#home">首页</a></li>
  52.         <li><a href="#news">新闻</a></li>
  53.         <li><a href="#contact">联系方式</a></li>
  54.     </ul>
  56.     <div style="padding:20px;;background-color:#1abc9c;height:1000px;">
  57.         <h1>底部固定导航条</h1>
  58.         <h2>滚动时，导航条将停留在页面底部</h2>
  60.         <p>这是一些文本，这是一些文本</p>
  61.         <p>这是一些文本，这是一些文本</p>
  62.         <p>这是一些文本，这是一些文本</p>
  63.         <p>这是一些文本，这是一些文本</p>
  64.         <p>这是一些文本，这是一些文本</p>
  65.         <p>这是一些文本，这是一些文本</p>
  66.         <p>这是一些文本，这是一些文本</p>
  67.         <p>这是一些文本，这是一些文本</p>
  68.         <p>这是一些文本，这是一些文本</p>
  69.         <p>这是一些文本，这是一些文本</p>
  70.         <p>这是一些文本，这是一些文本</p>
  71.         <p>这是一些文本，这是一些文本</p>
  72.         <p>这是一些文本，这是一些文本</p>
  73.     </div>
  75. </body>
  76. </html>
运行一下

注意：固定定位在移动设备上可能无法正常工作。

灰色水平导航条

带有细灰色边框的灰色水平导航条的实例

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10.   border: 1px solid #e7e7e7;
  11.   background-color: #f3f3f3;
  12. }
  14. li {
  15.   float: left;
  16. }
  18. li a {
  19.   display: block;
  20.   color: #666;
  21.   text-align: center;
  22.   padding: 14px 16px;
  23.   text-decoration: none;
  24. }
  26. li a:hover:not(.active) {
  27.   background-color: #ddd;
  28. }
  30. li a.active {
  31.   color: white;
  32.   background-color: #4CAF50;
  33. }
  34. </style>
  35. </head>
  36. <body>
  38. <ul>
  39.   <li><a class="active" href="javascript:void(0)">首页</a></li>
  40.   <li><a href="javascript:void(0)">新闻</a></li>
  41.   <li><a href="javascript:void(0)">联系方式</a></li>
  42.   <li><a href="javascript:void(0)">关于我们</a></li>
  43. </ul>
  45. </body>
  46. </html>
运行一下

粘性导航条

为 <ul> 添加 position: sticky;，以创建粘性导航条。粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed ）。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-size: 28px;
  7. }
  9. ul {
  10.   list-style-type: none;
  11.   margin: 0;
  12.   padding: 0;
  13.   overflow: hidden;
  14.   background-color: #333;
  15.   position: -webkit-sticky; /* Safari */
  16.   position: sticky;
  17.   top: 0;
  18. }
  20. li {
  21.   float: left;
  22. }
  24. li a {
  25.   display: block;
  26.   color: white;
  27.   text-align: center;
  28.   padding: 14px 16px;
  29.   text-decoration: none;
  30. }
  32. li a:hover {
  33.   background-color: #111;
  34. }
  36. .active {
  37.   background-color: #4CAF50;
  38. }
  39. </style>
  40. </head>
  41. <body>
  43. <div class="header">
  44.   <h3>向下滚动</h3>
  45.   <p>请向下滚动以查看粘性效果。</p>
  46. </div>
  48. <ul>
  49.   <li><a class="active" href="#home">Home</a></li>
  50.   <li><a href="#news">News</a></li>
  51.   <li><a href="#contact">Contact</a></li>
  52. </ul>
  54. <h3>粘性导航条实例</h3>
  55.         <p>当你滚动页面将导航条滚到顶部时，导航条将粘着顶部。</p>
  56.         <p>这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.</p>
  57.         <p>这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.</p>
  58.         <p>这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.</p>
  59.         <p>这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.</p>
  60.         <p>这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.</p>
  61.         <p>这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.这是一些文本确保页面能够滚动.</p>
  63. </body>
  64. </html>
运行一下

注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见上面的例子）。您还必须指定 top、right、bottom 或 left 至少之一，以使粘性定位起作用。

CSS 垂直导航栏
CSS 响应式导航条

分类导航