上一篇
下一篇
div+css实例：一款漂亮的分页效果
日期:2009-08-09作者:woniu
在做pj皮肤的时候到网上搜了个分页效果，因为颜色不搭就没用，但是个人认为挺漂亮。代码也够简洁。
下面是用的背景图片：
html代码：
Example Source Code <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代码
Example Source Code * {
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;
}
预览效果：
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[本日志由 woniu 于 2009-08-09 11:45 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: css分页div+css实例分页效果分页
相关日志:
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: css分页div+css实例分页效果分页相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论