<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div+css3阶梯分页样式 - 网页模板</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>
<body>
<div class="headeline"></div>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;font-size:13px;color:#211922;text-shadow:0 1px rgba(255,255,255,0.9);}
/* 分页数字链接样式 */
.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;
}
</style>
<div class="pagebox">
<div class="paging">
<a href="javascript:void(0)" class="previous" title="上一页"><span class="Bg"><b> </b></span></a><a href="#" 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>6</b></span></a><a href="#"><span class="Bg"><b>7</b></span></a><a href="#" class="nextpage" title="下一页"><span class="Bg"><b> </b></span></a>
</div>
</div><!--pagebox end-->
<!--演示内容结束-->
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
div+css3阶梯分页样式.zip （5个子文件） 
div+css3阶梯分页样式 jiaoben361 css 
style.css 2KB images 
pagebg.png 2KB prev-next-bg.png 2KB
index.html 4KB js jquery.1.4.2-min.js 78KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
