Phân trang CSS là gì?

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;

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

  
    Title of the document
    
  
  
    

      
      
      
      
      
    
  

Làm thế nào chúng ta có thể sử dụng phân trang trong CSS?

Các loại phân trang là gì?

Phân trang HTML là gì?

Làm thế nào để sử dụng phân trang?