美文网首页
CSS3 分页

CSS3 分页

作者: maskerII | 来源:发表于2019-05-12 14:33 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 分页</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.pagination1{
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination1 li{display: inline;}
        ul.pagination1 li a{
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }


        ul.pagination1 li a.active{
            background-color: #4CAF50;
            color: white;
        }

        ul.pagination1 li a:hover:not(.active){
            background-color: #dddddd;
        }


        ul.pagination2{
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination2 li {
            display: inline;
        }

        ul.pagination2 li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            border-radius: 5px;
        }

        ul.pagination2 li a.active{
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
        }

        ul.pagination2 li a:hover:not(.active){
            background-color: #dddddd;
        }



        ul.pagination3{
            padding: 0;
            margin: 0;
            display: inline-block;
        }

        ul.pagination3 li{
            display: inline;
        }

        ul.pagination3 li a{
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 1.0s;
        }


        ul.pagination3 li a.active{
            background-color: #4CAF50;
            color: white;
        }

        ul.pagination3 li a:hover:not(.active){
            background-color: #dddddd;
        }



        ul.pagination4{
            padding: 0;
            margin: 0;
            display: inline-block;
        }

        ul.pagination4 li{
            display: inline;
        }

        ul.pagination4 li a{
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color 1.0s;
            border: 1px solid #dddddd;
        }

        ul.pagination4 li a.active{
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        ul.pagination4 li a:hover:not(.active){
            background-color: #777777;
        }


        ul.pagination5{
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination5 li {
            display: inline;
        }

        ul.pagination5 li a{
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color 1.0s;
            border: 1px solid #dddddd;
        }

        ul.pagination5 li:first-child a{
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        ul.pagination5 li:last-child a{
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        ul.pagination5 li a.active{
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        ul.pagination5 li a:hover:not(.active){
            background-color: #777777;
        }

        ul.pagination6{
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination6 li{
            display: inline;
        }

        ul.pagination6 li a{
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color 1.0s;
            border: 1px solid #777777;
            margin: 0 4px;
        }

        ul.pagination6 li a.active{
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        ul.pagination6 li a:hover:not(.active){
            background-color: #777777;
        }




        ul.pagination7 {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination7 li {display: inline;}

        ul.pagination7 li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            font-size: 22px;
        }

        ul.pagination7 li a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        ul.pagination7 li a:hover:not(.active) {background-color: #ddd;}



        ul.pagination8 {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination8 li {display: inline;}

        ul.pagination8 li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
        }

        ul.pagination8 li a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        ul.pagination8 li a:hover:not(.active) {background-color: #ddd;}

        div.center {text-align: center;}


        ul.pagination9 {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination9 li {display: inline;}

        ul.pagination9 li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            font-size: 18px;
        }

        ul.pagination9 li a.active {
            background-color: #eee;
            color: black;
            border: 1px solid #ddd;
        }

        ul.pagination9 li a:hover:not(.active) {background-color: #ddd;}


        ul.breadcrumb {
            padding: 8px 16px;
            list-style: none;
            background-color: #eee;
        }
        ul.breadcrumb li {display: inline;}
        ul.breadcrumb li+li:before {
            padding: 8px;
            color: black;
            content: "/\00a0";
        }
        ul.breadcrumb li a {color: green;}


    </style>
</head>
<body>


<h2>简单的分页</h2>
<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>

<br><br>

<h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上</p>
<ul class="pagination1">
    <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>

<br><br>


<h2>圆角样式</h2>
<ul class="pagination2">
    <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>

<br><br>

<h2>鼠标悬停过渡效果</h2>
<p>鼠标移动到分页码上。</p>
<ul class="pagination3">
    <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>

<br><br>


<h2>带边框分页</h2>
<ul class="pagination4">
    <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>

<br><br>


<h2>圆角边框</h2>
<ul class="pagination5">
    <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>

<br><br>


<h2>分页间隔</h2>
<ul class="pagination6">
    <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>

<br><br>


<h2>分页字体大小</h2>
<p>我们可以使用 font-size 属性来设置分页的字体大小:</p>
<ul class="pagination7">
    <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>

<br><br>



<h2>分页居中</h2>

<div class="center">
    <ul class="pagination8">
        <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>

<br><br>


<p>上一页，下一页按钮:</p>
<ul class="pagination9">
    <li><a href="#">❮</a></li>
    <li><a href="#">❯</a></li>
</ul>

<p>分页导航:</p>
<ul class="pagination9">
    <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>

<br><br>


<h2>面包屑导航</h2>
<ul class="breadcrumb">
    <li><a href="#">首页 </a></li>
    <li><a href="#">前端 </a></li>
    <li><a href="#">HTML 教程 </a></li>
    <li>HTML 段落</li>
</ul>



</body>
</html>

<!--

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

以下实例演示了如何使用 HTML 和 CSS 来创建分页：

CSS 实例
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;
}


-->



<!--


点击及鼠标悬停分页样式
« 1 2 3 4 5 6 7 »
如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover 选择器来修改样式：

CSS 实例
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}



-->


<!--

圆角样式
« 1 2 3 4 5 6 7 »
可以使用 border-radius 属性为选中的页码来添加圆角样式:

CSS 实例
ul.pagination li a {
    border-radius: 5px;
}

ul.pagination li a.active {
    border-radius: 5px;
}



-->



<!--

鼠标悬停过渡效果
« 1 2 3 4 5 6 7 »
我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:

CSS 实例
ul.pagination li a {
    transition: background-color .3s;
}

-->


<!--

带边框分页
« 1 2 3 4 5 6 7 »
我们可以使用 border 属性来添加带边框分页:

CSS 实例
ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}


-->

<!--

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

« 1 2 3 4 5 6 7 »
CSS 实例
.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

-->

<!--

分页间隔
提示: 你可以使用 margin 属性来为每个页码直接添加空格：

« 1 2 3 4 5 6 7 »
CSS 实例
ul.pagination li a {
    margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}


-->


<!--

分页字体大小
« 1 2 3 4 5 6 7 »
我们可以使用 font-size 属性来设置分页的字体大小:

CSS 实例
ul.pagination li a {
    font-size: 22px;
}

-->

<!--

居中分页
« 1 2 3 4 5 6 7 »
如果要让分页居中，可以在容器元素上 (如 <div>) 添加 text-align:center 样式：

CSS 实例
div.center {
    text-align: center;
}

-->

相关文章

  • CSS3 分页

  • css3分页

    1.做一个鼠标点击或悬停的分页 如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 a:...

  • css3分页，卡片制作

    1.分页： 效果图：image.png其中transition（过渡）属性是个复合属性，它包括以下几个子属性： t...

  • CSS3左右滑动箭头分页效果

    来源：http://itssh.cn/post/949.html 效果： 来源：http://itssh.cn/p...

  • MyBatis之分页

    五、分页 目录：使用Limit分页、RowBounds分页、分页插件 1.使用Limit分页 语法： 使用MyBa...

  • JS的分页算法

    分页的总页数算法 分页算法 分页存储过程或者页面分页中的分页算法: int pagesize // 每页记录数 i...

  • WEB页面中几种常见的分页样式

    这里谈谈WEB页面中几种常见的分页样式 分页样式一：滚动翻页image 分页样式二：常规分页image 分页样式三...

  • 目录【Java分页(前台+后台)】

    SubList分页-001-分页概述 SubList分页-002-需求 SubList分页-003-中文处理 Su...

  • SSM框架-实现Mybatis分页功能-foreknow_cms

    分页处理 分页1、前台分页2、数据库（后台）分页3、存储过程 Orade (Rownum) Mysql(lim...

  • 2018-10-10：分页

    分页 真分页使用特定的sql语句，条件查询出指定内容 假分页数据全部取出，在页面分页显示 分页数据pageSize...

网友评论

      本文标题：CSS3 分页

      本文链接：https://www.haomeiwen.com/subject/mvxtaqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS3 分页|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！