css分页样式代码
导读：收集整理的这篇文章主要介绍了css分页样式代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 第一个是从360而来的效果如图所示:普通的a标记的分页，兼容性好。绿色样式演示代码:.p...
收集整理的这篇文章主要介绍了css分页样式代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 第一个是从360而来的效果如图所示:普通的a标记的分页，兼容性好。绿色样式演示代码:
.pages{ width:100.5%; text-align:right; padding:10px 0; clear:both; } .pages span,.pages a,.pages b{ font-Size:12px; font-family:Arial, Helvetica, sans-serif; margin:0 2px; } .pages span font{ color:#f00; font-size:12px; } .pages a,.pages b{ border:1px solid #5FA623; background:#fff; padding:2px 6px; text-decoration:none} .pages span { padding-right:10px } .pages b,.pages a:hover{ background:#7AB63F; color:#fff; } 共1678条评论12345...168下一页& gt; & gt;
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第二种：深蓝色效果，当然颜色大家可以自行修改。
效果如图:
演示代码:
css 分页样式2* { margin:0; padding:0; } body { font-size:12px; font-family:Verdana; } a { color:#333; text-decoration:none; } ul { list-style:none; } #pagelist { width:600px; margin:30px auto; padding:6px 0px; height:20px; } #pagelist ul li { float:left; border:1px solid #5d9cDF; height:20px; line-height:20px; margin:0px 2px; } #pagelist ul li a, .pageinfo { display:block; padding:0px 6px; background:#e6f2fe; } .pageinfo { color:#555; } .current { background:#a9d2ff; display:block; padding:0px 6px; font-weight:bold; }
- 首页
- 上页
- 1
- 2
- 3
- 4
- 5
- 下页
- 尾页
- 第3页
- 共8页
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第三种代码:
css代码:
复制代码 代码如下:
#page{ margin:5px; padding-bottom:20px; padding-top:20px; }
#page a{ border:1px solid #003399; padding:5px; margin:2px; background-color:#FFFFFF; color:#003300; height:18px; }
#page a:hover{ font-size:14px; color:#FFFFFF; background-color:#003399; padding:5px; margin:2px; height:20px; }
效果图片.
这是mouse没的指上时.
这是指上去时,
好了现在我们来看看怎么使用这代码.
htML代码:
复制代码 代码如下:
div id=page>
记录条 共4页 每页20条 a href=?id=74&
page=1>
img src="/boke/blog/Pic/First.gif" border=0 alt='第一页'>
/a>
a href=?id=74&
page=1 class='sf'>
1/a>
a href=?id=74&
page=2 class='sf'>
2/a>
a href=?id=74&
page=3 class='sf'>
3/a>
a href=?id=74&
page=4 class='sf'>
4/a>
a href=?id=74&
page=2>
img src="/boke/bLOG/Pic/next.gif" border=0 alt='下一页' >
/a>
a href=?id=74&
page=4>
img src="/boke/blog/Pic/Last.gif" alt='最后一页' border=0 >
/a>
/div>
- jQuery中的CSS样式属性css()及width()系列大全
- CSS自定义滚动条样式案例详解
- 带你了解CSS基础知识,样式
- 详解Vue中CSS样式穿透问题
- BootStrap CSS全局样式和表格样式源码解析
- CSS的三大样式你了解多少
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css分页样式代码
本文地址： https://pptw.com/jishu/606481.html