如何操作 - 固定菜单
了解如何使用 CSS 创建一个“固定”的菜单。
如何创建固定的顶部菜单
步骤 1) 添加 HTML
示例
<div class="navbar">
<a href="#home">主页</a>
<a href="#news">新闻</a>
<a href="#contact">联系</a>
</div>
<div class="main">
<p>一些文本，一些文本，一些文本，一些文本...</p>
</div>
步骤 2) 添加 CSS
要创建固定的顶部菜单，请使用 position:fixed 和 top:0。请注意，固定菜单会覆盖您其他的内容。要解决此问题，请为内容添加一个等于或大于菜单高度的 margin-top。
示例
/* 导航栏 */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* 设置导航栏为固定位置 */
top: 0; /* 将导航栏定位在页面顶部 */
width: 100%; /* 宽度 100% */
}
/* 导航栏中的链接 */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鼠标悬停时更改背景 */
.navbar a:hover {
background: #ddd;
color: black;
}
/* 主要内容 */
.main {
margin-top: 30px; /* 添加顶部边距以避免内容重叠 */
}
自己动手试一试 »
如何创建固定的底部菜单
要创建固定的底部菜单，请使用 position:fixed 和 bottom:0。
示例
/* 导航栏 */
.navbar {
position: fixed; /* 设置导航栏为固定位置 */
bottom: 0; /* 将导航栏定位在页面底部 */
width: 100%; /* 宽度 100% */
}
/* 主要内容 */
.main {
margin-bottom: 30px; /* 添加底部边距以避免内容重叠 */
}
自己动手试一试 »
提示：访问我们的 CSS 导航栏教程 了解更多关于导航栏的信息。
