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

时间:2020-05-12 人气:0

<!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"> 
<a href="javascript:;" title="首页">首页</a></li> 
<li class="previousPage currentState"> 
<a href="javascript:;" title="前一页">前一页</a></li> 
<li> 
<ol> 
<li><a title="转到第1页" href="javascript:;">1</a></li> 
<li><a title="转到第2页" href="javascript:;">2</a></li> 
<li class="currentState" title="当前页"> 
<a href="javascript:;">3</a></li> 
<li><a title="转到第4页" href="javascript:;">4</a></li> 
<li><a title="转到第5页" href="javascript:;">5</a></li> 
<li><a title="转到第6页" href="javascript:;">6</a></li> 
<li><a title="转到第7页" href="javascript:;">7</a></li> 
<li><a title="转到第8页" href="javascript:;">8</a></li> 
<li><a title="转到第9页" href="javascript:;">9</a></li> 
</ol> 
</li> 
<li class="nextPage"> 
<a href="javascript:;" title="后一页">后一页</a></li> 
<li class="lastPage"> 
<a href="javascript:;" title="尾页">尾页</a></i> 
</ul>

</body> 
</html>

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

加载全部内容