关闭

HTML学习之翻页效果实现

82人阅读 评论(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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1230次
    • 积分:41
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:4篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论