Wie erstellt man: CSS Brotkrümelnavigation
- Vorherige Seite Seitennummerierung
- Nächste Seite Knopfgruppe
Lernen Sie, wie man eine Brotkrümelnavigation mit CSS erstellt.
Wie erstellt man eine Brotkrümelnavigation
Die Brotkrümelnavigation bietet Links zu jeder zuvor besuchten Seite des Benutzers und zeigt die aktuelle Position des Benutzers im Website.
Erster Schritt - Fügen Sie HTML hinzu：
<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>
Zweiter Schritt - Fügen Sie CSS hinzu：
/* 设置列表样式 */
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;
}
Verwandte Seiten
Tutorial:CSS-Pagination
- Vorherige Seite Seitennummerierung
- Nächste Seite Knopfgruppe
