Community
Learn
Tools Library
AI Tools
Leisure
search
English
search
logo
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

CSS pagination

In this section we will introduce how to create paging examples by using CSS3.

Let’s start with a simple paging: 

<!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>

Mouseover style: 

<!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>

Mouseover with rounded corners Stop style: 

<!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>

Bordered paging style:

<!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>

Bordered paging with rounded corners:

<!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>

Pagination with gaps:

<!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>

Set font size:

<!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>

Centered : 

<!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>

Page navigation style: 

<!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>



Continuing Learning
new file
<!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>
Reset Code
Automatic operation
submit
logo
Preview Clear
Previous section
Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
Free Quickly play with CSS3 tutorial
Free Quickly play with HTML5 tutorial
Free ECMAScript new features in-depth video tutorial
Free Detailed video tutorial on Ajax principles
Free React basics in-depth video tutorial
Free React routing in-depth video tutorial
Free React Native basics video tutorial
Free PHP Fun Breakthrough Class
Free Ajax message board, waterfall flow video tutorial
Free AJAX cross-domain solution: JSONP video tutorial
Free Yexiutang HTML5+CSS3 video tutorial
Free React Native advanced in-depth video tutorial
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
496446
Let's briefly talk about starting a business in PHP Quick introduction to web front-end development Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum] Login verification and classic message board Computer network knowledge collection Quick Start Node.JS Full Version The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)