春季是一个富有生命力季节，也是一个美丽、神奇，充满希望季节。柳树枝条向下垂着，就似一条条线挂树上。春季景色十分美丽，就似一幅栩栩如生画。
在做pj皮肤的时候到网上搜了个分页效果，因为颜色不搭就没用，但是个人认为挺漂亮。代码也够简洁。
下面是用的背景图片：
html代码：
复制代码
代码如下:<div id="pagebar">
<a rel="nofollow noopener noreferrer" href="#"><<</a>
<span class="page_now">1</span>
<a rel="nofollow noopener noreferrer" href="#">2</a>
<a rel="nofollow noopener noreferrer" href="#">3</a>
<a rel="nofollow noopener noreferrer" href="#">4</a>
<a rel="nofollow noopener noreferrer" href="#">5</a>
<a rel="nofollow noopener noreferrer" href="#">6</a>
<a rel="nofollow noopener noreferrer" href="#">7</a>
<a rel="nofollow noopener noreferrer" href="#">8</a>
<a rel="nofollow noopener noreferrer" href="#">9</a>
<a rel="nofollow noopener noreferrer" href="#">10</a>
<a rel="nofollow noopener noreferrer" href="#">11</a>
<a rel="nofollow noopener noreferrer" href="#">12</a>
<a rel="nofollow noopener noreferrer" href="#">13</a>
<a rel="nofollow noopener noreferrer" href="#">14</a>
<a rel="nofollow noopener noreferrer" href="#">15</a>
<a rel="nofollow noopener noreferrer" 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;
}
预览效果：
<script language="JavaScript">ffcod = delpost.runcode5 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode5 .value = ffcod;</script> 提示：您可以先修改部分代码再运行
/g,''); delpost.runcode5 .value = ffcod;</script> 提示：您可以先修改部分代码再运行
本文css如何实现的漂亮的分页效果代码(橘黄色与蓝色)到此结束。远大抱负始于初中，辉煌人生起于今日。小编再次感谢大家对我们的支持！
