您当前的位置： > HTML/JS/CSS >

HTML/CSS 实现分页

发布时间：2018-10-26 13:20编辑：admin阅读（）

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
     
    .page {
     
           display: inline-block;
     
           padding: 0;
     
           margin: 0;
     
       }   
     
       .page li {display: inline;}  
     
       .page li a {
     
           color: black;
     
           float: left;
     
           padding: 8px 16px;
     
           text-decoration: none;
     
           transition: background-color .3s;
     
           border: 1px solid #ddd;
     
       }   
     
       .page .active {
     
           background-color: #4CAF50;
     
           color: white;
     
           border: 1px solid #4CAF50;
     
       }  
     
       .page a:hover:not(.active) {background-color: #ddd;}   
     
       .center {text-align: center;}
    </style>
    </head>
    <body>
    <div class="center">
     
       <ul class="page">
     
           <li><a href="#">上一页</a></li>
     
           <li><a href="#">1</a></li>
     
           <li><a class="active" href="#">2</a></li>
     
           <li><a href="#">3</a></li>
     
           <li><a href="#">4</a></li>
     
           <li><a href="#">5</a></li>
     
           <li><a href="#">6</a></li>
     
           <li><a href="#">7</a></li>
     
           <li><a href="#">8</a></li>
     
           <li><a href="#">下一页</a></li>
     
       </ul>
     
      </div>
    </body>
    </html>

文章评论

    尚未注册畅言帐号，请到后台注册

相关文章