非常简洁实用的div+css 分页效果, 分页代码, 翻页代码
2012-05-25 00:15 【转】非常简洁实用的div+css 分页效果, 分页代码, 翻页代码 以
前写过很多次div+css 分页代码,每次写每次都碰到一点小问题,并且经常碰到页面要写分
页代码,每次重新写又得费时间。所以今天干脆写好一个,尽量写成简洁实用的,以后可以
直接拿来使用的。省得以后每次都重写,这样重复的劳动,很是浪费时间。我相信很多网页
设计师会和我碰到的情况差不多,很多代码写了一次又一次,没有好好
总结
初级经济法重点总结下载党员个人总结TXt高中句型全总结.doc高中句型全总结.doc理论力学知识点总结pdf
和整理。很多代
码其实把他写好了,以后直接拿来用就可以了。
在此,我把自己写的分页代码放在博客里和广大网页设计师分享:
html代码:
CSS代码:
.NextPage{ padding:0px 20px; height:30px; line-height:30px; text-align:center; } .NextPage span{ font-weight:bold; color:#0033CC; padding:0px 6px;} .NextPage a{ border:1px solid #ccc; padding:1px 5px; height:23px; line-height:23px; vertical-align:middle; text-align:center; margin-right:5px;} .NextPage a:hover{ border:1px solid #0033CC; text-decoration:none; } .page-cur{ display:inline-block; border:1px solid #0033CC; padding:0px 5px; height:21px; line-height:21px; vertical-align:middle; text-align:center; margin-right:5px; background:#E2EEF3;}
a.Prev{ padding:1px 5px; height:23px; line-height:23px; vertical-align:middle; text-align:center; margin-right:5px; margin-left:30px; background:#0E4F7F; color:#fff;}
a.Prev:hover{ color:#FFFF66; background:#0066FF;}
a.Next{ padding:1px 5px; height:23px; line-height:23px; vertical-align:middle; text-align:center; margin-right:5px; background:#0E4F7F; color:#fff;} a.Next:hover{ color:#FFFF66; background:#0066FF;}
本人能力有限,可能有些代码还不太精简,你们用的时候可以再精简精简,希望对大家有所
帮助。
Tags: divcss分页代码翻页代码
有关内容进入www.zzarea.com