CSS 分页

本节介绍如何通过使用 CSS3 来创建分页

简单分页:

实例

ul{
    display: inline-block;
    padding: 0;
    margin: 0;
}
li {
	display: inline;
font-size: 20px;
}
li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

鼠标悬停样式:

通过伪元素hover来设置

实例

.page{
	background-color: pink;
    color: white;
}
li a:hover:not(.page){
	background-color: #ccc;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

带圆角边框且有分页间隔的效果:

实例

li a {
	border: 1px solid #ccc;
	border-radius: 5px;
    color: #444;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    margin-left:10px;
    background-color: pink;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

面包屑导航

实例

ul{
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul li {display: inline;}
ul li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";/*表示/的意思*/
}
 li a {color: #444;
 	list-style: none;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 11.jpg+