用CSS3写的一个简单分页样式（兼容ie9及以上）

最新推荐文章于 2020-02-24 21:16:10 发布

Annaluo

最新推荐文章于 2020-02-24 21:16:10 发布

阅读量874

点赞数

分类专栏： JavaScript 文章标签： css3 ie 9 分页 html5 html

本文链接：https://blog.csdn.net/Annaluo/article/details/78605129

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分页样式</title>
    
    <!--[if IE]>
    <script src="js/html5.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/excanvas.compiled.js"></script>
    <![endif]-->
    <style>
        /*
2017/11/21
分页样式*/

        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
            line-height: 25px;
        }

        ul.pagination li {display: inline;}

        ul.pagination li a {
            color: #595757;
            float: left;
            padding: 0 9px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #b2b2b2;
            /*margin: 0 4px;*/
        }

        ul.pagination li a.active {
            background-color: #68c282;
            color: #595757;
            border: 1px solid #346141;
        }

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

        .forbid{
            color: #d4d4d4;
        }

        .score_text02{
            color: #595757;
            font-family: 微软雅黑;
            font-size: 12px;
        }
        .location01{
            margin-right: 3px;

        }
        .location02{
            margin-right: 10px;
        }

        .score_text03{
            border: 1px solid #fff;
        }

    </style>
</head>
<body>

<h2>带边框分页</h2>
<ul class="pagination score_text02">
    <li><a href="#" class="location01"><上一页</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="#"  style="border: 1px solid #ffffff; ">...</a></li>
    <li><a href=""  class="location02">下一页></a></li>
    <li><a href="" style="border: 1px solid #ffffff; ">共100页,到第</a></li>
    <li><a href="#" style="width: 12px;height: 16px;margin-top: 3px;line-height: 16px">4</a></li>
    <li><a href="" style="border: 1px solid #ffffff;">页</a></li>
    <li><a href="#" style="width: 26px;height: 16px;margin-top: 3px;line-height: 16px">确定</a></li>
</ul>

</body>
</html>

Annaluo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用CSS3写的一个简单分页样式（兼容ie9及以上）

html> charset="utf-8"> 分页样式 rel="stylesheet" href="css/score_board.css"> /*2017/11/21分页样式*/ ul.pagination { display: inline-block;
复制链接

扫一扫

专栏目录