Pagenation full width
Pagenation full width dành cho thiết kế full, hoặc layout cân bằng.
Đánh số trang (Pagination) – linh hoạt theo nội dung
Linh hoạt theo nội dung dành cho những ai muốn thể hiện việc đánh số trang "full" theo chiều rộng của nội dung.
Bằng cách sử dụng position cho tag <p> ta điều khiển cho 2 thành phần này sang phải và trái.
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 {
position: relative;
text-align: center;
width: 100%; /* cần cho IE6 */
}
.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;
}
.pagination p {
position: absolute;
top: 0;
}
.pagination p.previous {
left: 0;
}
.pagination p.next {
right: 0;
}
</style>
</head>
<body>
<div class="pagination">
<p class="previous"><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 class="next"><a href="http://hocwebchuan.com/">Next >></a></p>
</div>
</body>
</html>
Hiển thị trình duyệt:
Đánh số trang linh hoạt với border trái và phải.
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 {
position: relative;
text-align: center;
width: 100%; /* cần cho IE6 */
}
.pagination ol,
.pagination ol li {
display:inline;
}
.pagination ol {
border-left: 1px solid #333;
margin: 0 10px;
padding-left: 4px;
}
* html .pagination ol { /* hack IE6 */
margin: 0 14px;
padding-left: 0;
}
*:first-child + html .pagination ol { /* hack IE7 */
margin: 0 14px;
padding-left: 0;
}
.pagination ol li {
border-right: 1px solid #333;
padding: 0 7px 0 3px;
}
* html .pagination ol li { /* hack IE6 */
padding: 0 3px 0 7px;
}
*:first-child + html .pagination ol li { /* hack IE7 */
padding: 0 3px 0 7px;
}
.pagination a {
color: #333;
text-decoration: underline;
}
.pagination a:hover {
color: #f00;
text-decoration: none;
}
.pagination ol li span {
color: #f00;
font-weight: bold;
}
.pagination p {
position: absolute;
top: 0;
}
.pagination p.previous {
left: 0;
}
.pagination p.next {
right: 0;
}
</style>
</head>
<body>
<div class="pagination">
<p class="previous"><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 class="next"><a href="http://hocwebchuan.com/">Next >></a></p>
</div>
</body>
</html>