每一个完美布局后面都有一个龌龊的实现。
1.digg.com分页
对a标签进行float布局,优点不知道,缺点不知道怎么居中布局。
.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; }
2.flickr.com分页
不用对a标签进行float布局,优点能居中,也能居左居右对齐。
.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;
}
以上代码在IE5.5,IE6,IE7以及新版的Opera、Firefox和Netscape下表现一致。IE5能显示基本效果,其他没试过,也没什么必要。演示例子