在 HTML 中创建导航菜单通常使用<nav>
和<ul>
标签。其中<nav>
标签用于定义一个导航栏,<ul>
标签用于定义一个无序列表。具体步骤如下:
<nav>
标签,并在其中创建<ul>
标签<nav>
<ul>
<!-- 导航菜单项将在这里添加 -->
</ul>
</nav>
<ul>
标签中添加菜单项,使用<li>
标签<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
nav {
background-color: #e3e3e3;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
nav a {
text-decoration: none;
color: #333;
font-weight: bold;
font-size: 16px;
}
nav a:hover {
color: #fff;
background-color: #333;
}
以上CSS样式可以使导航栏具有背景颜色、间距、横向排列、鼠标悬浮变色等效果。