Làm thế nào để bạn thêm phân trang trong HTML?

Question

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
}

body{
  background-color: #7f99fa;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination{
  background-color: #f2f2f2;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 50px;
}

.pagination a{
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  transition: .3s linear;
}

.pagination a:hover{
  color: #fff;
  background-color: #5271e9;
}

.bottom_bar{
  position: absolute;
  width: 100px;
  height: 4px;
  background-color: #000;
  bottom: 0;
  left: -100px;
  transition: .4s;
}

.pagination a:nth-child(1):hover ~ .bottom_bar{
  left: 0;
}

.pagination a:nth-child(2):hover ~ .bottom_bar{
  left: 101px;
}

.pagination a:nth-child(3):hover ~ .bottom_bar{
  left: 201px;
}

.pagination a:nth-child(4):hover ~ .bottom_bar{
  left: 301px;
}

.pagination a:nth-child(5):hover ~ .bottom_bar{
  left: 401px;
}

.pagination a:nth-child(6):hover ~ .bottom_bar{
  left: 501px;
}

.pagination a:nth-child(7):hover ~ .bottom_bar{
  left: 601px;
}

.pagination a:nth-child(8):hover ~ .bottom_bar{
  left: 701px;
}

@media (max-width:600px)
{
  .pagination a:nth-child(4){
    display: none;
  }

  .pagination a:nth-child(5){
    display: none;
  }
}

Khi một website của 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ó tăng tốc độ tải trang cũng như giúp người dùng dễ dàng theo dõi nội dung của bạn trên Web hơn. Bây giờ chúng ta cùng đi tìm hiểu cách thiết kế phân trang bằng HTML, CSS và Javascript cho website

Nội dung chính Show

Làm cách nào để đặt phân trang trong bảng HTML?
Bố cục phân trang là gì?

Cách tạo phân trang cơ bản bằng HTML CSS

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

Lớp active có nhiệm vụ giúp người dùng biết mình đang ở trang nào thông qua màu sắc mà bạn đặt cho nó. Và thông thường màu của lớp này sẽ khác với các số trang khác. Để hiểu rõ hơn, hãy xem đoạn mã CSS sau

CSS

.pagination a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
   transition: background-color .3s;
 }
 .pagination a.active {
   background-color: dodgerblue;
   color: white;
 }
 .pagination a:hover:not(.active) {
   background-color: #ddd;
 }

Và kết quả cuối cùng các bạn xem bên dưới

Cách tạo đường viền phân trang bằng HTML CSS

Như bạn có thể thấy trong ví dụ trên, lớp active của chúng ta có dạng hình chữ nhật. Trong phần này tôi sẽ chỉ cho bạn cách tạo số trang với các vòng kết nối

HTML

CSS

.pagination a {
    color: black;
    float: left;
    padding:  12px 18px;
    text-decoration: none;
  }
  .pagination a.active {
    background-color: dodgerblue;
    color: white;
    /*Thiết kế hình tròn With CSS*/
    border-radius: 50%;
  }
  .pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 50%;
  }

Và kết quả cuối cùng bạn có thể xem bên dưới

Cách tạo phân trang với li

Trong phần này chúng ta sẽ học cách tạo một phần trang từ thẻ li

HTML

CSS

.flex {
   width: 400px;
   height: 80px;
   line-height: 80px;
   background-color: #eeeeee;
   position: absolute;
   top: 15%;
   left: 40%;
   margin: -25px 0 0 -150px;
 }
 .flex ul {
   display: flex;
   padding: 0;
   margin: 0;
   box-shadow: 0 10px 20px 0 #cccccc;
 }
 .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;
 }
 .flex ul li:hover {
   background-color: rgba(255, 255, 255, 0.25);
   color: #65bcc9;
 }
 .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%;
 }
 .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 có thể xem bên dưới

Javascript phân trang

Xem kết quả bên dưới

Phân trang HTML CSS

Xem kết quả bên dưới

Phân trang Javascript CSS3

Xem kết quả bên dưới

CSS phân trang

Xem kết quả bên dưới

Phân trang với SVG

Xem kết quả bên dưới

Jquery phân trang

Xem kết quả bên dưới

Phân trang CSS

Xem kết quả bên dưới

phân trang

Xem kết quả bên dưới

phân trang hoạt hình

Xem kết quả bên dưới

Phân trang HTML5

Xem kết quả bên dưới

Phân trang với GSAP

Xem kết quả bên dưới

Phân trang Jquery

Xem kết quả bên dưới

Phân trang đáp ứng

Xem kết quả bên dưới

Phân trang di chuột

Xem kết quả bên dưới

Phân trang bằng Jquery

Xem kết quả bên dưới

Phân trang với SVG

Xem kết quả bên dưới

Phân trang Jquery CSS3

Xem kết quả bên dưới

Phân trang CSS Javascript

Xem kết quả bên dưới

HTML CSS phân trang đáp ứng

Xem kết quả bên dưới

Responsive Pagination Jquery Cho Website

Xem kết quả bên dưới

Phân trang đáp ứng CSS3 thuần túy

Xem kết quả bên dưới

Nút phân trang

Xem kết quả bên dưới

Phân trang SVG

Xem kết quả bên dưới

Phân trang CSS thuần túy

Xem kết quả bên dưới

Biến đổi số trang

Xem kết quả bên dưới

Bản demo phân trang góc vật liệu

Xem kết quả bên dưới

Giao diện người dùng phân trang

Xem kết quả bên dưới

Phân trang dòng với Hover (PureCSS)

Xem kết quả bên dưới

Phân trang HTML Bootstrap

Xem kết quả bên dưới

Tóm lược

Qua đây hi vọng bài viết sẽ cung cấp cho các bạn những phân trang hữu ích cho việc phát triển website và nếu có thắc mắc gì cứ gửi mail mình sẽ phản hồi trong thời gian sớm nhất. Mong các bạn tiếp tục ủng hộ website để mình viết nhiều bài hay hơn nhé. Chúc một ngày tốt lành

Làm cách nào để đặt phân trang trong bảng HTML?

getPagination('#table-id');

//getPagination('. lớp bảng');

//getPagination('bảng');

/* PHẪU TRANG

- khi thay đổi các hàng tối đa, chọn các tùy chọn làm mờ dần tất cả các hàng gt giá trị tùy chọn mx = 5

- nối thêm danh sách phân trang theo tùy chọn số hàng/số hàng tối đa (20 hàng/5= 4 trang)

Bố cục phân trang là gì?

Phân trang là quá trình tách nội dung của trang web hoặc phần nội dung từ trang web thành các trang rời rạc . Mẫu thiết kế giao diện người dùng này được sử dụng để khách truy cập trang web không bị choáng ngợp bởi hàng loạt dữ liệu trên một trang.

programming html

Làm thế nào để bạn thêm phân trang trong HTML?

CSS

HTML

CSS

HTML

CSS

Làm cách nào để đặt phân trang trong bảng HTML?

Bố cục phân trang là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội