如何 - 固定菜单
学习如何使用 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%; /* 全宽 */
}
/* 导航栏内的链接 */
.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%; /* 全宽 */
}
/* 主要内容 */
.main {
margin-bottom: 30px; /* 添加下边距以避免内容覆盖 */
}
尝试一下 »
提示： 访问我们的 CSS 导航栏教程 了解有关导航栏的更多信息。
