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