特效介绍
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> </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> </b></span></a> </div>