基础 CSS - 厨房水槽面包屑

什么是面包屑？

面包屑是指网站中表示用户当前所在页面路径的导航栏，常见于电商网站和新闻网站等需要浏览多个页面的网站。

面包屑的路径表示方式

面包屑的路径可以用不同的符号表示：

• 箭头：Home > Category > Subcategory > Page
• 小斜杠：Home / Category / Subcategory / Page
• 大斜杠：Home \ Category \ Subcategory \ Page

实现面包屑的 CSS 样式

HTML 结构

<div class="breadcrumb">
  <a href="#">Home</a>
  <span>/</span>
  <a href="#">Category</a>
  <span>/</span>
  <a href="#">Subcategory</a>
  <span>/</span>
  <span>Page</span>
</div>

CSS 样式

.breadcrumb {
  font-size: 14px;
  color: #333;
  margin: 10px 0;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
  padding: 5px;
}

.breadcrumb span {
  color: #333;
  padding: 5px;
}

解析

• .breadcrumb 是面包屑的容器，通过设置 margin 属性可以使其与其他元素产生间隔。
• .breadcrumb a 是面包屑中的链接，通过设置 color 和 text-decoration 属性可以让其看起来像是一个链接。
• .breadcrumb span 是面包屑中的分隔符和当前页的文字内容，通过设置 color 属性可以让其与连接颜色区分开来。

效果预览

以上就是实现基础的 CSS 面包屑的介绍。