小虾虎鱼

小虾虎鱼

不含图片的分页样式

作者 禾惠 发表于 2012/07/20,最后修改于 2012/07/20

此样式是针对ThinkPHP自带分页类而设计,自己记录下来以便以后使用,节省点时间。

分页的HTML代码:

<div class="page" style="margin-top:0;">
    <span class="page-inner">
        <span class="total">37 条记录 1/2 页</span>
        <a href="#">下一页</a>
        <span class="current">1</span>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </span>
</div>

分页的CSS样式:

.page{font:13px/1.5 verdana,arial;height:22px;margin-top:20px;text-align:center;}
.page-inner{display:inline-block;}
.page a,.page .page-inner span{float:left;padding:0 8px;text-decoration:none;line-height:22px;height:22px;overflow:hidden;margin:0 1px;}
.page a{color:#2084c6;background:#F0F3F9;border:1px #CCDDDD solid;}
.page a:hover{background:#666;color:#fff;border:1px #636363 solid;}
.page .current{background:#2084c6;color:#fff;border:1px solid #2084c6;}


穗溪原创,转载请注明 来自于小虾虎鱼 http://www.xiaoboy.com