CSS 面包屑

---

了解如何使用 CSS 创建面包屑导航。

---

如何创建面包屑导航

面包屑导航提供指向用户浏览过的每个先前页面的链接，并显示用户在网站中的当前位置。

• Home
• Pictures
• Summer 15
• Italy

亲自试一试 »

---

步骤 1) 添加 HTML:

实例

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

步骤 2) 添加 CSS:

实例

/* 为列表设置样式 */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* 并排显示列表项 */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* 在每个列表项之前/之后添加一个斜杠符号 (/) */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/0a0";
}

/* 为列表中的所有链接添加颜色 */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* 在鼠标悬停时添加颜色 */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
} 亲自试一试 »

转到我们的 CSS 分页教程 以了解有关分页的更多信息。