CSS 分页

本节我们将为大家介绍如何通过使用 CSS3 来创建分页的实例。

先来一个简单的分页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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;
}
</style>
</head>
<body>
<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="#">»</a></li>
</ul>
</body>
</html>

鼠标悬停样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</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.pagination li a.active {
    background-color: blue;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<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>
</body>
</html>

带圆角的鼠标悬停样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</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;
    border-radius: 5px;
}
ul.pagination li a.active {
    background-color:red;
    color: white;
    border-radius: 25px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<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>
</body>
</html>

带边框的分页样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</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;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
ul.pagination li a.active {
    background-color: blue;
    color: white;
    border: 2px solid red;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<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>
</body>
</html>

带圆角的边框分页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</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;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
.pagination li:first-child a {
    border-top-left-radius:25px;
    border-bottom-left-radius: 25px;
}
.pagination li:last-child a {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
ul.pagination li a.active {
    background-color: gray;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

带间隔的分页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</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;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 10px;
}
ul.pagination li a.active {
    background-color: blue;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<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>
</body>
</html>

设置字体大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</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;
    transition: background-color .3s;
    border: 1px solid #ddd;
    font-size: 30px;
}
ul.pagination li a.active {
    background-color: pink;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<p>我们可以使用 font-size 属性来设置分页的字体大小:</p>
<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>
</body>
</html>

居中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</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;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
div.center {text-align: center;}
</style>
</head>
<body>
<div class="center">
  <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>
</div>
</body>
</html>

分页导航样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
         body {
        font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
      }
      .pager {
        list-style: none outside none;
        margin: 20px;
        padding: 0;
        text-align: center;
      }
      .pager li {
        display: inline-block;
        margin: 0;
        padding: 0;
      }
      * html .pager li   { display: inline; }  
      *+html .pager  li   { display: inline; }
      .pager li.pager-current,
      .pager li a {
      -moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
      -webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
        border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
      background: #232B30; /* old browsers */
      background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
      -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
      -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */ 
      box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
        color: #FFFFFF;
        font-size: 12px;
        margin-left: 10px;
        padding: 3px 12px;
      -webkit-transition: all 0.5s ease-in 0s;
        -moz-transition: all 0.5s ease-in 0s;
        -o-transition: all 0.5s ease-in 0s;
        transition: all 0.5s ease-in 0s;
      text-decoration: none;
      zoom:1;
      }
      .pager li.pager-current {
      -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      color: #d54e21;
      font-weight: bold;
      }
      .pager li a:hover {
      -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
      background: #4C5A64; /* old browsers */
      background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
      color: #d54e21;
      }
</style>
</head>
<body>
 <ul class="pager">
        <li class="pager-first first">
          <a class="active" title="到第一页" href="/css3">« 首页</a>
        </li>
        <li class="pager-previous">
          <a class="active" title="返回上一个页面" href="/css3?page=2">‹ 上一页</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 1 页" href="/css3">1</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 2 页" href="/css3?page=1">2</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 3 页" href="/css3?page=2">3</a>
        </li>
        <li class="pager-current">4</li>
        <li class="pager-item">
          <a class="active" title="到第 5 页" href="/css3?page=4">5</a>
        </li>
        <li class="pager-item">
          <a class="active" title="到第 6 页" href="/css3?page=5">6</a>
        </li>
        <li class="pager-next">
          <a class="active" title="去下一个页面" href="/css3?page=4">下一页 ›</a>
        </li>
        <li class="pager-last last">
          <a class="active" title="到最后一页" href="/css3?page=5">尾页 »</a>
        </li>
      </ul>
</body>
</html>

继续学习

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #pagination-clean li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-clean a { border-right:solid 1px #DEDEDE; margin-right:2px; } #pagination-clean .previous-off, #pagination-clean .next-off { color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; } #pagination-clean .next a,#pagination-clean previous a { border:none; font-weight:bold; } #pagination-clean .active { color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ border-right:solid 1px #DEDEDE; } #pagination-clean a:link,#pagination-clean a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:underline; } #pagination-clean a:hover { text-decoration:none; } #pagination-digg li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-digg a { border:solid 1px #9aafe5; margin-right:2px; } #pagination-digg .previous-off,#pagination-digg .next-off { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; } #pagination-digg .next a,#pagination-digg .previous a { font-weight:bold; } #pagination-digg .active { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; } #pagination-digg a:link,#pagination-digg a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; } #pagination-digg a:hover { border:solid 1px #0e509e; } #pagination-flickr li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; } #pagination-flickr a { border:solid 1px #DDDDDD; margin-right:2px; } #pagination-flickr .previous-off,#pagination-flickr .next-off { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; } #pagination-flickr .next a,#pagination-flickr .previous a { font-weight:bold; border:solid 1px #FFFFFF; } #pagination-flickr .active { color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; } #pagination-flickr a:link, #pagination-flickr a:visited { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; } #pagination-flickr a:hover { border:solid 1px #000; background:#0063DC; color:#FFF; } body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } h2{ clear:both; border:0; margin:0; padding-top:30px; font-size:13px; } p{ border:0; margin:0; padding:0; padding-bottom:20px; } ul{ border:0; margin:0; padding:0; } </style> </head> <body> <h2>清新极简风格</h2> <p>A simple and clean pagination style</p> <ul id="pagination-clean"> <li class="previous-off">« Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> <h2>高亮按钮风格</h2> <p>A simple pagination style Digg-like</p> <ul id="pagination-digg"> <li class="previous-off">«Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> <h2>Flickr网站风格</h2> <p>A simple pagination style Flickr-like</p> <ul id="pagination-flickr"> <li class="previous-off">«Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul> </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠