Cách thực hiện - CSS Breadcrumb
Tìm hiểu cách tạo điều hướng đường dẫn bằng CSS.
Cách tạo điều hướng Breadcrumb
Điều hướng đường dẫn cung cấp các liên kết quay lại từng 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:
Ví 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:
Ví 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;
}
Hãy tự mình thử »Đ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.