CSS 分页示例


目录

    显示目录


了解如何使用 CSS 创建响应式分页。


简单分页

如果您的网站有很多页面,您可能希望为每个页面添加某种分页:

例子

 .pagination {
  display: inline-block;
}
.pagination a {
  color: 
black;
  float: left;
  padding: 8px 
16px;
  text-decoration: none;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>

<h2>Simple Pagination</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>



主动和可悬停分页

使用 .active 类突出显示当前页面,并使用 :hover 选择器更改每个页面的颜色将鼠标移到页面链接上时:

例子

 .pagination a.active {
  background-color: 
#4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Active and Hoverable Pagination</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>


圆形活动按钮和可悬停按钮

如果您想要圆形的“活动”和“悬停”按钮,请添加 border-radius 属性:

例子

 .pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>


悬停过渡效果

transition 属性添加到页面链接以创建悬停时的过渡效果:

例子

 .pagination a {
  transition: background-color .3s;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Transition Effect on Hover</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>




有边框分页

使用 border 属性为分页添加边框:

例子

 .pagination a {
  border: 1px solid #ddd; /* Gray 
*/
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Borders</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>


圆角边框

提示:为分页中的第一个和最后一个链接添加圆角边框:

例子

.pagination a:first-child {
  border-top-left-radius: 
5px;
  border-bottom-left-radius: 5px;
}
.pagination 
  a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>
</head>
<body>

<h2>Pagination with Rounded Borders</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>


链接之间的空间

提示:如果您不想对页面链接进行分组,请添加 margin 属性:

例子

 .pagination a {
  margin: 0 4px; /* 0 is for top 
and bottom. Feel free to change it */
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Margins</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>



分页大小

使用 font-size 属性更改分页大小:

例子

 .pagination a {
  font-size: 22px;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  font-size: 22px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination Size</h2>

<p>Change the font-size property to make the pagination smaller or bigger.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>



居中分页

要使分页居中,请使用 text-align:center 将容器元素(如 <div>)包裹在其周围

例子

 .center {
  text-align: center;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Centered Pagination</h2>

<div class="center">
  <div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
  </div>
</div>

</body>
</html>



更多示例

例子

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:white;
}
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<p>Next/Previous buttons:</p>
<div class="pagination">
  <a href="#">&#10094;</a>
  <a href="#">&#10095;</a>
</div>

<p>Navigation pagination:</p>
<div class="pagination">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

</body>
</html>



面包屑

分页的另一种变体是所谓的“面包屑”:

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
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>Breadcrumb Pagination</h2>

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

</body>
</html>