如何使用 HTML 和 CSS 创建面包屑？

面包屑是网站上非常常见的一种页面导航方式，它能够告诉用户当前所在的位置以及如何返回上一级或更高级别的页面。在本文中，我们将介绍如何使用 HTML 和 CSS 创建面包屑。

HTML 结构

面包屑通常有一个层级结构，因此我们可以使用无序列表（<ul>）来创建它。每一个面包屑项都是列表中的一个列表项（<li>）。我们可以使用链接（<a>）将每个面包屑项与其对应的页面关联起来。下面是一个示例 HTML 结构：

<ul class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">分类1</a></li>
  <li><a href="#">分类2</a></li>
  <li><span>当前页面</span></li>
</ul>

CSS 样式

在 HTML 结构创建好之后，需要为其添加样式以达到我们想要的效果。以下是一个基本的样式示例：

```css
.breadcrumb {
  list-style: none; /* 去掉默认的列表样式 */
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: inline-block; /* 将列表项水平排列 */
}

.breadcrumb li+li::before { /* 为除第一项以外的列表项添加箭头分隔符 */
  content: '/'; /* 添加斜杠分隔符 */
  margin: 0 5px; /* 调整分隔符的位置 */
}

.breadcrumb li:last-child {
  color: #888; /* 最后一项文字样式 */
  pointer-events: none; /* 禁用最后一项的链接 */
}

.breadcrumb li:last-child span {
  cursor: default; /* 设置光标样式 */
}

## 效果预览

使用上述代码创建的面包屑将具有以下效果：

![面包屑效果](https://i.ibb.co/bPLrgQJ/breadcrumb.png)

这样做可以使您的网站更易于导航，提高用户体验。