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

面包屑是一种常见的用户界面组件，用于显示当前页面的位置和导航路径。本文将介绍如何使用 HTML 和 CSS 创建面包屑。

HTML 实现

面包屑通常使用无序列表实现。我们可以在列表项中插入链接和文本，表示当前页面的位置和导航路径。

示例代码如下：

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

注意：

• .breadcrumb 类是为了添加一些样式，使面包屑看起来更美观；
• .active 类表示当前页面的位置。你可以使用 JavaScript 动态添加这个类。

CSS 样式

使用 CSS 样式美化面包屑。下面是一些常见的样式：

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #f1f1f1;
  font-size: 16px;
}
.breadcrumb li {
  float: left;
}
.breadcrumb li a {
  display: block;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  color: #666;
  background-color: #f1f1f1;
}
.breadcrumb li a:hover {
  color: #fff;
  background-color: #000;
}
.breadcrumb .active {
  color: #000;
  background-color: #ddd;
}

其中，.breadcrumb 类表示面包屑的容器，.breadcrumb li 类表示每个列表项，.breadcrumb li a 类表示链接。.breadcrumb .active 类用于表示当前页面的位置。

结论

就是这样！现在您已经了解了如何使用 HTML 和 CSS 创建面包屑。这是一个简单而实用的用户界面组件，可以改善您的网站和应用程序。