如何操作 - CSS 面包屑导航

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

如何创建面包屑导航

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

步骤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：

示例

/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
  text-decoration: underline;
}

亲自试一试 »

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