網頁麵包屑是在網站中告知使用者在茫茫網頁海中目前的位置在哪裡的功能，很好用也很常見。
學習重點
HTML 架構
架構滿簡單的，因為麵包屑有順序，所以清單父層使用 ol
1
2
3
4
5
6
7
8
9
10
11
| <div class="breadcrumbList">
<div class="container">
<ol class="breadcrumb">
<li><a href="#">金魚系列 VIII</a></li>
<li><a href="#">讓自己知道目前位置的麵包屑</a></li>
<li><a href="#">為什麼要叫做麵包屑</a></li>
<li><a href="#">網頁麵包屑跟真實麵包屑的差異</a></li>
<li><a href="#">直接看故事</a></li>
</ol>
</div>
</div>
|
CSS 樣式
這裡會使用到三個小技巧為加號選取器、跟偽元素的使用，
- 為了讓 li 橫向排列，再父層元素 ol 使用 flex，使之變為橫排。
- 並調整 li 的間距，除了左邊外其他都給予 20px 的空間。
- 這邊使用 ::before 偽元素產生麵包屑符號，但因為是從第一個前方不需要有麵包屑符號，所以使用加號選取器，這樣就會從第二個 li 開始顯示麵包屑。
- 最後要讓使用者知道停留在哪個頁面，所以使用到 last-child 選到最後一個 a 連結，並給予醒目顏色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| .breadcrumbList {
border-bottom: 3px solid #26ff93;
box-shadow: inset 0 0 11px 3px rgba(#000000, 0.6);
.breadcrumb {
display: flex;
li {
padding: 20px 20px 20px 0px;
& + li {
padding-left: 0;
}
& + li::before {
content: "/"; //+選取器，選到自己的下一層元素
color: #fff;
padding-right: 20px;
}
&:last-child a {
color: #26ff93; //選取到最後一個元素
}
a {
color: #ffffff;
font-weight: 100;
font-size: 16px;
cursor: pointer;
&:hover {
color: #26ff93;
}
}
}
}
}
|
這樣就完成啦~!!
這裡使用的 :last-child 跟 :nth-last-child(n) 用法不同，可以參考一下 W3School 的介紹。
CodePen https://codepen.io/hnzxewqw/pen/PoZxwKy
參考資料