Hướng dẫn phân trang bằng HTML và CSS

Phân trang là thủ thuật được sử dụng bởi rất nhiều trang web và là tính năng cũng rất quan trọng. Đặc biệt với những trang web có nhiều nội dung cần hiển thị thì phân trang là phần không … Hôm nay Zonotek và các bạn cùng nhau tìm hiểu về phân trang bằng HTML và CSS nhé !
Dưới đây là một số phong cách thiết kế phân trang mà theo mình nghĩ là đẹp và chuyên nghiệp. Các bạn có thể tham khảo và áp dụng vào các dự án thiết kế web sau này.
1.Pagination Flickr
Hình ảnh mà bạn muốn thiết kế một phong cách phân trang Flickr trông như thế này.

Mã HTLM

Code:

<ul id="pagination-flickr">
   <li class="previous-off">«Previous</li>
   <li class="active">1</li>
   <li><a href="?page=2">2</a></li>
   <li><a href="?page=3">3</a></li>
   <li><a href="?page=4">4</a></li>
   <li><a href="?page=5">5</a></li>
   <li><a href="?page=6">6</a></li>
   <li><a href="?page=7">7</a></li>
   <li class="next"><a href="?page=2">Next »</a></li>
</ul>

Mã CSS

Code:

ul{border:0; margin:0; padding:0;}
 
#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
 
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
 
#pagination-flickr .previous-off,
#pagination-flickr .next-off{
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
 
#pagination-flickr .next a,
#pagination-flickr .previous a{
font-weight:bold;
border:solid 1px #FFFFFF;
}
 
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
 
#pagination-flickr a:link,
#pagination-flickr a:visited{
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
 
#pagination-flickr a:hover{
border:solid 1px #666666;
}

2.Pagination Digg
Còn bây giờ bạn muốn thiết kế một phong cách phân trang Digg thì nó sẽ trông như hình phía dưới.

Mã HTML

Code:

<ul id="pagination-digg">
   <li class="previous-off">«Previous</li>
   <li class="active">1</li>
   <li><a href="?page=2">2</a></li>
   <li><a href="?page=3">3</a></li>
   <li><a href="?page=4">4</a></li>
   <li><a href="?page=5">5</a></li>
   <li><a href="?page=6">6</a></li>
   <li><a href="?page=7">7</a></li>
   <li class="next"><a href="?page=2">Next »</a></li>
</ul>

Mã CSS

Code:

ul{border:0; margin:0; padding:0;}
 
#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
 
#pagination-digg a{
border:solid 1px #9aafe5
margin-right:2px;
}
 
#pagination-digg .previous-off,
#pagination-digg .next-off{
border:solid 1px #DEDEDE
color:#888888
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
 
#pagination-digg .next a,
#pagination-digg .previous a{
font-weight:bold;
}
 
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
 
#pagination-digg a:link,
#pagination-digg a:visited{
color:#0e509e
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
 
#pagination-digg a:hover{
border:solid 1px #0e509e
}

3.Pagination Clean
Nếu bạn muốn tối thiểu, thiết kế giống ví dụ này cho thấy làm thế nào để thiết kế một phong cách phân trang rất sạch sẽ trông như thế này.

Mã HTML

Code:

<ul id="pagination-clean">
   <li class="previous-off">«Previous</li>
   <li class="active">1</li>
   <li><a href="?page=2">2</a></li>
   <li><a href="?page=3">3</a></li>
   <li><a href="?page=4">4</a></li>
   <li><a href="?page=5">5</a></li>
   <li><a href="?page=6">6</a></li>
   <li><a href="?page=7">7</a></li>
   <li class="next"><a href="?page=2">Next »</a></li>
</ul>

Mã CSS

Code:

ul{border:0; margin:0; padding:0;}
 
#pagination-clean li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
 
#pagination-clean li, #pagination-clean a{
border:solid 1px #DEDEDE
margin-right:2px;
}
 
#pagination-clean .previous-off,
#pagination-clean .next-off{
color:#888888
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
 
#pagination-clean .next a,
#pagination-clean .previous a{
font-weight:bold;
border:solid 1px #FFFFFF;
}
 
#pagination-clean .active{
color:#00000
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
 
#pagination-clean a:link,
#pagination-clean a:visited{
color:#0033CC
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
 
#pagination-clean a:hover{
text-decoration:none;
}

Chúc các bạn thành công nhé !
Nguồn từ trang : zonotek.vn