固定头部导航栏：CSS 代码示例

如何固定头部导航栏：CSS 代码示例

您是否想要创建一个始终可见的头部导航栏，即使用户滚动页面内容也保持在顶部？使用 CSS 的 position: fixed; 属性可以轻松实现。

以下代码展示了如何创建一个固定在页面顶部的导航栏：

.box { width: 100%; margin: 0 auto; top: 0; left: 0; background-color: #fff; }

/* head 开始 */

.head { height: 100px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; width: 100%; background-color: #fff; }

.head ul, .head>a { float: left; height: 23px; width: 500px; margin: 0 -133px 0 0; }

.head li { float: left; color: #242b39; font-size: 16px; padding: 0px 24px; font-family: SourceHanSansSC; line-height: 23px; }

 ul a:first-child li { padding: 0; }

/* head 结束 */

/* login 开始 */ .loginbg { height: 607px; background: url(../imgs/loginbg.png) no-repeat; background-size: cover; }

.loginbg img { width: 100%; }

.loginform { width: 420px; height: 406px; padding: 20px; box-sizing: border-box; float: right; position: relative; background-color: #fff; top: 90px; }

.logtitl { width: 380px; height: 366px; border: 1px solid #ccc; border-top-color: blue;
 padding: 18px; box-sizing: border-box; text-align: center; font-size: 20px; font-weight: 700; }

.logtitl .dl { color: red; text-decoration: none; }

.log { width: 340px; height: 200px; box-sizing: border-box; padding: 18px; margin: 15px 0 18px; }

.logacc { width: 300px; height: 32px; border: 1px solid #ccc; padding-left: 26px; position: relative; box-sizing: border-box; top: 1px; }

.logpwd { width: 300px; height: 32px; border: 1px solid #ccc; padding-left: 26px; position: relative; box-sizing: border-box; top: 1px; margin: 10px 0px 0px 0px; }

.denglu { height: 20px; font-size: 14px; text-align: left; }

.denglu .auto { float: left; }

.denglu h4 { float: right; font-size: 12px; line-height: 18px; }

.loginbtn { background-color: rgb(225, 37, 27); font-size: 16px; font-family: 微软雅黑; word-spacing: 4px; color: rgb(255, 255, 255); width: 100%; height: 36px; margin-top: 25px; cursor: pointer; padding: 6px; border-radius: 0px; border-width: 1px; border-style: solid; border-color: rgb(225, 37, 27); border-image: initial; outline: none; }

.inputk { width: 270px; height: 32px; padding-left: 10px; position: relative; left: -41px; top: -2px; margin: 0 0 0 44px; box-sizing: border-box; }

.pay { width: 160px; height: 40px; float: left; }

.logtitl .zce { font-size: 14px; float: right; text-decoration: none; }

.logtitl a:link { color: #000; }

.logtitl a:hover { color: skyblue; }

.pay img { width: 35px; height: 35px; float: left; margin: 3px 2px; }

/* login 结束 */

/* foot 开始 */

.footlogo img { width: 200px; height: 56px; margin: 34px 0 0; }

.down { display: flex; justify-content: space-between; height: 100px; }

.down .box2 #p1 { line-height: 1.6em; padding-top: 27px; width: 426px; font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #7d879a; }

.down .box2 li { float: left; width: 128px; border-right: 1px solid #9e9e9e; color: #7d879a;
 height: 20px; position: relative; text-align: center; top: 28px; }

.down .box2 li a { height: 19px; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #7d879a; padding-right: 16px; text-decoration: none; }

.down .box2 li img { display: none; }

.down .box2 li:hover img { display: block; }

.box3 { margin-right: 55px; }

.down .box3 #p2 { width: 140px; height: 14px; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #7d879a; }

.down .box3 h3 { margin-top: 10px; width: 220px; height: 22px; font-size: 28px; font-family: SourceHanSansSC; font-weight: 700; color: #000; }

代码解释：

.head { position: fixed; top: 0; } 这行代码是关键，它将 .head 元素固定在浏览器窗口的顶部。
top: 0; 确保导航栏始终位于窗口顶部。
width: 100%; 设置导航栏的宽度为 100%，使其横跨整个页面。
background-color: #fff; 设置导航栏的背景颜色为白色。

通过以上代码，您可以创建一个固定在页面顶部、始终可见的头部导航栏。您还可以根据需要调整导航栏的样式和内容。

注意：

固定导航栏可能会遮挡页面内容。您可以添加一些额外的样式来解决这个问题，例如在页面内容区域添加上边距。
如果您需要在导航栏中添加滚动监听事件，请使用 JavaScript 来实现。