CSS3 分页实例

🌙
手机阅读
本文目录结构
axihe

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>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang