活动/当前导航链接

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

• Home

• News

• Contact

• About

实例

.active {
  background-color: #4CAF50;}

亲自试一试

右对齐链接

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

• Home

• News

• Contact

• About

实例

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li></ul>

亲自试一试

边框分隔栏

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

• Home

• News

• Contact

• About

实例

/* 为所有列表项添加灰色右边框，最后一项（last-child）除外 */li {
  border-right: 1px solid #bbb;}li:last-child {
  border-right: none;}

亲自试一试

固定的导航栏

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

ul {
  position: fixed;
  top: 0;
  width: 100%;}

ul {
  position: fixed;
  bottom: 0;
  width: 100%;}

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

灰色水平导航栏

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

• Home

• News

• Contact

• About

实例

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;}li a {
  color: #666;}

亲自试一试

粘性导航栏

为 <ul> 添加 position: sticky;，以创建粘性导航栏。

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

实例

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;}

亲自试一试

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