HTML学习之翻页效果实现

最新推荐文章于 2024-05-13 16:44:54 发布

xinzailiulang992

最新推荐文章于 2024-05-13 16:44:54 发布

阅读量5.6k

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/xinzailiulang992/article/details/52373456

版权

HTML 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                width: 17px;
                height: 20px;
                text-align: center;
                color: #2052a3;
                line-height: 20px;
                border: 1px solid #e0e1e2;
                text-decoration: none;
                display: inline-block;
                font: "宋体" 12px/20px;
            }

            .pageBtn{
                width: 64px;
            }
            a:hover,.select{
                background: #1f3a87;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="pagebox">
            <a href="" class="pageBtn">上一页</a>
            <a href="">1</a>
            <a href="">2</a>
            <a href="" class="select">3</a>
            <a href="">4</a>
            <a href="">5</a>
            <a href="">6</a>
            <a href="">7</a>
            <a href="">8</a>
            <a href="">9</a>
            <a href="" class="pageBtn">下一页</a>

    </body>
</html>

xinzailiulang992

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
HTML学习之翻页效果实现

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> a{ width: 17px; height: 20px; text-a
复制链接

扫一扫