购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS3 分页

CSS3 分页
主要介绍通过CSS3实现不同的分页效果
编辑:前端控 前端控 更新时间:2019-02-01 10:44:23

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+

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号