欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页 > IT编程

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

程序员文章站 2023-12-09 23:39:28

有序列表ol漂亮分页样式 a { color:#000;} .pagination{ overflow:hidden; margin:0;...

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>有序列表ol漂亮分页样式</title>
<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> 
<li> 
<li class="currentstate" title="当前页"> 
</li> 
<li> 
<li> 
<li> 
<li> 
<li> 
<li> 
</ol>
</li> 
<li class="nextpage"> 
</li> 
<li class="lastpage"> 
 
</li>
</ul>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

上一篇：索尼PS4/PS Vita游戏机正式入华 PS4售2899元

下一篇：

推荐阅读