CSS 导航栏

在网页设计中，导航栏是非常重要的元素之一。它帮助用户快速找到他们想要的内容，并且可以提升网站的整体用户体验。在本章节中，我们将学习如何使用 CSS 来创建一个简单而漂亮的导航栏。

创建导航栏容器

首先，我们需要为导航栏创建一个容器。我们可以使用 <nav> 标签来定义导航栏的整体结构，并且给这个容器一个唯一的类名或者 ID，以便我们后续对其进行样式设置。

<nav class="navbar">
  <!-- 导航链接将在这里添加 -->
</nav>

设置导航链接样式

接下来，我们需要为导航栏中的链接设置样式。我们可以使用 <a> 标签来创建链接，并且在 CSS 中为这些链接设置样式，包括字体大小、颜色、背景颜色等。

// www.javascriptcn.com code example
.navbar a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  background-color: #f8f8f8;
  border-radius: 5px;
  margin: 0 10px;
}

.navbar a:hover {
  background-color: #eaeaea;
}

设置导航栏布局

最后，我们需要设置导航栏的布局。我们可以使用 flexbox 或者 grid 布局来实现导航链接的水平排列，同时还可以设置导航栏的高度、背景颜色等样式。

// www.javascriptcn.com code example
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar a {
  margin: 0 10px;
}

通过以上步骤，我们可以创建一个简单而漂亮的导航栏，让用户更方便地浏览网站内容。在实际项目中，你还可以根据需求进一步定制导航栏的样式，使其更符合你的设计需求。