CSS 分页实例

简单分页

如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

以下实例演示了如何使用 HTML 和 CSS 来创建分页：

CSS 实例

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

点击及鼠标悬停分页样式

如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover 选择器来修改样式：

CSS 实例

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

CSS 实例

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

圆角样式

可以使用 border-radius 属性为选中的页码来添加圆角样式:

CSS 实例

ul.pagination li a {
    border-radius: 5px;
}

ul.pagination li a.active {
    border-radius: 5px;
}

鼠标悬停过渡效果

我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果 to the page links to create a transition effect on hover:

CSS 实例

ul.pagination li a {
    transition: background-color .3s;
}

带边框分页

我们可以使用 border 属性来添加带边框分页:

CSS 实例

ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}

圆角边框

提示: 在第一个分页链接和最后一个分页链接添加圆角：

CSS 实例

.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

分页间隔

提示: 你可以使用 margin 属性来为每个页码直接添加空格：

CSS 实例

ul.pagination li a {
    margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}

分页字体大小

我们可以使用 font-size 属性来设置分页的字体大小:

CSS 实例

ul.pagination li a {
    font-size: 22px;
}

居中分页

如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：

CSS 实例

div.center {
    text-align: center;
}

面包屑导航

另外一种导航为面包屑导航，实例如下：

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

上一篇：CSS 按钮下一篇：CSS3 框大小

		自动登录	找回密码
密码			立即注册

CSS 分页实例

简单分页

CSS 实例

点击及鼠标悬停分页样式

CSS 实例

CSS 实例

圆角样式

CSS 实例

鼠标悬停过渡效果

CSS 实例

带边框分页

CSS 实例

圆角边框

CSS 实例

分页间隔

CSS 实例

分页字体大小

CSS 实例

居中分页

CSS 实例

更多实例

CSS 实例

面包屑导航