如何使用CSS美化HTML导航栏？

使用CSS美化HTML导航栏是非常常见的，你可以调整其颜色、字体、布局以及响应式设计等方面。这里提供一个基础的例子：

首先，在HTML中，保持导航栏结构不变，就像之前提到的一样：

<nav id="navbar">
    <ul class="navbar-list">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

然后在CSS文件(`styles.css`)中添加样式：

/* 设置全局样式 */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* 定义导航栏样式 */
#navbar {
    background-color: #333; /* 背景颜色 */
    overflow: hidden;
    position: fixed; /* 固定定位 */
    top: 0;
    width: 100%;
}

.navbar-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* 创建一个弹性布局 */
}

.navbar-item {
    float: left;
}

.navbar-item a {
    display: block;
    color: white; /* 文字颜色 */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* 鼠标悬停效果 */
.navbar-item a:hover {
    background-color: #ddd;
    color: black;
}

这个例子中，我们设置了导航栏的基本样式，包括背景色、文字颜色、鼠标悬停效果等。你可以根据需要修改这些样式，或者添加更多的CSS属性来定制导航栏的外观。