CSS教程高级应用 2个纯CSS面包屑导航栏实现代码

首先，这篇文章是讲解如何用纯CSS实现面包屑导航栏的教程。在学习这个教程之前，需要先掌握基础的CSS知识。

本教程提供了两种实现面包屑导航栏的方式，分别是通过无序列表和通过CSS伪元素来实现。以下是步骤：

通过无序列表实现面包屑导航栏

第一步：HTML结构

首先，我们需要构建一个无序列表，每一个列表项都表示面包屑导航栏中的一个层级。例如，下面的代码表示一个三级面包屑导航栏：

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Category</a></li>
  <li class="active">Subcategory</li>
</ul>

在这个代码中，我们使用了<a>标签来表示每一个面包屑导航栏层级，同时为当前层级的<li>标签添加了active类，以便样式可以单独处理。

第二步：CSS样式

通过CSS样式设置ul和li标签的样式，例如：

ul.breadcrumb {
  padding: 8px 15px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}

ul.breadcrumb li {
  display: inline;
  font-size: 18px;
  margin-right: 5px;
}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: ">";
}

这个样式表中，我们设置了ul.breadcrumb的样式，包括内边距、列表样式、背景颜色和边框圆角。对于每一个面包屑导航栏层级，我们使用了display: inline来让其排列在同一行，并且通过margin-right来设置其与相邻元素之间的距离。最后，我们通过伪元素+选择器来在每两个li元素之间插入一个“>”符号，以表示这是一个层级间的分隔符。

通过CSS伪元素实现面包屑导航栏

第一步：HTML结构

使用<div>标签构建一个包含面包屑导航栏的容器，并在其中嵌入一个<ul>标签，每一个<li>标签都表示面包屑导航栏中的一个层级。例如，下面的代码表示一个三级面包屑导航栏：

<div class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Subcategory</a></li>
  </ul>
</div>

第二步：CSS样式

再通过CSS样式设置面包屑导航栏的样式，例如：

.breadcrumb {
  overflow: hidden;
  background-color: #f5f5f5;
  padding: 8px 15px;
  border-radius: 4px;
}

.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
}

.breadcrumb li {
  float: left;
  margin-right: 10px;
}

.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: ">";
}

在这个样式表中，我们设置了.breadcrumb容器的样式，包括溢出处理、背景颜色、内边距和边框圆角。对于<ul>标签和每一个<li>标签，我们分别设置了列表样式、外边距、内边距和字体大小。最后，我们通过伪元素+选择器来在每两个li元素之间插入一个“>”符号，以表示这是一个层级间的分隔符。

通过以上步骤，我们就可以成功地使用纯CSS实现两种不同方式的面包屑导航栏啦！

示例说明：

假如你需要为你的网站增加面包屑导航，在某一个分类下的子分类中，可以这样编写HTML和CSS：

<div class="breadcrumb">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">分类</a></li>
    <li><a href="#">子分类</a></li>
    <li class="active">当前页面</li>
  </ul>
</div>

.breadcrumb {
  overflow: hidden;
  background-color: #f5f5f5;
  padding: 8px 15px;
  border-radius: 4px;
}

.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
}

.breadcrumb li {
  float: left;
  margin-right: 10px;
}

.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: ">";
}

.breadcrumb .active {
  color: #777;
}

此时，你便可以得到一个显示“首页 > 分类 > 子分类 > 当前页面”的面包屑导航栏。在这里，我们还设置了当前页面的字体颜色为灰色，以便区分其与其他层级。

你可能还需要实现另一种面包屑导航栏样式，比如通过无序列表实现：

<ul class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">分类</a></li>
  <li class="active">子分类</li>
</ul>

ul.breadcrumb {
  padding: 8px 15px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}

ul.breadcrumb li {
  display: inline;
  font-size: 18px;
  margin-right: 5px;
}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: ">";
}

ul.breadcrumb .active {
  color: #777;
  pointer-events: none;
  cursor: default;
}

这个样式表中，我们同样通过设置ul.breadcrumb的样式，来定义列表的样式和背景颜色，并且将每个面包屑导航栏层级的样式都设置为display: inline，以便在同一行上显示。最后，我们使用伪元素+选择器来在每两个li元素之间插入一个分隔符，设置当前层级的字体颜色为灰色，并且通过pointer-events和cursor属性来禁用当前层级的链接。

两个示例说明中，我们分别使用了两种不同方式来实现面包屑导航栏，通过掌握这两种方式的实现原理和代码，你便可以根据实际情况选择合适的方式来实现自己网站的面包屑导航栏啦！