炫酷分页样式
html
<div class="pagebox"><div class="paging"><a class="previous" title="上一页" ><span class="Bg"><b> </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> </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」标签,已有 731 位童鞋阅读过。
本站使用「署名 4.0 国际」创作共享协议,可自由转载、引用,但需署名作者且注明文章出处
此处评论已关闭