html

<div  class="pagebox"><div class="paging"><a  class="previous" title="上一页" ><span class="Bg"><b>&nbsp;</b></span></a><a class="cur"><span class="Bg"><b>1</b></span></a><a href="news.php?id=&page=2"><span class="Bg"><b>2</b></span></a><a href="news.php?id=&page=2" class="nextpage" title="下一页" ><span class="Bg"><b>&nbsp;</b></span></a></div></div> 

css

 
/*分页样式 */
.pagebox{padding:30px 20px 20px 20px;}
.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;}
.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: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 -72px;}
.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 -72px;}
.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;
}

样式图片

效果展示

最后更新于 2017-09-29 14:01:55 并被添加「css」标签，已有 722 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处