Mẫu phân trang CSS

Học cách sử dụng CSS tạo phân trang tương ứng.

Phân trang đơn giản

Nếu trang web của bạn có rất nhiều trang, bạn có thể muốn thêm chức năng phân trang nào đó trên mỗi trang:

Ví dụ

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

Thử trực tiếp

phân trang hoạt động và hover

sử dụng .active lớp hiển thị trang hiện tại và sử dụng khi chuột di chuyển qua chúng: :hover Chọn bộ lọc thay đổi màu của mỗi liên kết trang:

Ví dụ

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

Thử trực tiếp

phân trang hoạt động và hover có góc tròn

Nếu bạn cần các nút "active" và "hover" có góc tròn, hãy thêm border-radius thuộc tính:

Ví dụ

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

Thử trực tiếp

hiệu ứng chuyển đổi di chuột qua

Hãy đặt transition thuộc tính thêm vào liên kết trang để tạo hiệu ứng chuyển đổi khi di chuột qua:

Ví dụ

.pagination a {
  transition: background-color .3s;
}

Thử trực tiếp

phân trang có viền

Hãy sử dụng border thuộc tính thêm vào phân trang để thêm viền:

Ví dụ

.pagination a {
  border: 1px solid #ddd; /* Màu xám */
}

Thử trực tiếp

viền góc tròn

Lưu ý:Thêm viền góc tròn vào liên kết đầu tiên và cuối cùng của phân trang:

Ví dụ

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Thử trực tiếp

khoảng cách giữa các liên kết

Lưu ý:Nếu bạn không muốn kết hợp liên kết trang, hãy thêm margin thuộc tính:

Ví dụ

.pagination a {
  margin: 0 4px; /* Khoảng cách ngoài biên trên dưới là 0, có thể điều chỉnh linh hoạt */
}

Thử trực tiếp

kích thước trang phân trang

Hãy sử dụng font-size Thay đổi kích thước trang phân trang bằng thuộc tính:

Ví dụ

.pagination a {
  font-size: 22px;
}

Thử trực tiếp

trang căn giữa

Nếu bạn muốn căn giữa trang, hãy sử dụng text-align: center Các yếu tố hộp bao quanh nó (như <div>):

Ví dụ

.center {}}
  text-align: center;
}

Thử trực tiếp

More examples

Ví dụ

Thử trực tiếp

Mảnh bánh mì

Một hình thức khác của phân trang là được gọi là "mảnh bánh mì" (breadcrumbs):

Ví dụ

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

Thử trực tiếp