bread crumb

在Web开发中，Bread Crumb（面包屑）是一种用于导航的用户界面元素，通常用于展示用户当前页面的位置和路径。它是一种水平的导航菜单，显示了用户从网站的根目录到当前页面的路径。通过Bread Crumb，用户可以直观地了解当前页面的位置，并可以快速地返回到更高层级的页面。

Bread Crumb通常位于页面的顶部或者底部，并且包含了一系列链接，每个链接都代表了一个层级。在HTML中，可以使用<ul>和<li>标签来定义Bread Crumb，例如：

<ul class="breadcrumb">
  <li><a href="/">首页</a></li>
  <li><a href="/products">产品</a></li>
  <li>产品详情</li>
</ul>

在CSS中，可以通过样式定义来控制Bread Crumb的外观和布局，例如：

.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.breadcrumb li {
  display: inline-block;
  padding: 10px;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 10px;
  color: #999;
}

.breadcrumb li:last-child {
  color: #777;
  pointer-events: none;
}