分页布局实例（英文）

效果

 

结构

<div class="page">
    <span class="page_invalid">first</span>
    <span class="page_onlink">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="#">199</a>
    <a href="#">200</a>
    <a href="#">next</a>
</div>

 样式

 

.page {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #CCCCCC;
}
.page_onlink {
    padding-right: 5px;
    padding-left: 5px;
}
.page_invalid {
    color: #999999;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    border: 1px solid #999999;
}
.page a {
    border: 1px solid #FF6600;
    color: #FF9900;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 5px;
}
.page a:hover {
    color: #FFFFFF;
    background-color: #FF9900;
    text-decoration: none;
}