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

更新时间：2011年03月13日 12:25:28 作者：

纯css实现的ol漂亮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"> <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需再刷新一下页面才能执行]

分页样式

CSS定义Hover实现文字变大的超级链接
文字变大的超级链接，顾名思义当移动鼠标到任意一个连接上则可放大显示该超连接。很不错的效果使用CSS定义Hover时的字体大小和颜色也可实现这一效果。这是个很早时候的效果了，希望对您学习网页特效编写有帮助
2012-12-12
用js实现的打字效果的带链接的新闻标题
用js实现的打字效果的带链接的新闻标题...
2007-03-03
让网页上的超链接失效，不能点击的js代码
让网页上的超链接失效，不能点击的js代码...
2007-03-03
有序列表ol漂亮css分页样式代码(纯css)
纯css实现的ol漂亮css分页样式代码，制作分页的朋友可以参考下。比较漂亮。
2011-03-03
友情链接横向文字上下间隙循环滚动JS效果
友情链接文字上下间隙循环滚动JS效果，仿qq频道上下单行多条滚动js效果代码，可用于新闻，友情链接上下间隙滚动,非常实用，需要了解的朋友可以参考下
2012-12-12
超链接的陷下效果
超链接的陷下效果...
2007-03-03
兼容多浏览器的字幕特效Marquee的通用js类
主要是因为IE里的Marquee不具有通用性,在其它浏览器下无法正常工作,故用JavaScript把它的功能重写了一下,支持多浏览器! 其功能已封装到Marquee.js中,支持无间断滚动(默认),如果字幕区域里的内容长/宽度小于字幕区域设置的长/宽度 ,则默认不滚动! 支持动态更新滚动速度和方向!
2008-07-07
点击文字链接弹出确认框基于js Confirm实现
点击文字链接弹出确认框，点击确认可以访问预设连接，点击取消可以关闭确认框。一两句JS代码就可实现此功能，之前也在此发过类似的特效，主要是利用了JavaScript的Confirm函数来实现确认框，感兴趣的朋友可以了解下
2012-12-12
用CSS打造多彩文字链接
用CSS打造多彩文字链接...
2007-03-03
一个链接按两种方式打开两个网址的方法
在网页上，一个链接按以新开窗口、自身打开两种方式分别转向两个网址，以前或许你没有见过吧，其实这是与JavaScript配合才能完成的功能，虽然不经常用，不过有点意思，艺多不压身，呵呵。
2009-10-10

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具