以下是一个简单的HTML和CSS示例，用于创建一个滑动顶部
固定导航菜单：
HTML代码：
```html
<
header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</
header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus magna quis lectus mattis, vel malesuada mi dictum. Etiam non odio non ipsum fermentum mollis. Nullam auctor nulla a mi scelerisque, vel lobortis sapien convallis. Sed vel lacus lorem. Nunc condimentum nunc eu velit finibus, vel venenatis nunc pulvinar. Sed at nulla sit amet purus bibendum interdum. Sed sed lectus vitae sapien tristique mattis. Sed sit amet justo ac neque faucibus auctor. Aenean vel enim vitae ipsum semper venenatis.</p>
<p>Phasellus pulvinar leo non mi eleifend, ac luctus quam efficitur. Donec aliquam lorem sit amet lacus euismod, vel sollicitudin ex interdum. Fusce congue, lorem id vulputate molestie, orci leo facilisis sapien, et commodo felis leo quis sapien. Praesent nec purus id ligula commodo feugiat. Suspendisse potenti. Fusce commodo mi vel est eleifend, vel vestibulum nulla maximus. Praesent non risus ut velit consequat varius. Mauris ut tellus sit amet ligula porttitor accumsan. Donec accumsan aliquam condimentum. Integer nec bibendum mauris. Donec congue, ex id luctus elementum, elit sapien commodo leo, euismod placerat arcu magna vel metus. Aenean laoreet, velit vel bibendum interdum, nisi nibh porta lectus, ac pellentesque ligula arcu eu elit. Nullam id est sed elit scelerisque tincidunt eu sed lorem. Sed vel diam nec ante egestas feugiat.</p>
<p>Aliquam erat volutpat. Aliquam ut arcu id mi blandit ultricies. Nullam vel odio eu urna lacinia semper quis vel dui. Donec nec placerat risus. Morbi lacinia, justo quis consequat porttitor, arcu velit lobortis est, eget eleifend nibh sem eget nulla. Sed bibendum auctor nunc, eu pharetra purus. Fusce sed laoreet est. Quisque euismod dictum mi, eget efficitur dolor pulvinar id. Vivamus ac finibus nisl. Aliquam erat volutpat. Ut quis malesuada justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lacinia augue vel metus accumsan, et interdum enim aliquam. Nam sit amet blandit quam. Donec id nibh euismod, malesuada nunc et, rhoncus ipsum.</p>
</main>
```
CSS代码：
```css
header {
position:
fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
z-index: 9999; /* 设置一个较高的 z-index 值，使
导航菜单在其他元素之上 */
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 0 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin: 0 10px;
}
a {
text-decoration: none;
color: #333;
}
main {
margin-top: 80px; /* 为了避免内容被
导航菜单遮挡，需要设置一个与
导航菜单高度相等的 margin-top */
}
```
通过将`
header`元素设置为
固定定位并将`top`属性设置为0，我们可以将
导航菜单固定在页面顶部。此外，我们还可以使用`z-index`属性将其置于其他元素之上。使用简单的Flexbox布局，我们可以轻松地将
导航菜单水平居中，并在
菜单项之间添加一些间距。最后，我们为内容区域设置了一个与
导航菜单相等的`margin-top`，以避免内容被
导航菜单遮挡。
最低0.47元/天 解锁文章
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
