这篇博客演示了如何使用HTML和CSS制作一个自动固定在页面顶部的导航栏，即使在页面滚动时，导航栏也会始终保持可见。通过设置navbar的`overflow`、`background-color`、`position`和`top`属性，确保导航栏在页面滚动时保持固定位置。内容中包含具体的HTML和CSS代码示例，以及带有背景图片的示例文本。
body {
background-image: url("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
}
最低0.47元/天 解锁文章
扫一扫
2281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
