有序列表ol漂亮css分页样式代码(纯css)

192 阅读 0 评论 127 点赞

我是靠谱客的博主超帅万宝路，这篇文章主要介绍有序列表ol漂亮css分页样式代码(纯css)，现在分享给大家，希望可以做个参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>有序列表ol漂亮分页样式</title> 
</head> 
<body> 
<style type="text/css"> 
a { color:#000;} 
.pagination{ 
overflow:hidden; 
margin:0; 
padding:10px 10px 6px 10px; 
border-top:1px solid #f60; 
_zoom:1; 
} 
.pagination *{ 
display:inline; 
float:left; 
margin:0; 
padding:0; 
font-size:12px; 
} 
.pagination i{ 
float:none; 
padding-right:1px; 
} 
.currentPage b{ 
float:none; 
color:#f00; 
} 
.pagination li{ 
list-style:none; 
margin:0 5px; 
} 
.pagination li li{ 
position:relative; 
margin:-2px 0 0; 
font-family: Arial, Helvetica, sans-serif 
} 
.firstPage a,.previousPage a,.nextPage a,.lastPage a{ 
overflow:hidden; 
height:0; 
text-indent:-9999em; 
border-top:8px solid #fff; 
border-bottom:8px solid #fff; 
} 
.pagination li li a{ 
margin:0 1px; 
padding:0 4px; 
border:3px double #fff; 
+border-color:#eee; 
background:#eee; 
color:#06f; 
text-decoration:none; 
} 
.pagination li li a:hover{ 
background:#f60; 
border-color:#fff; 
+border-color:#f60; 
color:#fff; 
} 
li.firstPage{ 
margin-left:40px; 
border-left:3px solid #06f; 
} 
.firstPage a,.previousPage a{ 
border-right:12px solid #06f; 
} 
.firstPage a:hover,.previousPage a:hover{ 
border-right-color: #f60; 
} 
.nextPage a,.lastPage a{ 
border-left:12px solid #06f; 
} 
.nextPage a:hover,.lastPage a:hover{ 
border-left-color:#f60; 
} 
li.lastPage{ 
border-right:3px solid #06f; 
} 
li li.currentState a{ 
position:relative; 
margin:-1px 3px; 
padding:1px 4px; 
border:3px double #fff; 
+border-color:#f60; 
background:#f60; 
color:#fff; 
} 
li.currentState,.currentState a,.currentState a:hover{ 
border-color:#fff #ccc; 
cursor:default; 
} 
</style>

<h3>有序列表ol分页源码/样式</h3> 
<ul class="pagination" title="分页列表"> 
<li class="totalAnnal">总记录数：<i>3</i></li> 
<li class="totalPage">总页数：<i>3</i></li> 
<li class="currentPage">当前页：<b>3</b></li> 
<li class="firstPage currentState"> 
首页</li> 
<li class="previousPage currentState"> 
前一页</li> 
<li> 
<ol> 
<li>1</li> 
<li>2</li> 
<li class="currentState" title="当前页"> 
3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
<li>7</li> 
<li>8</li> 
<li>9</li> 
</ol> 
</li> 
<li class="nextPage"> 
后一页</li> 
<li class="lastPage"> 
尾页</i> 
</ul>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]