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;
}

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

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

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

鼠标悬停过渡效果
«1234567»
我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:

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

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

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

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

«1234567»
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;
}

文章来自 http://www.djznrobot.com/