CSS 分页实例

CSS3 教程 · 2019-03-01 08:42:17

本章节我们将为大家介绍如何通过使用 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 属性来为鼠标移动到页码上时添加过渡效果:

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

面包屑导航

另外一种导航为面包屑导航,实例如下:

CSS 实例

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

点击查看所有 CSS3 教程 文章: https://codercto.com/courses/l/24.html

查看所有标签

Compilers

Compilers

Alfred V. Aho、Monica S. Lam、Ravi Sethi、Jeffrey D. Ullman / Addison Wesley / 2006-9-10 / USD 186.80

This book provides the foundation for understanding the theory and pracitce of compilers. Revised and updated, it reflects the current state of compilation. Every chapter has been completely revised ......一起来看看 《Compilers》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具