分页页码

最新推荐文章于 2023-06-29 13:38:22 发布

花江夏树

最新推荐文章于 2023-06-29 13:38:22 发布

阅读量366

点赞数

本文链接：https://blog.csdn.net/onepunchmen00/article/details/78057075

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .page-normal a{
            border: 1px solid #ff9600;
            padding: 5px 7px;
            color: #ff6500;
            text-decoration: none;
        }
        .page-normal{
            color: #ff6500;/*可以让省略号变色*/
            text-align: center;/*a 和span都是内联*/
            font-size: 0;/*解决行内元素间距问题*/
        }

        .page-normal a, .page-normal .page-current, .page-normal
        .page-pre, .page-normal .page-mid{/*将重复的合并*/
            padding: 5px 7px;
            font-size: 18px;
            margin-left: 10px;
        }

        .page-normal a:hover{
            border: 1px solid #ff6500;
            color: #ff6500;
            background: #ffbe94;
        }
        .page-normal .page-current{
            border: 1px solid #ff6500;
            color: #ff6500;
            background: #ffbe94;
        }
        .page-normal .page-pre ,{
            border: 1px solid #ffe3c6;
            color: #ffe3c6;
        }
        .page-normal .page-mid{
            color: #ffe3c6;

        }
    </style>
</head>
<body>
<div class="page-normal">
    <span class="page-pre">&lt;</span>
    <a  class="page-current" href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <span class="page-mid">...</span>
    <a href="#">199</a>
    <a href="#">200</a>
    <a href="#">&gt;</a>


</div>
</body>
</html>

花江夏树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页页码

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .page-normal a{ border: 1px solid #ff9600; padding: 5px 7px;
复制链接

扫一扫