HTML 导航菜单的创建

导航菜单是网站的重要组成部分，它允许用户轻松访问网站上的不同页面。在 HTML 中创建导航菜单非常简单，以下是如何实现：

1. 创建一个有序列表

使用

标签创建有序列表，其中每个列表项代表菜单中的一个链接：

立即学习“前端免费学习笔记（深入）”；

<ol><li><a href="home.html">主页</a></li>  <li><a href="about.html">关于我们</a></li>  <li><a href="contact.html">联系我们</a></li></ol>

2. 设置列表样式

通过添加 CSS 样式表来设置导航菜单的样式。例如，您可以将导航菜单水平放置并设置每个链接的字体大小：

ol {  display: flex;  list-style-type: none;  padding: 0;}ol li {  padding: 0 10px;  font-size: 16px;}

3. 添加边框和阴影（可选）

如果您希望导航菜单具有边框或阴影，则可以通过以下 CSS 样式实现：

ol {  border: 1px solid #ccc;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}

4. 实现下拉菜单（可选）

如果您希望创建下拉菜单，则可以使用额外的 HTML 和 CSS：

• HTML: 使用
  标签创建子菜单，并将其包含在导航菜单的
  • 标签中：

• 父级菜单
  • 子菜单 1
  • 子菜单 2
• CSS: 使用 CSS 样式隐藏子菜单，当悬停在父级链接上时显示：

ul {  display: none;}li:hover ul {  display: block;}

5. 使用 HTML5

HTML5 引入了

<nav><ul><li><a href="home.html">主页</a></li>    <li><a href="about.html">关于我们</a></li>    <li><a href="contact.html">联系我们</a></li>  </ul></nav>

标签： 导航菜单