Ví dụ về phân trang CSS
Tìm hiểu cách tạo phân trang đáp ứng bằng CSS.
Phân trang đơn giản
Nếu bạn có một trang web với nhiều trang, bạn có thể muốn thêm một số loại phân trang cho mỗi trang:
Thí dụ
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Phân trang hoạt động và có thể lưu trữ
Đánh dấu trang hiện tại với một .active
lớp và sử dụng :hover
bộ chọn để thay đổi màu của từng liên kết trang khi di chuyển chuột qua chúng:
Thí dụ
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Các nút Hoạt động và Di chuột được làm tròn
Thêm thuộc border-radiustính nếu bạn muốn có nút "hoạt động" và "di chuột" được làm tròn:
Thí dụ
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Hiệu ứng chuyển đổi có thể di chuyển
Thêm thuộc transitiontính vào các liên kết trang để tạo hiệu ứng chuyển tiếp khi di chuột:
Thí dụ
.pagination a {
transition: background-color .3s;
}
Phân trang có viền
Sử dụng thuộc bordertính để thêm đường viền vào phân trang:
Thí dụ
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Viền tròn
Mẹo: Thêm đường viền tròn vào liên kết đầu tiên và cuối cùng của bạn trong phân trang:
Thí 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;
}
Khoảng cách giữa các liên kết
Mẹo: Thêm thuộc margintính nếu bạn không muốn nhóm các liên kết trang:
Thí dụ
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Kích thước phân trang
Thay đổi kích thước của phân trang với thuộc font-sizetính:
Thí dụ
.pagination a {
font-size: 22px;
}
Phân trang ở giữa
Để căn giữa phân trang, hãy bọc một phần tử vùng chứa (như <div>) xung quanh nó bằng text-align:center
Thí dụ
.center {
text-align: center;
}
Các ví dụ khác
Thí dụ
Breadcrumbs
Một biến thể khác của phân trang được gọi là "breadcrumbs":
Thí 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";
}