参考手册
CSS3 object-position
CSS3 多列

CSS3 分页样式实例

学习如何使用 CSS 创建响应式分页。

简单的分页

如果网站上有很多页面，那么您可能希望在每张页面上添加某种分页功能：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .pagination {
  6.   display: inline-block;
  7. }
  9. .pagination a {
  10.   color: black;
  11.   float: left;
  12.   padding: 8px 16px;
  13.   text-decoration: none;
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <h1>简单分页</h1>
  21. <div class="pagination">
  22.   <a href="#">&laquo;</a>
  23.   <a href="#">1</a>
  24.   <a href="#">2</a>
  25.   <a href="#">3</a>
  26.   <a href="#">4</a>
  27.   <a href="#">5</a>
  28.   <a href="#">6</a>
  29.   <a href="#">&raquo;</a>
  30. </div>
  32. </body>
  33. </html>
运行一下

活动的可悬停分页

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .pagination {
  6.   display: inline-block;
  7. }
  9. .pagination a {
  10.   color: black;
  11.   float: left;
  12.   padding: 8px 16px;
  13.   text-decoration: none;
  14. }
  16. .pagination a.active {
  17.   background-color: #4CAF50;
  18.   color: white;
  19. }
  21. .pagination a:hover:not(.active) {background-color: #ddd;}
  22. </style>
  23. </head>
  24. <body>
  26. <h1>活动的可悬停分页</h1>
  28. <p>请把鼠标移动到数字上：</p>
  30. <div class="pagination">
  31.   <a href="#">&laquo;</a>
  32.   <a href="#">1</a>
  33.   <a class="active" href="#">2</a>
  34.   <a href="#">3</a>
  35.   <a href="#">4</a>
  36.   <a href="#">5</a>
  37.   <a href="#">6</a>
  38.   <a href="#">&raquo;</a>
  39. </div>
  41. </body>
  42. </html>
运行一下

圆角的活动可悬停分页

如果您需要圆角的 "active" 和 "hover" 按钮，请添加 border-radius 属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .pagination {
  6.   display: inline-block;
  7. }
  9. .pagination a {
  10.   color: black;
  11.   float: left;
  12.   padding: 8px 16px;
  13.   text-decoration: none;
  14. }
  16. .pagination a.active {
  17.   background-color: #4CAF50;
  18.   color: white;
  19.   border-radius: 5px;
  20. }
  22. .pagination a:hover:not(.active) {
  23.   background-color: #ddd;
  24.   border-radius: 5px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  30. <h1>活动的可悬停的圆角分页</h1>
  32. <div class="pagination">
  33.   <a href="#">&laquo;</a>
  34.   <a href="#">1</a>
  35.   <a href="#" class="active">2</a>
  36.   <a href="#">3</a>
  37.   <a href="#">4</a>
  38.   <a href="#">5</a>
  39.   <a href="#">6</a>
  40.   <a href="#">&raquo;</a>
  41. </div>
  43. </body>
  44. </html>
运行一下

可悬停的过渡效果

请将 transition 属性添加到页面链接，创建鼠标悬停时的过渡效果：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .pagination {
  6.   display: inline-block;
  7. }
  9. .pagination a {
  10.   color: black;
  11.   float: left;
  12.   padding: 8px 16px;
  13.   text-decoration: none;
  14.   transition: background-color .3s;
  15. }
  17. .pagination a.active {
  18.   background-color: #4CAF50;
  19.   color: white;
  20. }
  22. .pagination a:hover:not(.active) {background-color: #ddd;}
  23. </style>
  24. </head>
  25. <body>
  27. <h1>悬停时的过渡效果</h1>
  29. <p>请把鼠标移动到数字上。</p>
  31. <div class="pagination">
  32.   <a href="#">&laquo;</a>
  33.   <a href="#">1</a>
  34.   <a href="#" class="active">2</a>
  35.   <a href="#">3</a>
  36.   <a href="#">4</a>
  37.   <a href="#">5</a>
  38.   <a href="#">6</a>
  39.   <a href="#">&raquo;</a>
  40. </div>
  42. </body>
  43. </html>
运行一下

带边框的分页

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .pagination {
  6.   display: inline-block;
  7. }
  9. .pagination a {
  10.   color: black;
  11.   float: left;
  12.   padding: 8px 16px;
  13.   text-decoration: none;
  14.   transition: background-color .3s;
  15.   border: 1px solid #ddd;
  16. }
  18. .pagination a.active {
  19.   background-color: #4CAF50;
  20.   color: white;
  21.   border: 1px solid #4CAF50;
  22. }
  24. .pagination a:hover:not(.active) {background-color: #ddd;}
  25. </style>
  26. </head>
  27. <body>
  29. <h1>带边框的分页</h1>
  31. <div class="pagination">
  32.   <a href="#">&laquo;</a>
  33.   <a href="#">1</a>
  34.   <a href="#" class="active">2</a>
  35.   <a href="#">3</a>
  36.   <a href="#">4</a>
  37.   <a href="#">5</a>
  38.   <a href="#">6</a>
  39.   <a href="#">&raquo;</a>
  40. </div>
  42. </body>
  43. </html>
运行一下

圆角边框

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .pagination {
  6.   display: inline-block;
  7. }
  9. .pagination a {
  10.   color: black;
  11.   float: left;
  12.   padding: 8px 16px;
  13.   text-decoration: none;
  14.   border: 1px solid #ddd;
  15. }
  17. .pagination a.active {
  18.   background-color: #4CAF50;
  19.   color: white;
  20.   border: 1px solid #4CAF50;
  21. }
  23. .pagination a:hover:not(.active) {background-color: #ddd;}
  25. .pagination a:first-child {
  26.   border-top-left-radius: 5px;
  27.   border-bottom-left-radius: 5px;
  28. }
  30. .pagination a:last-child {
  31.   border-top-right-radius: 5px;
  32.   border-bottom-right-radius: 5px;
  33. }
  34. </style>
  35. </head>
  36. <body>
  38. <h1>带圆角边框的分页</h1>
  40. <div class="pagination">
  41.   <a href="#">&laquo;</a>
  42.   <a href="#">1</a>
  43.   <a class="active" href="#">2</a>
  44.   <a href="#">3</a>
  45.   <a href="#">4</a>
  46.   <a href="#">5</a>
  47.   <a href="#">6</a>
  48.   <a href="#">&raquo;</a>
  49. </div>
  51. </body>
  52. </html>
运行一下

链接之间的空间

提示：如果不想组合页面链接，请添加 margin 属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .pagination {
  6.   display: inline-block;
  7. }
  9. .pagination a {
  10.   color: black;
  11.   float: left;
  12.   padding: 8px 16px;
  13.   text-decoration: none;
  14.   transition: background-color .3s;
  15.   border: 1px solid #ddd;
  16.   margin: 0 4px;
  17. }
  19. .pagination a.active {
  20.   background-color: #4CAF50;
  21.   color: white;
  22.   border: 1px solid #4CAF50;
  23. }
  25. .pagination a:hover:not(.active) {background-color: #ddd;}
  26. </style>
  27. </head>
  28. <body>
  30. <h1>带外边距的分页：</h1>
  32. <div class="pagination">
  33.   <a href="#">&laquo;</a>
  34.   <a href="#">1</a>
  35.   <a href="#" class="active">2</a>
  36.   <a href="#">3</a>
  37.   <a href="#">4</a>
  38.   <a href="#">5</a>
  39.   <a href="#">6</a>
  40.   <a href="#">&raquo;</a>
  41. </div>
  43. </body>
  44. </html>
运行一下

分页尺寸

请使用 font-size 属性更改分页的大小：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .pagination {
  6.   display: inline-block;
  7. }
  9. .pagination a {
  10.   color: black;
  11.   float: left;
  12.   padding: 8px 16px;
  13.   text-decoration: none;
  14.   transition: background-color .3s;
  15.   border: 1px solid #ddd;
  16.   font-size: 22px;
  17. }
  19. .pagination a.active {
  20.   background-color: #4CAF50;
  21.   color: white;
  22.   border: 1px solid #4CAF50;
  23. }
  25. .pagination a:hover:not(.active) {background-color: #ddd;}
  26. </style>
  27. </head>
  28. <body>
  30. <h1>分页尺寸</h1>
  32. <p>更改 font-size 属性以使分页变小或变大。</p>
  34. <div class="pagination">
  35.   <a href="#">&laquo;</a>
  36.   <a href="#">1</a>
  37.   <a href="#" class="active">2</a>
  38.   <a href="#">3</a>
  39.   <a href="#">4</a>
  40.   <a href="#">5</a>
  41.   <a href="#">6</a>
  42.   <a href="#">&raquo;</a>
  43. </div>
  45. </body>
  46. </html>
运行一下

居中的分页

如需居中分页，请使用设置了 text-align:center 的容器元素（如 <div>）包围它：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .center {
  6.   text-align: center;
  7. }
  9. .pagination {
  10.   display: inline-block;
  11. }
  13. .pagination a {
  14.   color: black;
  15.   float: left;
  16.   padding: 8px 16px;
  17.   text-decoration: none;
  18.   transition: background-color .3s;
  19.   border: 1px solid #ddd;
  20.   margin: 0 4px;
  21. }
  23. .pagination a.active {
  24.   background-color: #4CAF50;
  25.   color: white;
  26.   border: 1px solid #4CAF50;
  27. }
  29. .pagination a:hover:not(.active) {background-color: #ddd;}
  30. </style>
  31. </head>
  32. <body>
  34. <h1>居中分页</h1>
  36. <div class="center">
  37.   <div class="pagination">
  38.   <a href="#">&laquo;</a>
  39.   <a href="#">1</a>
  40.   <a href="#" class="active">2</a>
  41.   <a href="#">3</a>
  42.   <a href="#">4</a>
  43.   <a href="#">5</a>
  44.   <a href="#">6</a>
  45.   <a href="#">&raquo;</a>
  46.   </div>
  47. </div>
  49. </body>
  50. </html>
运行一下

面包屑

分页的另一种形式是所谓的“面包屑”（breadcrumbs）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul.breadcrumb {
  6.   padding: 8px 16px;
  7.   list-style: none;
  8.   background-color: #eee;
  9. }
  11. ul.breadcrumb li {display: inline;}
  13. ul.breadcrumb li+li:before {
  14.   padding: 8px;
  15.   color: black;
  16.   content: "/\00a0";
  17. }
  19. ul.breadcrumb li a {color: green;}
  20. </style>
  21. </head>
  22. <body>
  24. <h1>面包屑分页</h1>
  26. <ul class="breadcrumb">
  27.   <li><a href="#">Home</a></li>
  28.   <li><a href="#">Pictures</a></li>
  29.   <li><a href="#">Summer 15</a></li>
  30.   <li>Italy</li>
  31. </ul>
  33. </body>
  34. </html>
运行一下
CSS3 object-position
CSS3 多列

分类导航