导航栏是网页中非常重要的元素之一。在网页中，导航栏能够起到导向作用，帮助用户迅速找到所需的内容。使用 CSS 样式来设计一个漂亮的导航栏非常重要。下面我们来看看怎么使用 CSS 样式来实现一个简单的导航栏。

<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务项目</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>

上面的代码是一个简单的导航栏的 HTML 结构。接下来我们可以为这个导航栏添加 CSS 样式，并将导航栏的样式美化。

nav {
background-color: #333; /* 导航背景色 */
height: 50px; /* 导航高度 */
}
nav ul {
list-style-type: none; /* 列表样式 */
margin: 0;
padding: 0;
overflow: hidden; /* 隐藏溢出部分 */
}
nav li {
float: left; /* 浮动 */
}
nav li a {
display: block;
color: white; /* 颜色 */
text-align: center;
padding: 14px 16px; /* 上下左右内边距 */
text-decoration: none; /* 去除下划线 */
font-size: 16px;
}
nav li a:hover {
background-color: #111; /* 鼠标悬浮背景色 */
}

上面的 CSS 样式可以让导航栏变得美观，更加易于用户操作。我们可以根据具体场景，根据需求增删一些样式属性，来实现更多样式的效果。