模仿百度搜索的分页样式

使用

这里 有最终的分页效果。

HTML

<div class="page">
    <a href="#" class="prev">上一页</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#" class="active">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="#" class="next">下一页</a>
</div>

CSS

.page {
    width: 635px;
    height: 36px;
    font-size: 0;
}

.page > a {
    display: inline-block;
    font: 12px/34px "Microsoft YaHei UI";
    width: 34px;
    height: 34px;
    border: 1px solid #e1e2e3;
    text-align: center;
    text-decoration: none;
}

.page > .prev, .page > .next {
    width: 86px;
}

.page > a:not(:first-child) {
    margin-left: 9px;
}

.page > a:hover, .page > a.active {
    border-color: #3388ff;
    background-color: #f2f8ff;
}

实现过程

1. 一共有 12 个项目，长宽分别是 635px 和 36px。

.page {
    width: 635px;
    height: 36px;
}

2. 每个项目都有 1 像素的灰色边框。

.page > a {
    border: 1px solid #e1e2e3;
}

3. 「上一页」文字 size 是 12px，行高设置为边框内的高度 34px，字体「微软雅黑」。

.page > a {
    font: 12px/34px "Microsoft YaHei UI";
    border: 1px solid #e1e2e3;
}

4. 设置页码文字垂直居中显示（height 的 line-height 一样大）。

.page > a {
    display: inline-block;
    width: 34px;
    height: 34px;
    font: 12px/34px "microsoft yahei";
    border: 1px solid #e1e2e3;
}

5. 文字居中、且无下划线。

.page > a {
    display: inline-block;
    width: 34px;
    height: 34px;
    font: 12px/34px "microsoft yahei";
    border: 1px solid #e1e2e3;
    text-align: center;
    text-decoration: none;
}

6. 「上一页」和「下一页」的宽度是 86px。

.page > .prev, .page > .next {
    width: 86px;
}

7. 每个项目之间有 9px 的空白（这里需要将父元素 font-size 先设置为 0，因为折行的行内元素之间默认会有 0.5em 的宽度间隔）。

.page {
    width: 635px;
    height: 36px;
    font-size: 0;
}

.page > a:not(:first-child) {
    margin-left: 9px;
}

8. 项目在 hover、激活状态下（.active）有样式

.page > a:hover, .page > a.active {
    border-color: #3388ff;
    background-color: #f2f8ff;
}

本作品采用《CC 协议》，转载必须注明作者和本文链接