@import url['//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
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
«
1
2
3
4
5
6
»
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 CSSNhư 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
«
1
2
3
4
5
6
»
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ớili
Trong phần này chúng ta sẽ học cách tạo một phần trang từ thẻ li
HTML
- 1
- 2
- 3
- 4
- 5
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 trangJavascript phân trang
Xem kết quả bên dưới
Phân trang HTML CSSPhân trang HTML CSS
Xem kết quả bên dưới
Phân trang Javascript CSS3Phân trang Javascript CSS3
Xem kết quả bên dưới
CSS phân trangCSS phân trang
Xem kết quả bên dưới
Phân trang với SVGPhân trang với SVG
Xem kết quả bên dưới
Jquery phân trangXem kết quả bên dưới
Phân trang CSSPhân trang CSS
Xem kết quả bên dưới
phân trangphân trang
Xem kết quả bên dưới
phân trang hoạt hìnhphân trang hoạt hình
Xem kết quả bên dưới
Phân trang HTML5Phân trang HTML5
Xem kết quả bên dưới
Phân trang với GSAPPhân trang với GSAP
Xem kết quả bên dưới
Phân trang JqueryPhân trang Jquery
Xem kết quả bên dưới
Phân trang đáp ứngPhân trang đáp ứng
Xem kết quả bên dưới
Phân trang di chuộtPhân trang di chuột
Xem kết quả bên dưới
Phân trang bằng JqueryPhân trang bằng Jquery
Xem kết quả bên dưới
Phân trang với SVGPhân trang với SVG
Xem kết quả bên dưới
Phân trang Jquery CSS3Phân trang Jquery CSS3
Xem kết quả bên dưới
Phân trang CSS JavascriptPhân trang CSS Javascript
Xem kết quả bên dưới
HTML CSS phân trang đáp ứngHTML CSS phân trang đáp ứng
Xem kết quả bên dưới
Responsive Pagination Jquery Cho WebsiteResponsive Pagination Jquery Cho Website
Xem kết quả bên dưới
Phân trang đáp ứng CSS3 thuần túyPhân trang đáp ứng CSS3 thuần túy
Xem kết quả bên dưới
Nút phân trangNút phân trang
Xem kết quả bên dưới
Phân trang SVGPhân trang SVG
Xem kết quả bên dưới
Phân trang CSS thuần túyPhân trang CSS thuần túy
Xem kết quả bên dưới
Biến đổi số trangBiến đổi số trang
Xem kết quả bên dưới
Bản demo phân trang góc vật liệuBả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 trangGiao 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]Phân trang dòng với Hover [PureCSS]
Xem kết quả bên dưới
Phân trang HTML BootstrapPhân trang HTML Bootstrap
Xem kết quả bên dưới
Tóm lượcQua đâ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