zoukankan      html  css  js  c++  java
  • 页码简单设计

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .page-area ul li{
                display: inline-block;/*inlineblock就可以在一行显示,或者float都可以*/
    
            }
            .page-area ul li a{
                display: inline-block;
                color: #369;
                height: 34px;
                line-height: 34px;
                text-align: center;
                 34px;
                border: 1px solid #e1e1e1;
                border-radius: 15%;
                margin-left: 5px;
            }
            .page-area ul li a.page-next{
                 90px;
    
            }
            .page-area ul li a:hover{
                background-color: #369;/*background是写url的(‘’)*/
                color: white;
            }
    </style>
    </head>
    <body>
    
    <div class="page-area">
        <ul>
            <li><span class="current-page">1</span></li>
            <li><a href="#" class="page-a">2</a></li>
            <li><a href="#" class="page-a">3</a></li>
            <li><a href="#" class="page-a">4</a></li>
            <li><a href="#" class="page-a">5</a></li>
            <li><a href="#" class="page-a">6</a></li>
            <li><a href="#" class="page-a">7</a></li>
            <li><a href="#" class="page-a">8</a></li>
            <li><a href="#" class="page-a">9</a></li>
            <li><a href="#" class="page-a">10</a></li>
            <li><a href="#" class="page-a page-next">下一页</a></li>
        </ul>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    终于回来了&&邮递员送信
    发射站
    黑匣子
    利维坦——(1)
    预告
    整除(水题)
    BZOJ054_移动玩具_KEY
    BZOJ4034_树上操作_KEY
    树链剖分学习&BZOJ1036
    BZOJ1208_宠物收养所_KEY
  • 原文地址:https://www.cnblogs.com/wfl9310/p/9180097.html
Copyright © 2011-2022 走看看