如何創建：CSS 面包屑導航

學習如何使用 CSS 創建面包屑導航。

親自試一試

如何創建面包屑導航

面包屑導航提供用戶之前訪問過的每個頁面的鏈接，并顯示用戶在網站中的當前位置。

第一步 - 添加 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>

第二步 - 添加 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 分頁