css导航栏怎么制作

制作 CSS 导航栏的一般步骤如下：

1. 创建一个 HTML 文件，其中包含一个无序列表（ul）作为导航栏的容器。

2. 在 CSS 文件中定义导航栏的样式，例如宽度、高度、背景颜色等。

3. 设置列表项（li）的样式，例如宽度、高度、边框、背景颜色等。

4. 设置链接（a）的样式，例如字体大小、颜色、文本装饰等。

5. 使用 CSS 选择器来选择需要控制的元素。

6. 使用 CSS 布局技术来排列导航栏中的元素，例如使用 float、position 等属性。

下面是一个简单的示例：

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 {
    width: 100%;
    height: 50px;
    background-color: #333;
}

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

li {
    float: left;
    width: 25%;
    height: 50px;
    text-align: center;
    border-right: 1px solid #666;
}

li:last-child {
    border-right: none;
}

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

上面的代码会创建一个横向的导航栏，其中包含四个链接，每个链接占据导航栏的 25% 宽度，链接之间有 1px 的灰色边框分隔。当鼠标悬停在链接上时，链接会变成白色。