Pagenation với border radius
Pagenation với border-radius, dạng khác, chỉ điều chỉnh border-radius nhưng hiệu quả thấy rõ.
border-radius cho pagination
Tạo border bo góc tròn cho pagination bằng cách sử dụng border-radius.
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;
}
.pagination ol li {
display:inline;
}
.pagination ol {
margin: 0 10px;
}
.pagination a,
.pagination ol li span {
border: 2px solid #ccc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
color: #333;
display: inline-block;
padding: 1px 8px 2px;
text-decoration: none;
}
.pagination a:hover {
border: 2px solid #f00;
color: #f00;
}
.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>