css如何固定导航栏

PHP中文网 • 2025年3月10日 18:27:14 • 编程技术 • 阅读 2

在css中，可以使用position属性固定导航栏；只需要给导航栏元素添加“position: fixed;”样式进行固定定位即可。固定定位会使元素固定在窗口的某个位置，即使窗口滚动也不会移动，不会对窗口其他元素造成影响。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css固定导航栏的方法：

1、HTML部分：

创建一个ul标签用于制作无序列表，因为需要页面跳转的效果，还要在li标签中插入a标签，将导航内容写入a标签中。最后创建一个div，将div高度设为1500px，当滑动滚动条时，方便观察导航栏的位置，具体代码如下

立即学习“前端免费学习笔记（深入）”；

登录后复制首页新闻动态联系我们关于我们

2、CSS部分：

基本框架已经搭建出来了，现在用CSS美化页面，用 float: left将无序列表左边浮动，排列在一行，用Padding调整导航之间的间距，用hover伪类选择器设置鼠标悬停效果，当鼠标经过导航时呈现红色，当导航被激活时，呈现黄色。

最重要的一步就是将导航栏固定在页面顶部，我们用position: fixed这个属性，生成固定定位的元素，相对于浏览器窗口进行定位。然后将它距离顶部的举例设为0（即top: 0），这样固定在顶部的导航就做好了，详细代码如下：

    *{margin:0;padding: 0;}   ul{       list-style-type: none;       overflow: hidden;       background-color: #333;       position: fixed;       top: 0;       width: 100%;   }     li {       float: left;   }      li a {       display: block;       color: white;       text-align: center;       padding: 14px 16px;       text-decoration: none;   }      li a:hover:not(.active) {       background-color: red;   }      .active {       background-color: yellow;   }

登录后复制

下面我们看一下实际效果：