一款最简单的导航分页代码

HTML:

<div class="pages">
    <ul>
        <li><a href="">上一页</a></li>
        <li class="on"><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">下一页</a></li>
    </ul>
</div>

CSS代码：

/** 通用分页 **/
.pages{
    margin-top: 80px;
}
.pages ul{
    text-align: center;
    padding: 0;
    margin: 0;
}
.pages li{
    list-style: none;
    display: inline-block;
}
.pages a{
    display: block;
    padding: 8px 16px;
    color: #333;
    background-color: #e8e8e8;
    transition: all 0.4s;
}
.pages a:hover{
    text-decoration: none;
    color: #fff;
    background-color: #1d77d6;
}
.pages li.on a{
    background-color: #1d77d6;
    color: #fff;
}

另外PHPOK CMS写法:

<!-- php:$pagelist = phpok_page($pageurl,$total,$pageid,$psize,"prev=上一页&next=下一页&always=1") -->
<div class="pages">
    <ul>
        <!-- loop from=$pagelist key=$key value=$value id=$tmpid -->
        <li {if $value.type == 'num' && $value.status} class="on"{/if}><a href="{$value.url}">{$value.title}</a></li>
        <!-- /loop -->
    </ul>
</div>