css实现的漂亮的分页效果代码(橘黄色与蓝色)

作者:佚名     字体:[增加 减小]    类型:转载
在做pj皮肤的时候到网上搜了个分页效果,因为颜色不搭就没用,但是个人认为挺漂亮。代码也够简洁。 下面是用的背景图片: html代码: css代码 * { margin:0; padding:0; text-decoration:none;
在做pj皮肤的时候到网上搜了个分页效果,因为颜色不搭就没用,但是个人认为挺漂亮。代码也够简洁。 下面是用的背景图片: html代码:
 
<div id="pagebar"> 
<a href="#"><<</a> 
<span class="page_now">1</span> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
<a href="#">6</a> 
<a href="#">7</a> 
<a href="#">8</a> 
<a href="#">9</a> 
<a href="#">10</a> 
<a href="#">11</a> 
<a href="#">12</a> 
<a href="#">13</a> 
<a href="#">14</a> 
<a href="#">15</a> 
<a href="#">>></a> 
</div> 
css代码
 
* { 
margin:0; 
padding:0; 
text-decoration:none; 
} 
#pagebar { 
float:left; 
display:inline; 
width:570px; 
height:32px; 
margin:50px; 
font-size:13px; } 
#pagebar a,#pagebar .page_now { 
display:block; 
float:left; 
margin-right:4px; 
padding:2px 5px; 
border:1px solid #f30; 
color:#fff; 
font-weight:800; 
background:url(pagebar_bg.png) repeat-x 0 0 ; 
} 
#pagebar a { 
display:inline; 
} 
#pagebar a:hover { 
border:1px solid #03c; 
background-position:0 -30px; 
} 
#pagebar .page_now { 
border:1px solid #333; 
background-image:none; 
background:#666; 
} 
预览效果:


提示:您可以先修改部分代码再运行