CSS中的导航条通常是网页中非常重要的一个组件，它能够让用户更加方便快捷地浏览页面内容。下面我们来看一下如何设置CSS中的导航条。首先，在HTML代码中定义导航条的基本结构。通常我们使用无序列表（

）来实现导航条，每个列表项（
• ）对应导航条的一个按钮。例如：

  <ul class="nav"><li class="active"><a href="#home">首页</a></li><li><a href="#intro">简介</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li></ul>

  其中，表示这个列表是一个导航条，而则表示当前所处页面对应的导航项。然后，在CSS代码中对导航条进行样式设置。我们可以通过以下代码实现基本样式：

  .nav {list-style: none; /* 去掉列表样式 */margin: 0;padding: 0;background: #333; /* 导航条背景色 */overflow: hidden;}.nav li {float: left; /* 使导航项横排 */}.nav li.active a {background-color: #f00; /* 当前所处页面对应的导航项背景色 */}.nav li a {display: block;color: #fff; /* 导航项文字颜色 */text-align: center;padding: 14px 16px;text-decoration: none; /* 去掉下划线 */}.nav li a:hover {background-color: #ddd; /* 鼠标悬停时导航项的背景色 */color: #000; /* 鼠标悬停时导航项文字的颜色 */}

  通过以上代码，我们实现了以下样式：- 导航条设置为无序列表，去掉了默认的列表样式，并将背景色设置为#333。- 导航项左浮动，以横排方式展现。- 当前所处页面对应的导航项背景色为#f00。- 导航项的文字颜色为白色，居中对齐，顶部和底部padding为14px和16px，去掉了下划线。- 当鼠标悬停在导航项上时，导航项的背景色变为#ddd，文字颜色变为黑色。综上所述，通过以上HTML和CSS代码，我们实现了简单的导航条设置。当然，在实际应用中，还可通过其他属性和技巧对导航条进行个性化设置和美化。