在网页设计中，导航栏是不可或缺的一部分，它不仅帮助用户快速定位内容，还能提升整体体验。今天就来手把手教你用简单的HTML和CSS制作一个优雅的导航栏吧！👀
首先，在HTML部分，我们创建一个无序列表`
- `作为基础结构，每个菜单项用`
- `表示。例如：
```html
```
接着，用CSS美化它。通过设置`display: flex;`让菜单水平排列，并调整字体大小、颜色和间距。比如：
```css
.nav {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
.nav li a {
text-decoration: none;
color: 333;
font-size: 18px;
padding: 10px 20px;
}
.nav li a:hover {
background-color: f0f0f0;
border-radius: 5px;
}
```
这样，一个简洁又美观的导航栏就完成啦！✨快试试看吧～