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 có nhiều trang, bạn có thể muốn thêm một số kiểu phân trang vào mỗi trang:
Ví dụ
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
} Hãy tự mình thử »Phân trang hoạt động và có thể di chuột
Đánh dấu trang hiện tại bằng một lớp .active và sử dụng bộ chọn :hover để thay đổi màu của từng liên kết trang khi di chuyển chuột qua chúng:
Ví dụ
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;} Hãy tự mình thử »Các nút hoạt động và có thể di chuột được làm tròn
Thêm thuộc tính border-radius nếu bạn muốn nút "hoạt động" và "di chuột" được làm tròn:
Ví dụ
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
} Hãy tự mình thử »Hiệu ứng chuyển tiếp có thể di chuột
Thêm thuộc tính transition vào các liên kết trang để tạo hiệu ứng chuyển tiếp khi di chuột:
Phân trang có viền
Sử dụng thuộc tính border để thêm đường viền vào phân trang:
Đường 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:
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;
}
Hãy tự mình thử »Khoảng cách giữa các liên kết
Mẹo: Thêm thuộc tính margin nếu không muốn nhóm các liên kết trang:
Ví dụ
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Hãy tự mình thử »Kích thước phân trang
Thay đổi kích thước phân trang bằng thuộc tính font-size :
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êm ví dụ
Ví dụ
Hãy tự mình thử »vụn bánh mì
Một biến thể khác của cách phân trang được gọi là "mẩu bánh mì":
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";
}
Hãy tự mình thử »