thinkphp3.2简洁美观的分页样式

风格一

分页模块:

<div class="tp_page">
    {$pageShow}
</div>

分页样式:

.tp_page{
    width: 100%;
    text-align: center;
}
.tp_page>div{
    display: inline-flex;
}
.tp_page a,.tp_page span{
    display: block;
    width: 24px; 
    height: 24px;
    border: #ccc 1px solid;
    float: left;
    border-radius: 5px;
    line-height: 24px;
    text-align: center;
    -background: #2E2D3C;
    -color: white;
    cursor: pointer;
    margin: 2px;
}
.tp_page .current{
    background-color: darkgoldenrod;
    color: white;
    cursor: no-drop;
}

最终效果:

版权声明: 此文为本站源创文章[或由本站编辑从网络整理改编], 转载请备注出处:http://www.sindsun.com/article-details-40.html [若此文确切存在侵权,请联系本站管理员进行删除!]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

微信小程序从零开始开发步骤(四)自定义分享的功能

1624
来自专栏极客编程

Angular 5 快速入门与提高

尽管被称为Angular5,实际上它只是这个诞生于2012年的前端框架的的第四个版本:

1672
来自专栏杨逸轩 ' sBlog

常见的个人博客系统

3606
来自专栏IT大咖说

京东小程序的三生三世

摘要 作为中国最大的自营式电商企业,京东小程序的开发也是一波三折。 “不是每个人都能看透这三生三世的爱恨交织。” ? 前世 ? 之前京东购物入口的首页还是比较复...

3959
来自专栏狂码一生

QT5中操作QWidgetItem下的集合元素

1343
来自专栏Android自学

解决 WordPress 后台加载非常缓慢/打不开问题

1243
来自专栏PHP在线

微信小程序

微信小程序今天正式上线了,但是怎么看到呢? 第一:升级微信到最新的版本:6.5.3 第二:在微信中搜索“小程序示例”,在搜索结果中找到黑色图标S形状点开它,进入...

2.5K10
来自专栏建站相关

如何通过 cos 托管静态网站

对象存储(Cloud Object Storage,简称:COS)是腾讯云提供的面向非结构化数据,支持 HTTP/HTTPS 协议访问的分布式存储服务,它能容纳...

1840
来自专栏cloudskyme

flex版的流程设计器

第一章 介绍 1.1 编写目的 介绍流程设计软件并且简单附上使用说明。因为还不是很完善,所以希望大家能多提出自己的意见的见解。 1.2 基本结构 ? 1.3 使...

4374
来自专栏微信平台开发

【腾讯游戏人生】微信小程序开发总结

目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。

5858

扫码关注云+社区