Hướng dẫn pagination html - html phân trang

Khi một trang web bạn có nhiều sản phẩm hay bài viết thì việc phân trang là một nhiệm vụ rất quan trọng. Nó làm tăng tốc độ tải trang cũng như giúp người dùng có thể dễ dàng theo dõi nội dung của bạn trên trang web. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu cách thiết kế pagination bằng HTML, CSS và Javascript cho website nhé!

Cách tạo Pagination Cơ Bản Bằng HTML CSS

Đầu tiên chúng ta sẽ đi vào tìm hiểu cách tạo pagination cơ bản cho trang web bằng HTML và CSS nhé!

HTML

Class active có nhiệm vụ giúp người dùng biết được mình đang ở trang nào thông qua cách chúng ta thiết lập màu cho nó. Và thường thì color của class này sẽ khác so với các số trang còn lại. Để hiểu rõ hơn bạn xem đoạn mã CSS sau nhé!

CSS

/* thiết lập style cho thẻ a */
 .pagination a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
   transition: background-color .3s;
 }
/* thiết lập style cho class active */
 .pagination a.active {
   background-color: dodgerblue;
   color: white;
 }
/* thêm màu nền khi người dùng hover vào class không active */
 .pagination a:hover:not[.active] {
   background-color: #ddd;
 }

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen Pagination cơ bản by haycuoilennao19 [@haycuoilennao19] on CodePen.

Nguồn

Cách tạo Pagination Border Bằng HTML CSS

Như bạn thấy ở ví dụ trên thì class active của chúng ta có hình chữ nhật. Trong phần này mình sẽ giới thiệu đến bạn cách tạo pagination với hình tròn nhé!

HTML

CSS

/* thiết lập style cho thẻ a */
  .pagination a {
    color: black;
    float: left;
    padding:  12px 18px;
    text-decoration: none;
  }
 /* thiết lập style cho class active */
  .pagination a.active {
    background-color: dodgerblue;
    color: white;
    /*Thiết kế hình tròn với CSS*/
    border-radius: 50%;
  }
 /* thêm màu nền khi người dùng hover vào class không active */
  .pagination a:hover:not[.active] {
    background-color: #ddd;
    /*Thiết kế hình tròn với CSS*/
    border-radius: 50%;
  }

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen Pagination cơ bản by haycuoilennao19 [@haycuoilennao19] on CodePen.

Nguồn

Cách tạo Pagination Border Bằng HTML CSS

Như bạn thấy ở ví dụ trên thì class active của chúng ta có hình chữ nhật. Trong phần này mình sẽ giới thiệu đến bạn cách tạo pagination với hình tròn nhé!

HTML

CSS

/*thiết lập style cho màu sắc, vị trí, độ cao... cho pagination*/
 .flex {
   width: 400px;
   height: 80px;
   line-height: 80px;
   background-color: #eeeeee;
   position: absolute;
   top: 15%;
   left: 40%;
   margin: -25px 0 0 -150px;
 }
 /*Thiết lập style cho thẻ ul*/
 .flex ul {
   display: flex;
   padding: 0;
   margin: 0;
   box-shadow: 0 10px 20px 0 #cccccc;
 }
 /*thiết lập style cho thẻ li*/
 .flex ul li {
   flex: 1;
   list-style: none;
   text-align: center;
   position: relative;
   font-size: 20px;
   font-weight: bold;
   transition: 0.3s ease;
   cursor: pointer;
   user-select: none;
 }
 /*tạo hiệu ứng hover cho thẻ li */
 .flex ul li:hover {
   background-color: rgba[255, 255, 255, 0.25];
   color: #65bcc9;
 }
 /*chuyển đổi vị trí của class bar khi người dùng hover vào các con số*/
 .flex ul li:hover:nth-of-type[2] ~ .bar {
   left: 20%;
 }
 .flex ul li:hover:nth-of-type[3] ~ .bar {
   left: 40%;
 }
 .flex ul li:hover:nth-of-type[4] ~ .bar {
   left: 60%;
 }
 .flex ul li:hover:nth-of-type[5] ~ .bar {
   left: 80%;
 }
 /*thiết lập style cho class bar*/
 .flex ul .bar {
   width: 20%;
   background-color: dodgerblue;
   height: 5px;
   position: absolute;
   left: 0;
   bottom: 0;
   transition: 0.3s ease;
 }

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen Pagination cơ bản by haycuoilennao19 [@haycuoilennao19] on CodePen.

Nguồn

Cách tạo Pagination Border Bằng HTML CSS0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.