CSS3 基础教程CSS3 简介CSS3 边框CSS3 圆角CSS3 背景 backgroundCSS3 渐变（Gradients）CSS3 文本效果CSS3 @font-face 字体CSS3 2D 转换CSS3 3D 转换CSS3 过渡CSS3 动画CSS3 多列CSS3 用户界面CSS 图片CSS 按钮CSS 分页范例CSS3 框大小CSS3 弹性盒子(flex box)CSS3 多媒体查询CSS3 多媒体查询范例CSS 3 word-break 属性
CSS 分页范例
本章节我们介绍如何使用 css 来创建分页外观
如果我们的网站有很多的页面，就会用到分页功能为每个页面做导航，比如分类文章列表
下面的范例演示了如何使用 html 和 CSS 来创建分页
<style>
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;
}
</style>
<h2>简单的分页</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.fly63.com</footer>
点击及鼠标悬停分页样式
我们先看一下最终效果
我们可以给当前页添加 .active CSS 类来创建当前页外观效果，可以使用 :hover CSS 选择器来创建鼠标悬停时的外观
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {
background-color: #ddd;
}
圆角样式
我们可以使用 CSS border-radius 属性给选中的当前页添加圆角效果，就像下面的范例一样
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
鼠标悬停过渡效果
我们还可以通过添加 CSS transition 属性来为鼠标移动到页码上时添加过渡效果
ul.pagination li a {
transition: background-color .3s;
}
带边框分页
我们还可以使用 CSS border 属性来添加带边框的分页
ul.pagination li a {
border: 1px solid #ddd;
}
圆角边框
还可以通过 CSS border-radius 在第一个分页链接和最后一个分页链接添加圆角
.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;
}
分页间隔
如果想让每一个分页之间有一点空隙，可以使用 CSS margin 属性
ul.pagination li a {
margin: 0 4px;
}
分页字体大小
如果想调整分页字体大小，可以使用 font-size 属性
ul.pagination li a { font-size: 22px;}
分页居中显示
如果想让分页在父容器中居中显示，可以在容器元素上 (如 <div>) 添加 text-align:center 样式
html
<div style="text-align:center;">
<ul class="pagination2 border">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
css
div.center { text-align: center;}
只有上一页下一页按钮
html
<ul class="pagination ">
<li><a href="#">❮ 上一页</a></li>
<li><a href="#">❯ 下一页</a></li>
</ul>
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;
transition: background-color .3s;
border: 1px solid #ddd;
font-size: 18px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd}
分页导航
html
<ul class="pagination3 border">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
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;
transition: background-color .3s;
border: 1px solid #ddd;
font-size: 18px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd}
面包屑导航
我们还可以创建一个面包屑导航
html
<ul class="breadcrumb">
<li><a href="#">首页 </a></li>
<li><a href="#">前端 </a></li>
<li><a href="#">HTML 教程 </a></li>
<li>HTML 段落</li>
</ul>
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";
}