Pagenation với border

Trở về

  • 3,001

Trang trí thêm border bao quanh các thành phần pagenation cho phong phú, đây cũng là dạng thường dùng.

Đánh số trang (Pagination) – border xong quanh

Đánh số trang với định dạng border xung quanh, một dạng dễ phân biệt giữa các số, có thể sử dụng với display: inline-block để tạo dạng "full" link cho các số.

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 a,
.pagination ol li span {
    border: 1px solid #333;
    color: #333;
    display: inline-block;
    padding: 1px 8px 2px;
    text-decoration: none;
}
.pagination a:hover {
    color: #f00;
}
.pagination ol li span {
    color: #f00;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="pagination">
<p><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><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

Canh pagination giữa nội dung bằng text-align: center

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 a,
.pagination ol li span {
    border: 1px solid #333;
    color: #333;
    display: inline-block;
    padding: 1px 8px 2px;
    text-decoration: none;
}
.pagination a:hover {
    color: #f00;
}
.pagination ol li span {
    color: #f00;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="pagination">
<p><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><a href="http://hocwebchuan.com/">Next &gt;&gt;</a></p>
</div>
</body>
</html>

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

 

Canh pagination bên phải nội dung bằng 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 a,
.pagination ol li span {
    border: 1px solid #333;
    color: #333;
    display: inline-block;
    padding: 1px 8px 2px;
    text-decoration: none;
}
.pagination a:hover {
    color: #f00;
}
.pagination ol li span {
    color: #f00;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="pagination">
<p><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><a href="http://hocwebchuan.com/">Next &gt;&gt;</a></p>
</div>
</body>
</html>

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

 

Đổi màu cho border khi hover và active

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 a,
.pagination ol li span {
    border: 1px solid #333;
    color: #333;
    display: inline-block;
    padding: 2px 8px;
    text-decoration: none;
}
.pagination a:hover {
    border: 1px solid #f00;
    color: #f00;
}
.pagination ol li span {
    border: 1px solid #f00;
    color: #f00;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="pagination">
<p><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><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

Canh pagination giữa nội dung bằng text-align: center

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 a,
.pagination ol li span {
    border: 1px solid #333;
    color: #333;
    display: inline-block;
    padding: 2px 8px;
    text-decoration: none;
}
.pagination a:hover {
    border: 1px solid #f00;
    color: #f00;
}
.pagination ol li span {
    border: 1px solid #f00;
    color: #f00;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="pagination">
<p><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><a href="http://hocwebchuan.com/">Next &gt;&gt;</a></p>
</div>
</body>
</html>

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

 

Canh pagination bên phải nội dung bằng 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 a,
.pagination ol li span {
    border: 1px solid #333;
    color: #333;
    display: inline-block;
    padding: 2px 8px;
    text-decoration: none;
}
.pagination a:hover {
    border: 1px solid #f00;
    color: #f00;
}
.pagination ol li span {
    border: 1px solid #f00;
    color: #f00;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="pagination">
<p><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><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.