阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS3 分页实例

      CSS 分页实例

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


      简单分页

      如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。

      实例演示如何使用 HTML 和 CSS 来创建分页:

      代码如下

      <style>
          .pagination {
              display: inline-block;
              padding: 0;
              margin: 8px 0;
          }
          .pagination li {
              display: inline;
          }
          .pagination li a {
              color: black;
              float: left;
              padding: 8px 16px;
              text-decoration: none;
          }
      </style>
      <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>
      
      
      

      点击及鼠标悬停分页样式

      演示效果:

      代码如下:

      <style>
          .pagination2 {
              display: inline-block;
              padding: 0;
              margin: 8px 0;
          }
          .pagination2 li {
              display: inline;
          }
          .pagination2 li a {
              color: black;
              float: left;
              padding: 8px 16px;
              text-decoration: none;
          }
          ul.pagination2 li a.active {
              background-color: #4CAF50;
              color: white;
              border:1px solid #4CAF50;
          }
          ul.pagination2 li a:hover:not(.active) {
              background-color: #ddd;
          }
      </style>
      <ul class="pagination2">
        <li><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a class="active" href="#" style="border:none !important;">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>
      

      圆角样式

      效果

      代码如下

      <style>
          .btnround li a {border-radius: 5px;}
      </style>
      <ul class="pagination2 btnround">
        <li><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li>
          <a class="active" 
              href="#" 
              style="border:none !important;border-radius:5px;">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>
      

      鼠标悬停过渡效果

      代码如下

      <style>
          .hover li a {transition: background-color .4s;}
      </style>
      <ul class="pagination2 hover">
        <li><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a class="active" href="#" style="border:none !important;">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>
      

      带边框分页

      我们可以使用 border 属性来添加带边框分页:

      代码如下

      <style>
          .border li a {
              transition: background-color .3s;
              border:1px solid #ddd;
          }
      </style>
      <ul class="pagination2 border">
        <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>
      

      圆角边框

      提示: 在第一个分页链接和最后一个分页链接添加圆角:

      代码如下

      <style>
          .pagination3 {
              display: inline-block;
              padding: 0;
              margin: 8px 0;
          }
          .pagination3 li {display: inline;}
          .pagination3 li a {
              color: black;
              float: left;
              padding: 8px 16px;
              text-decoration: none;
          }
          .pagination3 li:first-child a {
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
          }
          .pagination3 li:last-child a {
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
          }
          ul.pagination3 li a.active {
              background-color: #4CAF50;
              color: white;
              border:1px solid #4CAF50;
          }
          ul.pagination3 li a:hover:not(.active) {
              background-color: #ddd;
          }
      </style>
      <ul class="pagination3 border">
        <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>
      

      分页间隔

      代码如下

      <style>
          .margin li a {margin:0 4px;}
      </style>
      <ul class="pagination2 border margin">
        <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>
      

      分页字体大小

      我们可以使用 font-size 属性来设置分页的字体大小:

      代码如下

      <style>
          .size li a {font-size:18px;}
      </style>
      <ul class="pagination2 border size">
        <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>) 添加 text-align:center 样式:

      代码如下

      <div style="text-align:center;">
          <ul class="pagination2 border">
              <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>
      

      更多实例

      上一页,下一页按钮:

      分页导航:

      代码如下

      <style>
          ul.pagination666 {
              display: inline-block;
              padding: 0;
              margin: 0;
          }
          ul.pagination666 li {display: inline;}
          ul.pagination666 li a {
              color: black;
              float: left;
              padding: 8px 16px;
              text-decoration: none;
              transition: background-color .3s;
              border: 1px solid #ddd;
              font-size: 18px;
          }
          ul.pagination666 li a.active {
              background-color: #eee;
              color: black;
              border: 1px solid #ddd;
          }
          ul.pagination666 li a:hover:not(.active) {background-color: #ddd;}
      </style>
      <p>上一页,下一页按钮:</p>
      <ul class="pagination666">
        <li><a href="#">❮</a></li>
        <li><a href="#">❯</a></li>
      </ul>
      
      <p>分页导航:</p>
      <ul class="pagination666">
        <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>
      
      

      面包屑导航

      代码如下

      <style>
          ul.breadcrumb {padding: 10px 16px;list-style: none;background-color: #eee;}
          ul.breadcrumb li {display: inline;}
          ul.breadcrumb li+li:before {padding: 8px;color: black;content: "/";}
          ul.breadcrumb li a {color: green;}
      </style>
      <ul class="breadcrumb">
        <li><a href="javascript:void(0)">首页</a></li>
        <li><a href="javascript:void(0)">前端</a></li>
        <li><a href="javascript:void(0)">HTML 教程</a></li>
        <li>HTML 段落</li>
      </ul>
      
      目录
      目录