css 怎么做固定导航

CSS是网页设计中必不可少的一部分，如何使用CSS设计一个固定导航呢？下面我们来详细讲解一下。

首先，在HTML中需要创建一个导航的容器，在CSS中将其设置成固定定位，如下所示：

nav>
      ul>
        li>
    a href="#">
    Home/a>
    /li>
        li>
    a href="#">
    About Us/a>
    /li>
        li>
    a href="#">
    Contact/a>
    /li>
      /ul>
    /nav>

nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 10px;
}

上面的代码中，我们将导航栏设置在页面顶部，并且通过将该容器设置为固定定位，使得它可以一直固定在页面顶部。

接下来，我们需要让导航栏的位置不会覆盖页面其他内容，所以需要在容器中下方增加一个元素占用相应的位置，可以使用空的div或者margin。如下所示：

nav + div {
      height: 50px;
 /* 导航栏高度 */}

最后，在CSS中设置菜单列表的样式，如下所示：

nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: center;
 /* 居中 */}
nav li {
      display: inline-block;
     /* 水平排列 */  margin-right: 20px;
}
nav a {
      display: block;
     /* 将超链接设置为块状元素以便占用整个li */  color: #555;
      text-decoration: none;
      font-size: 16px;
      padding: 10px;
      transition: all 0.3s ease;
 /* 添加渐变效果 */}
nav a:hover {
      color: #fff;
      background-color: #555;
 /* 鼠标移到菜单项上时背景色变换 */}
    

上述代码中，我们设置了菜单列表的样式和超链接的样式，以及鼠标移到菜单项上时的背景色变换效果。将上述所有代码整合在一起，即可得到一个完整的固定导航。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！