CSS3 分页
2019-05-12 本文已影响0人
maskerII
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 分页</title>
<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;
}
ul.pagination1{
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination1 li{display: inline;}
ul.pagination1 li a{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination1 li a.active{
background-color: #4CAF50;
color: white;
}
ul.pagination1 li a:hover:not(.active){
background-color: #dddddd;
}
ul.pagination2{
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination2 li {
display: inline;
}
ul.pagination2 li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
}
ul.pagination2 li a.active{
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
ul.pagination2 li a:hover:not(.active){
background-color: #dddddd;
}
ul.pagination3{
padding: 0;
margin: 0;
display: inline-block;
}
ul.pagination3 li{
display: inline;
}
ul.pagination3 li a{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
transition: background-color 1.0s;
}
ul.pagination3 li a.active{
background-color: #4CAF50;
color: white;
}
ul.pagination3 li a:hover:not(.active){
background-color: #dddddd;
}
ul.pagination4{
padding: 0;
margin: 0;
display: inline-block;
}
ul.pagination4 li{
display: inline;
}
ul.pagination4 li a{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 1.0s;
border: 1px solid #dddddd;
}
ul.pagination4 li a.active{
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination4 li a:hover:not(.active){
background-color: #777777;
}
ul.pagination5{
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination5 li {
display: inline;
}
ul.pagination5 li a{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 1.0s;
border: 1px solid #dddddd;
}
ul.pagination5 li:first-child a{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
ul.pagination5 li:last-child a{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination5 li a.active{
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination5 li a:hover:not(.active){
background-color: #777777;
}
ul.pagination6{
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination6 li{
display: inline;
}
ul.pagination6 li a{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 1.0s;
border: 1px solid #777777;
margin: 0 4px;
}
ul.pagination6 li a.active{
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination6 li a:hover:not(.active){
background-color: #777777;
}
ul.pagination7 {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination7 li {display: inline;}
ul.pagination7 li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
font-size: 22px;
}
ul.pagination7 li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination7 li a:hover:not(.active) {background-color: #ddd;}
ul.pagination8 {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination8 li {display: inline;}
ul.pagination8 li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}
ul.pagination8 li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination8 li a:hover:not(.active) {background-color: #ddd;}
div.center {text-align: center;}
ul.pagination9 {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination9 li {display: inline;}
ul.pagination9 li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
font-size: 18px;
}
ul.pagination9 li a.active {
background-color: #eee;
color: black;
border: 1px solid #ddd;
}
ul.pagination9 li a:hover:not(.active) {background-color: #ddd;}
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";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>
<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>
<br><br>
<h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上</p>
<ul class="pagination1">
<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>
<br><br>
<h2>圆角样式</h2>
<ul class="pagination2">
<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>
<br><br>
<h2>鼠标悬停过渡效果</h2>
<p>鼠标移动到分页码上。</p>
<ul class="pagination3">
<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>
<br><br>
<h2>带边框分页</h2>
<ul class="pagination4">
<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>
<br><br>
<h2>圆角边框</h2>
<ul class="pagination5">
<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>
<br><br>
<h2>分页间隔</h2>
<ul class="pagination6">
<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>
<br><br>
<h2>分页字体大小</h2>
<p>我们可以使用 font-size 属性来设置分页的字体大小:</p>
<ul class="pagination7">
<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>
<br><br>
<h2>分页居中</h2>
<div class="center">
<ul class="pagination8">
<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>
</div>
<br><br>
<p>上一页，下一页按钮:</p>
<ul class="pagination9">
<li><a href="#">❮</a></li>
<li><a href="#">❯</a></li>
</ul>
<p>分页导航:</p>
<ul class="pagination9">
<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>
<br><br>
<h2>面包屑导航</h2>
<ul class="breadcrumb">
<li><a href="#">首页 </a></li>
<li><a href="#">前端 </a></li>
<li><a href="#">HTML 教程 </a></li>
<li>HTML 段落</li>
</ul>
</body>
</html>
<!--
简单分页
如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。
以下实例演示了如何使用 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;
}
-->
<!--
点击及鼠标悬停分页样式
« 1 2 3 4 5 6 7 »
如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover 选择器来修改样式：
CSS 实例
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
-->
<!--
圆角样式
« 1 2 3 4 5 6 7 »
可以使用 border-radius 属性为选中的页码来添加圆角样式:
CSS 实例
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
-->
<!--
鼠标悬停过渡效果
« 1 2 3 4 5 6 7 »
我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:
CSS 实例
ul.pagination li a {
transition: background-color .3s;
}
-->
<!--
带边框分页
« 1 2 3 4 5 6 7 »
我们可以使用 border 属性来添加带边框分页:
CSS 实例
ul.pagination li a {
border: 1px solid #ddd; /* Gray */
}
-->
<!--
圆角边框
提示: 在第一个分页链接和最后一个分页链接添加圆角：
« 1 2 3 4 5 6 7 »
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 属性来为每个页码直接添加空格：
« 1 2 3 4 5 6 7 »
CSS 实例
ul.pagination li a {
margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}
-->
<!--
分页字体大小
« 1 2 3 4 5 6 7 »
我们可以使用 font-size 属性来设置分页的字体大小:
CSS 实例
ul.pagination li a {
font-size: 22px;
}
-->
<!--
居中分页
« 1 2 3 4 5 6 7 »
如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：
CSS 实例
div.center {
text-align: center;
}
-->
