炫酷的css3分页代码

仿素材网站炫酷的CSS3分页代码
1、在head引入css代码，或者将下面的代码单独放在一个css文件，注意背景图片的路径：

<style>
.paging a,.paging span.Bg,.paging a:hover,.paging a.cur,.paging a:hover span.Bg,.paging a.cur
span.Bg{background:url(images/pagebg.png) no-repeat}
.paging{text-align:center;font-size:13px;margin:20px
0 10px 0}
.paging a{padding-bottom:4px;display:inline-block;background-position:0 -134px;padding-bottom:11px}
.paging a:hover{text-decoration:none}
.paging b{font-weight:100;opacity:0;*visibility:hidden}
.paging span.Bg{width:58px; height:17px; line-height:17px; padding-left:5px; text-align:left; margin-right:1px; display:inline-block; background-position:0px 11px;cursor:pointer;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease}
.paging a:link,.paging a:visited{color:#266EB0}
.paging a:hover,.paging a.cur{color:#fff;background-position:0px -93px}
.paging a.cur{cursor:default}
.paging a:hover span.Bg,.paging a.cur span.Bg{background-position:0px -63px}
.paging a:hover span.Bg b,.paging a.cur span.Bg b{opacity:1;*visibility:visible}
.paging a.previous,.paging a.previous span.Bg,.paging a.previous b,.paging a.previous:hover,.paging a.previous:hover span.Bg,.paging a.previous:hover b,.paging a.nextpage,.paging a.nextpage span.Bg,.paging a.nextpage b,.paging a.nextpage:hover,.paging a.nextpage:hover span.Bg,.paging a.nextpage:hover b{background:url(images/prev-next-bg.png) no-repeat}
.paging a.previous{background-position:0px -77px}
.paging a.previous span.Bg{width:61px;padding-left:0px;background-position:0px -121px}
.paging a.previous b{background-position:0px 17px}
.paging a.previous:hover{background-position:0px -25px}
.paging a.previous:hover span.Bg{background-position:0px -108px}
.paging a.previous:hover b{background-position:0px 4px;opacity:1;*visibility:visible}
.paging a.nextpage{background-position:-61px -77px}
.paging a.nextpage span.Bg{width:61px;padding-left:0px;background-position:-61px -121px}
.paging a.nextpage b{background-position:-61px 17px}
.paging a.nextpage:hover{background-position:-61px -25px}
.paging a.nextpage:hover span.Bg{background-position:-61px -108px}
.paging a.nextpage:hover b{background-position:-61px 4px;opacity:1;*visibility:visible}
.paging a.previous b,.paging a.nextpage b{width:61px; display:inline-block; height:17px; opacity:1; *visibility:visible; -moz-transition:all 0.6s ease; -webkit-transition:all 0.6s ease; -o-transition:all 0.6s ease}
.fixed-page{display:block;position:fixed;top:50%;margin-top:-30px;height:120px;width:36px;overflow:hidden;background:url(images/pin_view_arrows.png) no-repeat;opacity:0.3;filter:alpha(opacity=30)}
</style>

2、在需要分页的地方加入下面的代码：

<div class="paging">
	<a href="#"><span class="Bg"><b>&nbsp;&nbsp;</b></span></a>
	<a href="javascript:void(0)" class="cur"><span class="Bg"><b>1</b></span></a>
	<a href="#"><span class="Bg"><b>2</b></span></a>
	<a href="#"><span class="Bg"><b>3</b></span></a>
	<a href="#"><span class="Bg"><b>4</b></span></a>
	<a href="#"><span class="Bg"><b>5</b></span></a>
	...
	<a href="#"><span class="Bg"><b>16</b></span></a>
	<a href="#"><span class="Bg"><b>17</b></span></a>
	<a href="#" class="nextpage" title="下一页"><span class="Bg"><b>&nbsp;&nbsp;</b></span></a>
</div>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！