Liên kết phân trang chỉ đơn giản là cho phép người dùng lướt qua nội dung của bạn. Một giải pháp thay thế hợp lệ là cuộn vô hạn, mặc dù nó có điểm mạnh và điểm yếu cần lưu ý
Tôi biết các khung như Bootstrap cho phép bạn tạo phân trang trong vài giây, tuy nhiên 1) không phải ai cũng sử dụng các khung hoặc có thể sử dụng chúng cho mọi dự án và 2) Tôi đã tạo một đoạn mã dễ tùy chỉnh hơn một chút, với các lớp CSS tiết kiệm thời gian cài sẵn
👋 Đã có phiên bản mới của thành phần này. Tải xuống ngay →
Tạo cấu trúc
Cấu trúc HTML giống nhau cho mỗi ví dụ phân trang. một phần tử <nav> bao bọc một danh sách không có thứ tự (.cd-pagination). Các mục danh sách chứa các liên kết trước đó và tiếp theo có lớp .button. Các lớp sẵn sàng sử dụng tùy chọn phải được áp dụng cho phần tử <ul> (lớp .no-space trong ví dụ bên dưới)
<nav role="navigation"> <ul class="cd-pagination no-space"> <li class="button"><a href="#0">Prev</a></li> <li><a href="#0">1</a></li> <li><a href="#0">2</a></li> <li><a class="current" href="#0">3</a></li> <li><a href="#0">4</a></li> <li><span>...</span></li> <li><a href="#0">20</a></li> <li class="button"><a href="#0">Next</a></li> </ul> </nav> <!-- cd-pagination-wrapper -->thêm phong cách
Cách dễ nhất để sửa đổi "chủ đề" là thông qua Sass, nơi bạn có thể tận dụng các biến. Đây là partials > _variables. tập tin scss
// colors $color-1: #2E4057; // Pickled Bluewood $color-2: #64a281; // Aqua Forest $color-3: #ffffff; // White // fonts $primary-font: 'PT Sans', sans-serif; // border-radius $border-radius: .25em;Bằng cách thay đổi các biến màu, bạn có thể tạo các biến thể chủ đề vô hạn. Nếu Sass không phải là tách trà của bạn, hãy nhảy vào phong cách. css và cập nhật màu từ đó
Đoạn mã đi kèm với một tập hợp các lớp (tùy chọn) thay đổi kiểu phân trang. Tất cả các lớp này được áp dụng cho phần tử <ul>. Lớp .cd-pagination là lớp cung cấp kiểu cơ bản, do đó không nên xóa lớp này
Cách dễ nhất để kiểm tra xem các lớp này là gì và làm gì, là kiểm tra tệp nguồn và bản demo đi kèm với nó. Đây là một ví dụ từ phong cách. tệp css (lớp // colors $color-1: #2E4057; // Pickled Bluewood $color-2: #64a281; // Aqua Forest $color-3: #ffffff; // White // fonts $primary-font: 'PT Sans', sans-serif; // border-radius $border-radius: .25em;1)
Phân trang là đánh số thứ tự của các trang, thường nằm ở trên cùng hoặc dưới cùng của trang web. Phân trang giúp các bot của công cụ tìm kiếm lập chỉ mục các bài báo và xếp hạng chúng
Trong đoạn mã này, chúng tôi sẽ trình bày cách tạo Phân trang bằng HTML và CSS. Ngoài ra, chúng tôi sẽ cung cấp cho bạn các ví dụ sáng tạo. Hãy xem cách tạo phân trang tiêu chuẩn và sau đó áp dụng các kiểu khác nhau
- Tạo một
thẻ có tên lớp "pag"
- Tạo thẻ để thêm số trang. Đặt một trong các thẻ tên lớp "đang hoạt động"
« 1 2 3 4 5 6 7 8 »
- Đặt màu cho các số và sử dụng thuộc tính float để xác định các phần tử sẽ được đặt ở phía nào của vùng chứa
- Tạo không gian đệm. Ở đây, giá trị đầu tiên đặt cạnh trên và dưới và giá trị thứ hai đặt cạnh phải và trái. Ngoài ra, đặt thuộc tính text-decoration thành "none"
- Tạo kiểu cho lớp "đang hoạt động" bằng cách đặt màu nền cho nó và chỉ định màu của số
- Chỉ định màu nền cho tất cả các thẻ ngoại trừ lớp "hoạt động" bằng cách sử dụng. di chuột và. not() lớp giả
.pag a { color: #000000; float: left; padding: 12px 18px; text-decoration: none; } .pag a.active { background-color: #8ebf42; color: #ffffff; } .pag a:hover:not(.active) { background-color: #cccccc; }
Đây là ví dụ đầy đủ về phân trang tiêu chuẩn với CSS
Ví dụ tạo phân trang chuẩn
Title of the document
Pagination
« 1 2 3 4 5 6 7 8 »
Ví dụ về tạo phân trang tròn và có thể di chuột
Title of the document
Pagination
« 1 2 3 4 5 6 7 8 »
Ví dụ về tạo phân trang có thể di chuột và hoạt động
Title of the document
- «
- ...
- 1
- 2
- 3
- 4
- 5
- 6
- ...
- »
Một ví dụ khác về phân trang đẹp mắt được tạo bằng
________số 8_______
Một ví dụ phân trang chú giải công cụ hay khác. Phân trang chú giải công cụ là một thiết kế đơn giản với các dấu chấm
Title of the document