<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS实现的一个漂亮分页按钮样式</title>
<style type="text/css">
.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>
</head>
<body>
<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>
分享到:
相关推荐
24种非常漂亮的分页css样式,非常值得研究,各种分页效果均有,而且非常的好看,具有一定的技术含量。
这是两款漂亮的bootstrap分页样式。他们在元素bootstrap3分页样式的基础上,通过简单的CSS3代码来对它进行美化,生成漂亮的分页样式。
汇集了多种分页样式例子,里边有多种样式,提供给大家学习学习。
html结合css实现的两种分页的代码,非常好用,项目中一直在使用
很漂亮的一些分页样式,带css和源码,可直接修改使用
20种css分页样式,还是很漂亮的,很喜欢
6款简洁漂亮的纯CSS3制作的分页样式代码,简单实用的蓝色风格CSS3分页效果。
有好看的分页样式24种,通过css来修饰分页样式,可以做成通用的分页标签
精选的几种漂亮分页样式。 其中有一款模仿百度的熊爪足迹。
2.page.css 这个是24款分页的样式 在模版中使用, 引入 page.css !-PUBLIC-!/Css/page.css" / > <div class="green-black"><{$page}> 如果: 要变更分页的样式, 打开 page.css ,参照修改相对应的 <div class ="xxx">...
纯css实现的ol漂亮css分页样式代码,制作分页的朋友可以参考下。比较漂亮。
在做pj皮肤的时候到网上搜了个分页效果,因为颜色不搭就没用,但是个人认为挺漂亮。代码也够简洁。
经典漂亮的CSS分页样式,直接COPY就可以用了
缩包内有近30种常用的CSS分页效果特效代码,请注意这个不是分页程序,是经典的分页样式,每一个看上去都很精致漂亮,关键是颜色搭配效果,可以下载保存一份,将来也许会用到!
非常精美的一款php分页类,可以直接应用到分页系统上,是一款mysql数据库分页必备的一个工具,只需要将类文件和分页CSS样式嵌入即可实现精美分页。可以根据自己的需要更改CSS样式文件以实现分页颜色的控制,利用php...
几十种分页demo,功能一应俱全,jquery+div+css
PHP简单漂亮的分页类 连接数据库,php代码,样式CSS,HTML等代码都有,只要修改下数据名称,表名就可以测试
一款非常具有创意的CSS3鼠标悬停分页按钮动画特效,相当漂亮的网页分页样式代码。
非常精美的一款php分页类,可以直接应用到分页系统上,是一款mysql数据库分页必备的一个工具,只需要将类文件和分页CSS样式嵌入即可实现精美分页。可以根据自己的需要更改CSS样式文件以实现分页颜色的控制,利用php...