基础 CSS 菜单活动状态

在 Web 开发中，菜单是一个必不可少的组件。活动状态（即当前选中的菜单项）使用户更容易知道他们现在在哪个页面下。在本篇文章中，我们将介绍如何使用基础 CSS 来实现菜单活动状态。

HTML 结构

首先，我们需要一个基本的 HTML 结构来创建菜单。这里我们使用无序列表 <ul> 和列表项 <li>。以下是示例代码：

<nav>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

其中，.active 类表示当前选中的菜单项。

CSS 样式

为了实现活动状态，我们需要一些 CSS 样式。以下是样式代码：

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

nav li {
  display: inline-block;
  margin-left: 20px;
}

nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

nav li.active a {
  color: #fff;
  background-color: #333;
}

首先，我们将 <ul> 列表的外边距和内边距都设为 0，去掉了默认的列表标记。然后，我们给每个菜单项设置了 display: inline-block 属性，这样菜单项就能水平排列。通过 margin-left: 20px ，我们在每个菜单项之间增加了 20 像素的空白。

<a> 标记是链接，我们为其设置了一些基本的样式，包括填充量，取消下划线，颜色等。现在我们给选中的活动状态添加样式。对于一个活动状态的菜单项，我们给它的 <a> 标记增加了 background-color: #333 和 color: #fff 属性。这样就会在选中的菜单项背景色变为蓝色，字体变为白色。

总结

这就是如何使用基础 CSS 特性添加活动状态的菜单了。当用户在网站上导航时，他们将更容易知道他们所处的位置。你可以根据自己的需要调整样式，创建定制的菜单。

以上代码作为 markdown 格式的结果：

# 基础 CSS 菜单活动状态

在 Web 开发中，菜单是一个必不可少的组件。活动状态（即当前选中的菜单项）使用户更容易知道他们现在在哪个页面下。在本篇文章中，我们将介绍如何使用基础 CSS 来实现菜单活动状态。 

## HTML 结构

首先，我们需要一个基本的 HTML 结构来创建菜单。这里我们使用无序列表 `<ul>` 和列表项 `<li>`。以下是示例代码：

```html
<nav>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

其中，.active 类表示当前选中的菜单项。

CSS 样式

为了实现活动状态，我们需要一些 CSS 样式。以下是样式代码：

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

nav li {
  display: inline-block;
  margin-left: 20px;
}

nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

nav li.active a {
  color: #fff;
  background-color: #333;
}

首先，我们将 <ul> 列表的外边距和内边距都设为 0，去掉了默认的列表标记。然后，我们给每个菜单项设置了 display: inline-block 属性，这样菜单项就能水平排列。通过 margin-left: 20px ，我们在每个菜单项之间增加了 20 像素的空白。

<a> 标记是链接，我们为其设置了一些基本的样式，包括填充量，取消下划线，颜色等。现在我们给选中的活动状态添加样式。对于一个活动状态的菜单项，我们给它的 <a> 标记增加了 background-color: #333 和 color: #fff 属性。这样就会在选中的菜单项背景色变为蓝色，字体变为白色。

总结

这就是如何使用基础 CSS 特性添加活动状态的菜单了。当用户在网站上导航时，他们将更容易知道他们所处的位置。你可以根据自己的需要调整样式，创建定制的菜单。