Cách Tạo Pagination Và 20 Ví Dụ Phân Trang Cho Website

  1
  2
  3
  4
  5
  6
  »

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é!

  1
  2
  3
  4
  5
  6
  »

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à tác dụng sau cuối bạn xem ở bên dưới nhé :See the Pen pagination với hình tròn trụ by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .Nguồn

Cách tạo Pagination Với Thẻ li

Phần này chúng ta sẽ đi vào tìm hiểu cách tạo phần trang từ thẻ li nhé!

HTML

   

     
1

     
2

     
3

     
4

     
5

     

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à hiệu quả sau cuối bạn xem ở dưới đây nhé :See the Pen pagination vởi thẻ li by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .Nguồn

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.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.

Cách Tạo Pagination Javascript

Kết quả bạn xem bên dưới nhé !See the Pen Pacman pagination by Mikael Ainalem ( @ ainalem ) on CodePen .Nguồn

Tổng Hợp Các Pagination HTML CSS

Kết quả bạn xem bên dưới nhé !See the Pen Pagination by Vineeth. TR ( @ vineethtrv ) on CodePen .Nguồn

Thiết Kế Pagination CSS3 Javascript

Kết quả bạn xem bên dưới nhé !See the Pen Flexing pagination arrows by Hakim El Hattab ( @ hakimel ) on CodePen .Nguồn

Thiết Kế Pagination CSS

Kết quả bạn xem bên dưới nhé !See the Pen Pagination by Rosa ( @ RRoberts ) on CodePen .Nguồn

Thiết Kế Pagination Với SVG

Kết quả bạn xem bên dưới nhé !See the Pen Infinite Pagination by Mariusz Dabrowski ( @ MarioD ) on CodePen .Nguồn

Cách Tạo Pagination Jquery

Kết quả bạn xem bên dưới nhé !See the Pen Hover and Active Pagination by Doğukan Çavuş ( @ dgknca ) on CodePen .Nguồn

Thiết Kế CSS Pagination

Kết quả bạn xem bên dưới nhé !See the Pen Pagination One by Steven Roberts ( @ matchboxhero ) on CodePen .Nguồn

Thiết Kế Pagination

Kết quả bạn xem bên dưới nhé !See the Pen responsive pagination by Milica ( @ micadev ) on CodePen .Nguồn

Thiết Lập Hiệu Ứng Animation cho Pagination

Kết quả bạn xem bên dưới nhé !See the Pen Spring pagination by Mikael Ainalem ( @ ainalem ) on CodePen .Nguồn

Thiết Kế Pagination HTML5

Kết quả bạn xem bên dưới nhé !See the Pen Pagination with morphing numbers by Mikael Ainalem ( @ ainalem ) on CodePen .Nguồn

Tạo Hiệu Ứng Pagination Với GSAP

Kết quả bạn xem bên dưới nhé !See the Pen Dot Hopper – Pagination by Elliot Geno ( @ pyrografix ) on CodePen .Nguồn

Cách Tạo Jquery Pagination

Kết quả bạn xem bên dưới nhé !See the Pen WebDesignerDepot pagination by Wouter Bles ( @ wouterbles ) on CodePen .Nguồn

Thiết Kế Responsive Pagination

Kết quả bạn xem bên dưới nhé!