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

来源：互联网发布：vnc远程控制软件mac 编辑：程序博客网时间：2024/06/06 08:30
<!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>
阅读全文
0 0