php分页设计美化,国产PHP框架之ThinkPHP各模块开发系列十七,美化分页显示

上节我们制作了分页显示,但是thinkphp本身自带的分页效果不忍直视,美观度严重不足,本节我们来美化一下显示效果.重点是学习一下分页效果的美化办法.

4f720bf00d66c35b9a0cc1c5c32ec72f.png

分页后果

基本思路

我们利用开源HTML5跨屏前端框架---amazeui.利用此框架内置的分页显示效果,改动Page.class.php,实现分页效果的美化.

一、引入amaze ui

我们下载Amaze UI紧缩包,解压后,拷贝assets目录到public文件夹内.然后打开fenye.html,引入assets文件夹内的amazeui.css,代码如图:

fc3b16a5554f96c48c64b520b814bec4.png

引入css

二、熟悉Amaze UI分页代码

我们打开Amaze UI官网,查看分页显示后果图及相关代码,了解其分页css设计.

39b9b6c035ee65fd549b0601e315585f.png

html分页后果

三、修改Page.class.php

Page.class.php文件是thinkphp的核心文件,为了避免修改出现不测,我们在修改前先备份一下.

通过上面察看,我们发现Amaze UI的分页显示,利用

  • ,并通过设置相应的class来设置分页显示效果的.

    我们找到Page.class.php中的show办法.然后找到“替换分页内容”的代码,修改代码如图:

    ac0acdb49150b314a73ba8ddb607d8d4.png

    php代码改动

    然后找到“//上一页,//下一页,//第一页,//最后一页,//数字连接”分离进行修改:

    ec82e997c0bae12174812e7aaabc112c.png

    1d9cc53a96717ecb789e7c799b73fb06.png

    php代码改动

    如果您仔细察看的话,会发现,我们其实都在所有和标签外加上了

  • 和.

下面我们在浏览器中打开http://localhost/tp3/admin.php/Admin/Fenye/fenye,如果配置正确的话显示后果如下:

9177dee38f4b75ebbfdee5665a71190c.png

最终后果

接下来我们来看几位即有颜值又有实力的法式猿.

代码女神---赵洁琼

fbee9f257b03cea48688c2b0c2bedd57.png

代码女神---赵洁琼

2edb3591ec81d7b84c335a6539b08138.png

代码女神---赵洁琼

被著名游戏媒体网站Kotaku评为十年来最具影响的十位游戏界女性之一,也是其中唯一的女法式员---余国荔

915387e5921b692482a7703b092e5059.png

余国荔

fca044b26e923ed08f3a62b21284efb0.png

余国荔喜欢的话,可以存眷我们.

如有疑问可以留言,我们会第一时间进行反馈.感激!

本文由头条号“性命一路前行”原创,请勿转载.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值