Pagenation full width

Trở về

  • 2,632

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/">&lt;&lt; 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 &gt;&gt;</a></p>
</div>
</body>
</html>

Hiển thị trình duyệt:

 

Download file để thực hành

Đá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/">&lt;&lt; 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 &gt;&gt;</a></p>
</div>
</body>
</html>

Hiển thị trình duyệt:

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.