如何创建固定菜单

2023-11-20 06:50| 来源: 网络整理| 查看: 265

❮ 上一节下一节 ❯ 如何创建 - 固定菜单

了解如何使用 CSS 创建 fixed 固定菜单。

亲自试一试 »

如何创建固定顶部菜单步骤 1) 添加 HTML: 实例 Home News Contact

Some text some text some text some text..

步骤 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 导航栏教程，了解有关导航栏的更多信息。

【本文地址】

今日新闻