分页样式的CSS怎么改

html-css013

分页样式的CSS怎么改,第1张

首先在列表模版写分页样式的时候把这段代码复制进去:

<div class="dede_pages">

<ul class="pagelist">

{dede:pagelist listitem="info,index,end,pre,next,pageno,option" listsize="5"/}

</ul>

</div>

然后在把css样式加入到你自己的css文件里面

.dede_pages{height:30pxbackground:#eeeeeemargin:15px 015px 12pxwidth:690pxfloat:lefttext-align:centerdisplay:inline

}

.dede_pages ul{

list-style-type: nonetext-align: center

}

.dede_pages ul li{

display: inline

}

.dede_pages ul li a{

background:#fffpadding:3px 5pxline-height:30pxmargin:0 2pxfont-family:Arial

}

.dede_pages ul li a:hover{

color:#690

text-decoration:none

padding:2px 4px 2px

}

.dede_pages ul li.thisclass,

.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{

background-color:#F8F8F8

padding:2px 4px 2px

font-weight:bold

}

.dede_pages .pageinfo{

line-height:21px

padding:12px 10px 12px 16px

color:#999

}

.dede_pages .pageinfo strong{

color:#555

font-weight:normal

margin:0px 2px

}

新建一个thinkphp项目tp,入口文件如下:

2

在数据库think下新建表qq_game,结构如下:

3

新建一个控制器AdminAction.class.php,位置如图所示:

4

在此控制器下新建函数beauty_page,用于美化分页;

未设置自定义分页时,函数如图:

模板页:tp/App/Tpl/Admin/beauty_page.html , 内容如图:

分页结果如下:

thinkphp中通过分页类Page提供的方法setConfig,来修改分页的设置:

比如:在代码 $pg = new Page($count, $per_page) 后插入下面的分页设置代码:

此时,分页显示结果如下(其中的上一页、下一页被改变):

Page类提供的setConfig方法,还可以设置theme 作为分页主题描述信息。

设置该属性可以改变分页的各个单元的显示位置,默认值是:

"%totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end%"

可以通过改变该值的样式改变分页的样式。

比如:在列表页添加样式:如下:

结果显示如下:

也可以给记录总数添加样式,如图,给当前记录数,添加样式:

在模板页添加样式,如图:

结果显示:

总结:可根据自己的爱好,自行添加样式,其中.pages a , .pages .current 是自带的,最好不要修改名称,可修改样式;如果不满意,可参考第11步,自行修改。