css 做一个导航栏

CSS（Cascading Style Sheets）是一种用于描述网页样式的语言，为网页提供了丰富的样式表现，使页面更加美观和易于阅读。

在此我们将介绍如何使用CSS来创建一个简单的导航栏。

  <ul class="navigation">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品服务</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>

以上是HTML代码，我们在ul元素中创建了四个li元素，并使用a元素为每个列表项添加了超链接。接下来使用CSS样式表定义导航栏的样式：

  .navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #333;
  }
  .navigation li {
    display: inline-block;
    margin-right: 20px;
    padding: 10px;
  }
  .navigation li:last-child {
    margin-right: 0;
  }
  .navigation li a {
    color: #fff;
    text-decoration: none;
  }
  .navigation li.current a {
    color: #00bcd4;
  }

以上CSS代码中，我们将导航栏的ul元素设置为无序列表，并去除了默认的列表标记符号。然后将li元素设置为行内块级元素，使其水平排列，并设置右边距为20px。最后使用伪类选择器: last-child去除最后一个li元素的右边距。为a元素添加了颜色和文本装饰的样式。当用户访问当前页面时，我们使用.current类为当前列表项的超链接添加了一个独特的颜色。

通过HTML和CSS的结合，我们可以轻松地创造简单却有效的导航栏。