css导航栏怎么制作

制作 CSS 导航栏一般有以下几个步骤：

1. HTML 结构：首先，需要在 HTML 中创建导航栏的结构，一般可以使用 `ul` 和 `li` 标签来创建一个无序列表，每个列表项（`li` 标签）代表一个导航链接。

2. CSS 样式：接下来，需要使用 CSS 对导航栏进行样式设置。可以为导航栏添加背景颜色、字体颜色、字体大小等样式，同时也需要设置列表项的样式，如鼠标悬停时的样式、选中时的样式等。

3. JavaScript 交互：如果需要实现更高级的交互效果，如下拉菜单、响应式布局等，可以使用 JavaScript 来实现，例如使用 jQuery 库等。

下面是一个简单的 CSS 导航栏示例代码：

HTML：

<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>

CSS：

nav {
  background-color: #333;
  height: 50px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  flex: 1;
  text-align: center;
}

a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  line-height: 50px;
}

a:hover {
  background-color: #555;
}

a.active {
  background-color: #f00;
}

这个示例是一个简单的水平导航栏，使用了 Flexbox 布局。其中，`nav` 元素设置了背景颜色和高度，`ul` 元素设置了列表样式、边距和内边距，并使用 Flexbox 布局，`li` 元素设置了 Flexbox 弹性布局和文本居中，`a` 元素设置了字体颜色、字体大小和行高，并且使用了块级元素展示。同时，`a:hover` 设置了鼠标悬停时的背景颜色，`a.active` 设置了选中时的背景颜色。