如何 - CSS 面包屑
了解如何使用 CSS 创建面包屑导航。
如何创建面包屑导航
面包屑导航提供指向用户导航过的每个上一个页面的链接，并显示用户在网站中的当前位置。
步骤 1) 添加 HTML
示例
<ul class="breadcrumb">
<li><a href="#">主页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">2015 年夏季</a></li>
<li>意大利</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: "/\00a0";
}
/* 为列表中所有链接添加颜色 */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* 鼠标悬停时添加颜色 */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
自己动手试一试 »
前往我们的 CSS 分页教程 了解更多关于分页的信息。
