阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录