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/">&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:

 

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *