如何创建 - 固定菜单
了解如何使用 CSS 创建 fixed 固定菜单。
如何创建固定顶部菜单
步骤 1) 添加 HTML:
实例
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<p>Some text some text some text some text..</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 导航栏教程，了解有关导航栏的更多信息。
