要在 css 中创建导航条，首先在 html 中放置包含链接的导航结构，然后设置样式以控制外观和布局，包括设置宽高、排列方式和文本样式。最后，添加悬停状态和响应式设计以增强交互性和跨设备兼容性。
如何创建 CSS 导航条
步骤
1. 创建 HTML 结构
- 创建一个
nav元素包含导航链接。 - 使用
ul（无序列表）和li（列表项）定义链接列表。 - 使用
a（锚）元素添加链接。
示例：
立即学习“前端免费学习笔记（深入）”；
<code class="html"><nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav></code>2. 设置样式
- 为
nav设置一个宽度和高度。 - 设置
ul的显示方式为flex，以便将链接水平排列。 - 设置
li的宽度。 - 设置
a的样式（文本、颜色、字体大小）。
示例 CSS：
<code class="css">nav {
width: 100%;
height: 50px;
}
ul {
display: flex;
justify-content: space-around;
}
li {
width: 100px;
}
a {
text-decoration: none;
color: #000;
font-size: 16px;
}</code>3. 添加悬停状态
- 为
a设置:hover状态来更改其外观，当鼠标悬停在链接上时。
示例 CSS：
<code class="css">a:hover {
color: #fff;
background-color: #000;
}</code>4. 添加响应式设计
- 使用媒体查询根据屏幕大小调整导航条的样式。
- 例如，在较小的屏幕上，可以将导航条转换为垂直菜单。
示例 CSS：
<code class="css">@media only screen and (max-width: 768px) {
nav {
height: auto;
}
ul {
flex-direction: column;
}
}</code> 
