介绍
导航栏是一个网站中非常重要的组成部分，它可以帮助用户快速地找到所需内容。在本文中，我们将学习如何使用CSS创建一个简单美观的导航栏。我们将从头开始一步一步地构建导航栏。如果您已经有一定的CSS基础，那么这篇文章对您将非常有帮助。
准备工作
在开始构建导航栏之前，我们需要进行一些准备工作。首先，我们需要创建一个HTML文档来容纳我们的导航栏。为了让代码更加整洁，我们将所有的样式放在一个CSS文件中。
让我们开始吧！
步骤1：创建HTML文档
我们将使用HTML来创建我们的导航栏。在HTML文档中，我们需要创建一个<nav>元素，并在其中添加一个<ul>元素来容纳导航栏的不同选项。每个选项都是一个链接，我们将使用<li>和<a>元素来创建这些链接。
下面是我们需要编写的HTML代码：
<nav class="navbar">
<ul class="nav-links">
<li class="nav-link"><a href="#">Home</a></li>
<li class="nav-link"><a href="#">About</a></li>
<li class="nav-link"><a href="#">Contact</a></li>
<li class="nav-link"><a href="#">Blog</a></li>
</ul>
</nav>
重要部分：我们创建了一个<nav>元素，并在其中添加了一个<ul>元素和四个<li>元素。
步骤2：添加基本样式
在添加样式之前，我们需要在HTML文档的头部引入我们的CSS文件。在<head>标签中添加以下代码：
<link rel="stylesheet" href="style.css">现在让我们开始添加样式。我们将从<nav>元素开始，并设置它的高度、背景颜色和边框样式。
.navbar {
height: 80px;
background-color: #333;
border-bottom: 2px solid #000;
}
接下来，我们将对<ul>和<li>元素进行样式设置。我们将使<ul>元素左对齐，并为其设置左外边距和内边距。我们还将为每个<li>元素设置左外边距和右外边距，以及一个下划线的边框样式。
.nav-links {
display: flex;
justify-content: flex-start;
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.nav-link {
margin-right: 30px;
border-bottom: 2px solid #fff;
}
此时，我们的导航栏看起来应该是这样的：
步骤3：设置悬停及选中状态样式
我们接下来将为<li>元素设置悬停和选中状态的样式。我们将使用:hover伪类为悬停状态设置样式，并使用.active类为选中状态设置样式。
.nav-link:hover {
border-bottom: 2px solid #f2f2f2;
}
.nav-link.active {
border-bottom: 2px solid #ff6347;
}
这将使我们的导航栏在悬停和选中时显示不同的边框颜色。
重要部分：我们使用:hover伪类为悬停状态设置样式，并使用.active类为选中状态设置样式。
步骤4：将导航栏固定在头部
我们希望导航栏可以固定在头部，这样用户在滚动页面时，导航栏仍然可见。为此，我们将为<nav>元素添加position: fixed样式，以及一个width: 100%的样式，以使其在整个页面的宽度上拉伸。
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 80px;
background-color: #333;
border-bottom: 2px solid #000;
}
现在，当用户滚动页面时，导航栏将固定在头部。
步骤5：将导航栏设置为响应式
最后，在大部分设备上，导航栏将是响应式的，并在移动设备上具有汉堡菜单。我们将在<nav>元素内添加一个<button>和一个<div>，以容纳汉堡菜单。
我们还将添加一个名为.show的类，并在其中设置display: flex，以显示汉堡菜单中的链接，以及一个flex-direction: column，以将链接设置为纵向排列。
我们还将使用@media查询，将导航栏的样式更改为适应小屏幕设备。
下面是我们需要添加的CSS代码：
.navbar button {
display: none;
}
@media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
height: 100vh;
justify-content: space-between;
}
.nav-links {
display: none;
}
.navbar button {
display: block;
background-color: transparent;
outline: none;
border: none;
color: #fff;
font-size: 1.2rem;
cursor: pointer;
margin-right: 20px;
}
.navbar .menu {
display: none;
height: 100%;
width: 100%;
background-color: #333;
position: absolute;
top: 80px;
left: 0;
}
.navbar .show {
display: flex;
flex-direction: column;
}
.navbar .show .nav-link {
margin-right: 0;
margin-bottom: 20px;
}
.navbar .show .nav-link:hover {
border-bottom: none;
}
.navbar .show .nav-link.active {
border-bottom: none;
}
}
重要部分：我们在<nav>元素中添加了<button>和<div>，并使用@media查询设置了导航栏的样式，以使其响应式。
现在，无论用户使用何种设备，都可以轻松访问您的网站的不同部分。
总结
在本文中，我们一步一步地构建了一个简单美观的导航栏。我们使用CSS来设置导航栏的样式，并使用HTML来创建它。通过使导航栏固定在头部，并将其设置为响应式，我们能够使用户轻松快速地浏览网站的不同部分。我们希望您通过本文学习到了如何使用CSS创建导航栏。