推荐搜索: 魏义齐 网站防扒js微信号刷新 利用hbuilder打包APP的步骤清空

您当前的位置:首页 > 前端分享 > 正文

phpcms如何修改分页的样式

发布时间:2018-03-04 22:57:58作者:魏义齐阅读:(

本文为博主原创文章,未经博主允许不得转载。

方法有两个,一个是自定义,一个是利用phpcms本身自带的分页样式。

自定义列表分页样式的修改请看这篇文章:https://blog.sina.com.cn/s/blog_46444bac01016475.html#post

利用本身自带的分页样式:这是我在做搜索功能时意外发现的。

大家都知道直接调用{$pages},出来的分页样式是最初始化的,而我们想写样式去操控它却发现没有能被操控的元素。我的博客上线之后分页样式一直很low,有人也建议我修改下分页的样式,但是自定义再修改样式很麻烦,所以一直搁置,后来给博客做搜索,意外的发现搜索列表页的样式还不错,于是就把代码复制粘贴过来用了。方法如下:

分页代码外面的盒子一定要加上id="pages"

然后找到默认模板里的search模块,因为样式引入文件在头部里,所以直接打开header.html就可以找到搜索列表页的样式

打开statics/css/search.css,直接搜索pages,对,就是下面这段:

/* pages */
#pages {
    padding: 14px 0 10px;
    font-family: 瀹嬩綋;
    margin: 10px;
}
#pages a {
    display: inline-block;
    width: 26px;
    height: 22px;
    line-height: 22px;
    background: #fff;
    border: 1px solid #e3e3e3;
    text-align: center;
    color: #333
}
#pages a.a1 {
    background: url(../images/search/admin_img/pages.png) no-repeat 0 5px;
    width: 56px;
}
#pages a:hover {
    background: #f1f1f1;
    color: #000;
    text-decoration: none;
}
#pages span {
    display: inline-block;
    width: 26px;
    height: 22px;
    line-height: 22px;
    background: #5a85b2;
    border: 1px solid #5a85b2;
    color: #fff;
    text-align: center;
}
.page .noPage {
    display: inline-block;
    width: 56px;
    height: 22px;
    line-height: 22px;
    background: url(../img/icu/titleBg.png) repeat-x 0 -55px;
    border: 1px solid #e3e3e3;
    text-align: center;
    color: #a4a4a4;
}

把这段代码复制到自己模板对应的样式里面,不要管它是什么东西,OK,我们可以看到样式还是不错的(分页出现的前提是列表页的num值)。如果你一定要自己写样式,就用上面第一种方法慢慢研究吧!

如果本文帮助到了你,请点击本站你感兴趣的广告赞助一下,谢谢!

上一篇:phpcms后台登录界面和管理中心的标题和版权修改 下一篇:slide Toggle()方法如何先后执行两次