CÁCH LÀM - CSS Breadcrumbs
Tìm hiểu cách tạo điều hướng breadcrumb bằng CSS.
Cách tạo điều hướng đường dẫn
Điều hướng breadcrumb cung cấp các liên kết quay lại mỗi trang trước đó mà người dùng đã điều hướng qua và hiển thị vị trí hiện tại của người dùng trong một trang web.
Bước 1) Thêm HTML:
Thí dụ
<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>
Bước 2) Thêm CSS:
Thí dụ
/* Style the list */
ul.breadcrumb {
padding: 10px
16px;
list-style: none;
background-color: #eee;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
/* Add a
slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before
{
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
Đi tới Hướng dẫn phân trang CSS của chúng tôi để tìm hiểu thêm về phân trang.