两种分页样式实现

每一个完美布局后面都有一个龌龊的实现。
1.digg.com分页
对a标签进行float布局,优点不知道,缺点不知道怎么居中布局。
<style type=text/css>
.pages {text-align:center; margin:0 auto;}
.pages a {
display: block;
float: left;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border: #9aafe5 1px solid;
}
.pages a:hover { border-color: #2e6ab1;text-decoration: none;}
.pages a.nextprev {font-weight: bold}
.pages span {
display: block;
float: left;
border: #fff 1px solid;
padding:0.2em 0.5em;
margin-right: 0.1em;
}
.pages span.current { border: #2e6ab1 1px solid; font-weight: bold; background:
#2e6ab1;color: #fff;}
.pages span.nextpre { border: #ddd 1px solid; color: #999; }
</style>
2.flickr.com分页
不用对a标签进行float布局,优点能居中,也能居左居右对齐。
<style type=text/css>
.pageContainer { text-align: center; padding:15px; border:1px solid red;}
.pager { font-size: 12px; margin-left: auto; margin-right: auto;}
.pager a {
padding: 4px 6px;
border: solid 1px #9AAFE5;
background: #fff;
text-decoration: none;
margin:0 }
.pager a:hover {color: #105CB6; border-color: #2E6AB1; text-decoration: none;}
.pager a.nextprev {
margin-right: 20px;
padding:4px 6px;
*padding-bottom:2px;
border: #9AAFE5 1px solid;
color: #105CB6;
font-weight:bold;}
.pager span.current {
padding: 5px 6px;
border-color: #2E6AB1;
font-weight: bold;
background: #2E6AB1;
color: #fff;}
.pager span.nextprev {
margin-left: 20px;
padding: 4px 6px;
*padding-bottom:2px;
border: #ddd 1px solid;
color: #999; }
</style>

以上代码在IE5.5,IE6,IE7以及新版的Opera、Firefox和Netscape下表现一致。IE5能显示基本效果,其他没试过,也没什么必要。
演示例子:http://www.panweizeng.com/others/example/two_style_for_paging.html

[ 分类: 个人动态, 学习 ] 由 Pan 发表于 June 21, 2007 8:48 pm  固定链接 

两种分页样式实现》 这篇文章一共有0 条评论   我也想说两句

还没有人对这篇文章发表评论,赶紧留一个吧。

RSS feed for comments on this post. TrackBack URI

相关文章:

发表评论