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

WEB前端 waitig 483℃ 百度已收录 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>

本文由【waitig】发表在等英博客
本文固定链接:用CSS3写的一个简单分页样式(兼容ie9及以上)
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)