CSS中创建导航栏有多种方法，其中一种常见的方法是使用无序列表（<ul>）和列表项（<li>）结合CSS样式进行布局。以下是一个基本的导航栏布局示例：
HTML代码：
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
CSS代码：
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: #f0f0f0;
}nav li {
margin-right: 10px;
}
nav li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
nav li a:hover {
background-color: #333;
color: #fff;
}
在这个例子中，我们首先将无序列表的样式设置为没有列表标记、无内边距和外边距，并将其显示方式设置为弹性布局（flex）。然后，我们对列表项设置右侧间距以创建导航项之间的间隔。
对于列表项中的链接，我们设置了显示方式为块级元素，以便使整个导航项可点击，并设置了一些基本的样式，如内边距、文本装饰和颜色。
最后，我们在鼠标悬停在导航项上时，改变了背景颜色和文字颜色，以提供视觉反馈。
这只是一个基本的导航栏布局示例，你可以根据需要进行修改和扩展。还可以使用其他CSS技术，如Flexbox或CSS Grid，来实现更复杂的导航栏布局。