CSS 面包屑激活
面包屑（Breadcrumb）是一種通常用于網站導航的組件，顯示出當前頁面的位置。面包屑通常出現在頁面的頂部或側邊欄，以便讓用戶在導航中快速找到自己需要的內容。CSS 中，我們可以通過為當前頁面添加一個激活狀態來增強面包屑的可用性。
在 HTML 中，我們可以使用無序列表（ul）來實現面包屑，每個列表項即為一個頁面。而在 CSS 中，我們可以使用 ::before 和 ::after 偽元素來添加樣式。
首先，我們可以為面包屑設置一個默認的樣式：
```
ul.breadcrumb {
list-style: none;
padding: 0;
margin: 0;
font-size: 16px;
}
ul.breadcrumb li {
display: inline;
}
ul.breadcrumb li+li:before {
content: ">";
margin: 0 10px;
}
```
這段 CSS 代碼為面包屑設置了一個基礎樣式，讓它們按行排列并在每個列表項之間添加箭頭以明確頁面的層次結構。
接著，我們可以使用偽類（:hover）來為激活狀態添加樣式：
```
ul.breadcrumb li:last-child:before {
content: "\f054"; /* fa-caret-right */
font-family: "FontAwesome";
font-weight: bold;
}
ul.breadcrumb li:last-child a {
color: #333;
text-decoration: none;
}
ul.breadcrumb li:last-child:hover a {
color: #666;
}
```
這段代碼使用 FontAwesome 圖標庫中的向右箭頭圖標，并為當前頁面（即最后一個列表項）添加了激活狀態，也就是將箭頭圖標改為加粗并改變鏈接的顏色和下劃線，以突出顯示用戶當前所在位置。
最后，我們可以將這些 CSS 樣式與 HTML 代碼結合起來創建一個完整的面包屑導航：
``````
這段 HTML 代碼包含了一個包含五個列表項的面包屑導航，由于這里只是一個示例，你需要根據你自己的網站結構和頁面層次結構來調整頁碼和鏈接。
綜上所述，使用 CSS 為面包屑添加激活狀態是一種很好的方式來增強網站的可用性。如果你的網站有很多子頁面，那么使用面包屑導航會讓用戶更加輕松地找到自己需要的內容。
上一篇mysql檢查表內某個值
下一篇css 頁寬 隱藏