zoukankan      html  css  js  c++  java
  • 分页效果代码实例

    <nav class="pagenav clearfix">
    <a class='page-numbers' href='http://www.baidu.com/' title='第1页'>1</a>
    <a class='page-numbers' href='http://www.baidu.com/page/2' title='第2页'>2</a>
    <a class='page-numbers' href='http://www.baidu.com/page/3' title='第3页'>3</a>
    <span class='page-numbers current'>4</span>
    <a class='page-numbers' href='http://www.baidu.com/page/5' title='第5页'>5</a>
    <span class='right'><a class='page-numbers page-numbers-prev' href='http://www.baidu.com/page/3' title='上一页'>上一页</a>
    <span class="page-numbers-slash">/</span><a class='page-numbers page-numbers-next' href='http://www.baidu.com/page/5' title='下一页'>下一页</a></span>
    </nav>

    .pagenav {
    position: relative;
    z-index: 100;
    900px;
    margin: 30px;
    padding: 0 0 50px;
    text-align: left;
    font-weight: lighter;
    font-family: miranafont,"Hiragino Sans GB",STXihei,"Microsoft YaHei",SimSun,sans-serif;
    }
    .pagenav .page-numbers, .pagenav-search a {
    overflow: hidden;
    margin-right: 40px;
    height: 32px;
    color: #98a1b2;
    text-align: center;
    font-size: 18px;
    line-height: 32px;
    }
    .clearfix:before, .clearfix:after {
    display: table;
    content: " ";
    }
    .clearfix:after {
    clear: both;
    }
    .pagenav .page-numbers.current {
    color: #46b855;
    background:#f0f2f7;
    font-size: 30px;
    _border-bottom: 1px solid #46b855;
    }
    .right {
    float: right;
    }
    .pagenav .page-numbers.page-numbers-prev, .pagenav .page-numbers.page-numbers-next {
    margin-right: 0;
    }
    .page-numbers-slash {
    padding-right: 10px;
    padding-left: 10px;
    color: #98a1b2;
    }
    numbers.page-numbers-next {
    margin-right: 0;
    }

  • 相关阅读:
    hdu 4002 Find the maximum
    hdu 2837 坑题。
    hdu 3123
    zoj Treasure Hunt IV
    hdu 2053 Switch Game 水题一枚,鉴定完毕
    poj 1430 Binary Stirling Numbers
    hdu 3037 Saving Beans
    hdu 3944 dp?
    南阳oj 求N!的二进制表示最低位的1的位置(从右向左数)。
    fzu 2171 防守阵地 II
  • 原文地址:https://www.cnblogs.com/longhaolove/p/6001014.html
Copyright © 2011-2022 走看看