Pagenation với border 2 bên
Pagenation border 2 bên, mỗi bên của các trang đều có border, nhìn tách biệt các trang.
Đánh số trang (Pagination) – border 2 bên
Sử dụng border-left và border-right để tạo thêm định dạng c.
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 {
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;
}
</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>
Hiển thị trình duyệt:
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 p,
.pagination ol,
.pagination ol li {
display:inline;
}
.pagination {
text-align: center;
}
.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;
}
</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>
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 p,
.pagination ol,
.pagination ol li {
display:inline;
}
.pagination {
text-align: right;
}
.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;
}
</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>