如何 - 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 分頁教程 瞭解更多關於分頁的資訊。
