Pagenation cơ bản
Pagenation (phân trang) là một dạng mà rất nhiều trang web sử dụng, dùng liên kết nhanh đến từng trang trong sản phẩm hay tin tức.
Đánh số trang (Pagination)
Đánh số trang được sử dụng trong phân trang, thường dùng danh sách có thứ tự <ol> để thể hiện, chúng ta cũng có thể sử dụng danh sách <ul> tuy nhiên trình duyệt sẽ bỏ qua việc đánh thứ tự của liên kết.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.pagination p,
.pagination ol,
.pagination ol li {
display:inline;
}
.pagination ol {
margin: 0 10px;
}
* html .pagination ol { /* hack IE6 */
margin: 0 10px 0 14px;
}
*:first-child + html .pagination ol { /* hack IE7 */
margin: 0 10px 0 14px;
}
.pagination ol li {
margin: 0 3px;
}
.pagination a {
color: #333;
text-decoration: underline;
}
.pagination a:hover {
color: #f00;
text-decoration: none;
}
</style>
</head>
<body>
<div class="pagination">
<p><a href="http://hocwebchuan.com/"><< Previous</a></p>
<ol>
<li><a href="http://hocwebchuan.com/">1</a></li>
<li><a href="http://hocwebchuan.com/">2</a></li>
<li><a href="http://hocwebchuan.com/">3</a></li>
<li><a href="http://hocwebchuan.com/">4</a></li>
<li><a href="http://hocwebchuan.com/">5</a></li>
</ol>
<p><a href="http://hocwebchuan.com/">Next >></a></p>
</div>
</body>
</html>
Hiển thị trình duyệt:
Các dạng pagenation như trên ta nên sử dụng display: inline thay thế cho float để dễ dàng điều khiển những vị trí khác nhau.
Thử sử dụng kết hợp với text-align: center ta sẽ thấy ngoài việc điều khiển vị trí dễ dàng hơn, pagenation cũng có thể thêm bớt nội dung tùy ý nhưng vẫn giữ vị trí center của nó.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.pagination {
text-align: center;
}
.pagination p,
.pagination ol,
.pagination ol li {
display:inline;
}
.pagination ol {
margin: 0 10px;
}
* html .pagination ol { /* hack IE6 */
margin: 0 10px 0 14px;
}
*:first-child + html .pagination ol { /* hack IE7 */
margin: 0 10px 0 14px;
}
.pagination ol li {
margin: 0 3px;
}
.pagination a {
color: #333;
text-decoration: underline;
}
.pagination a:hover {
color: #f00;
text-decoration: none;
}
</style>
</head>
<body>
<div class="pagination">
<p><a href="http://hocwebchuan.com/"><< Previous</a></p>
<ol>
<li><a href="http://hocwebchuan.com/">1</a></li>
<li><a href="http://hocwebchuan.com/">2</a></li>
<li><a href="http://hocwebchuan.com/">3</a></li>
<li><a href="http://hocwebchuan.com/">4</a></li>
<li><a href="http://hocwebchuan.com/">5</a></li>
<li><a href="http://hocwebchuan.com/">6</a></li>
<li><a href="http://hocwebchuan.com/">7</a></li>
</ol>
<p><a href="http://hocwebchuan.com/">Next >></a></p>
</div>
</body>
</html>
Hiển thị trình duyệt:
Tương tự ta có thể điều khiển pagenation sang phải với thuộc tính text-align: right
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.pagination {
text-align: right;
}
.pagination p,
.pagination ol,
.pagination ol li {
display:inline;
}
.pagination ol {
margin: 0 10px;
}
* html .pagination ol { /* hack IE6 */
margin: 0 10px 0 14px;
}
*:first-child + html .pagination ol { /* hack IE7 */
margin: 0 10px 0 14px;
}
.pagination ol li {
margin: 0 3px;
}
.pagination a {
color: #333;
text-decoration: underline;
}
.pagination a:hover {
color: #f00;
text-decoration: none;
}
</style>
</head>
<body>
<div class="pagination">
<p><a href="http://hocwebchuan.com/"><< Previous</a></p>
<ol>
<li><a href="http://hocwebchuan.com/">1</a></li>
<li><a href="http://hocwebchuan.com/">2</a></li>
<li><a href="http://hocwebchuan.com/">3</a></li>
<li><a href="http://hocwebchuan.com/">4</a></li>
<li><a href="http://hocwebchuan.com/">5</a></li>
<li><a href="http://hocwebchuan.com/">6</a></li>
<li><a href="http://hocwebchuan.com/">7</a></li>
</ol>
<p><a href="http://hocwebchuan.com/">Next >></a></p>
</div>
</body>
</html>
Hiển thị trình duyệt:
Đánh dấu trang đang hoạt động (active)
Đánh dấu trang đang hoạt động sẽ giúp người dùng biết được đang ở trang thứ mấy.
Thường thì trang đang hoạt động thì việc gắn liên kết (link) sẽ không cần thiết, do đó chúng ta có thể sử dụng tag <span> để điều khiển, hoặc chúng ta có thể sử dụng class cho <li> cho dễ điều khiển.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.pagination p,
.pagination ol,
.pagination ol li {
display:inline;
}
.pagination ol {
margin: 0 10px;
}
* html .pagination ol { /* hack IE6 */
margin: 0 10px 0 14px;
}
*:first-child + html .pagination ol { /* hack IE7 */
margin: 0 10px 0 14px;
}
.pagination ol li {
margin: 0 3px;
}
.pagination a {
color: #333;
text-decoration: underline;
}
.pagination li span {
color: #f00;
font-weight: bold;
}
.pagination a:hover {
color: #f00;
text-decoration: none;
}
</style>
</head>
<body>
<div class="pagination">
<p><a href="http://hocwebchuan.com/"><< Previous</a></p>
<ol>
<li><a href="http://hocwebchuan.com/">1</a></li>
<li><span>2</span></li>
<li><a href="http://hocwebchuan.com/">3</a></li>
<li><a href="http://hocwebchuan.com/">4</a></li>
<li><a href="http://hocwebchuan.com/">5</a></li>
</ol>
<p><a href="http://hocwebchuan.com/">Next >></a></p>
</div>
</body>
</html>