Làm thế nào để tạo: Dẫn đường mòn CSS

Học cách sử dụng CSS để tạo dẫn đường mòn.

Thử ngay

Làm thế nào để tạo dẫn đường mòn

Dẫn đường mòn cung cấp liên kết đến từng trang mà người dùng đã truy cập và hiển thị vị trí hiện tại của người dùng trong trang web.

Bước 1 - Thêm HTML：

<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：

/* 设置列表样式 */
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;
}

Thử ngay

Trang liên quan

Hướng dẫn:CSS phân trang