分页

作者: 浮华_e823 | 来源:发表于2018-12-10 16:56 被阅读0次

    分页

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>分页</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            a{
                text-decoration: none;
            }
            .wrap{
                width: 960px;
                height: 42px;
                margin:50px auto;
            }
            .wrap .container{
                border:1px solid #ccc;
            }
            .paging{
                text-align: center;
                padding: 5px 10px;
                font-size: 12px;
                font-family: "Microsoft YaHei";
            }
    
            .paging .prev,.next{
                display: inline-block;
                width: 70px;
                height: 30px;
                line-height: 30px;
                background-color: gold;
                color: #000;
                cursor: pointer;
            }
            .paging a,.point{
                display: inline-block;
                width: 30px;
                height: 30px;
                line-height: 30px;
                background-color: gold;
            }
            .point{
                background: none;
                cursor: pointer;
                
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="container">
                <div class="paging">
                    <span class="prev">上一页</span>
                    <a href="">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a href="">4</a>
                    <span class="point">...</span>
                    <a href="">17</a>
                    <a href="">18</a>
                    <a href="">19</a>
                    <a href="">20</a>
                    <span class="next">下一页</span>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    效果

    image.png

    相关文章

      网友评论

          本文标题:分页

          本文链接:https://www.haomeiwen.com/subject/dykdhqtx.html