联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
通用分页样式代码分享,复制粘帖即可
类型:迅睿CMS 更新时间:2024-04-11 16:32:17 分页样式

通用分页样式代码分享,复制粘帖即可


看到论坛不少新手在咨询分页怎么调用,样式怎么写。

特意分享我常用的珍藏分页代码给各位新手使用,任何网站都适用,复制粘贴即可


分页效果:

根据自己的需求修改下颜色值即可

image

image


代码如下:

/*分页*/
<div class="pager">{$pages}</div>

1、有间隔CSS样式

/*分页*/
.pager {text-align: center; margin: 20px 0;}
.pager ul {display: flex; flex-wrap: wrap; justify-content: center}
.pager ul li {display: inline-block;}
.pager ul li a {padding: 5px 15px; margin: 15px 5px; border: #dddddd solid 1px; display: inline-block;}
.pager ul li a:hover {border: #3ea8e2 solid 1px; color: #3ea8e2}
.pager ul .active a {border: #3ea8e2 solid 1px; display: inline-block; background-color: #3ea8e2; color: #fff;}
.pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px;}
.pager ul .active a:hover {color: #fff; border: #3ea8e2 solid 1px !important;}

2、无间隔样式

/*分页*/
.pager {text-align: center; margin: 20px 0;}
.pager ul {display: flex; flex-wrap: wrap; justify-content: center}
.pager ul li {display: inline-block;}
.pager ul li a {padding: 5px 15px; border: #dddddd solid 1px; margin-left: -1px; display: inline-block;}
.pager ul li a:hover {border-color: #70c4f3; background-color: #70c4f3; color: #FFF}
.pager ul .active a {border: #3ea8e2 solid 1px; display: inline-block; background-color: #3ea8e2; color: #fff;}
.pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px; background-color: #fff}
.pager ul .active a:hover {color: #fff; border: #3ea8e2 solid 1px !important; background-color: #3ea8e2 !important}



感谢回复!




回帖
  • 大表哥
    #1楼    大表哥
    2022-02-25 11:40:17
    Chrome 0
    看看是什么
    ********此内容需要回复后才能看到********
  • 流星等夜
    #2楼    流星等夜
    2022-02-25 16:21:51
    Chrome 0
    看看是什么
  • yyy
    #3楼    yyy
    2022-03-05 10:54:40
    Firefox 97.0 0
    学习学习大哥方法
  • 14794781288
    #4楼    14794781288
    2022-03-06 21:25:54
    Chrome 0
    学习大哥方法
  • hellokitty
    #5楼    hellokitty
    2022-03-08 14:15:58
    Firefox 97.0 0
    学习学习大哥方法
  • 不懂
    #6楼    不懂
    2022-03-10 20:59:06
    Chrome 0
    学习一下学习一下学习一下
  • 黄国良
    #7楼    黄国良
    2022-03-13 11:05:29
    Chrome 0
    看看是什么
  • villain
    #8楼    villain
    2022-03-15 10:27:53
    Chrome 0
    来看看是啥
  • 大鱼
    #9楼    大鱼
    2022-03-16 15:52:11
    Chrome 0
    来看看是啥
  • bocang
    #10楼    bocang
    2022-03-16 16:10:33
    Chrome 0
    学习一下,看看是什么
  • 没熟的土豆
    #11楼    没熟的土豆
    2022-03-23 10:23:44
    Chrome 0
    学习一下,看看是什么
  • thysth
    #12楼    thysth
    2022-03-25 10:28:02
    Chrome 0
    学习一下学习一下!
  • 小白白
    #13楼    小白白
    2022-03-28 16:01:51
    Chrome 0
    学习学习大哥方法
  • 百科仙书
    #14楼    百科仙书
    2022-03-30 17:16:29
    Chrome 0
    啥东西
  • 梦幻
    #15楼    梦幻
    2022-03-31 11:21:25
    Chrome 0
    ********此内容需要回复后才能看到********
  • hades
    #16楼    hades
    2022-04-03 12:43:04
    Chrome 0
    看看
  • 隐藏的微笑
    #17楼    隐藏的微笑
    2022-04-09 11:12:01
    Chrome 0
    学习看看
    ********此内容需要回复后才能看到********
  • 懂站帝-网站开发优化
    #18楼    懂站帝-网站开发优化
    2022-05-06 19:49:27
    Chrome 0
    看看是什么东东
  • phpcms
    #19楼    phpcms
    2022-05-10 09:56:10
    Chrome 0
    • ********此内容需要回复后才能看到********
  • oldwan
    #20楼    oldwan
    2022-05-10 14:29:39
    Edge 0
    看看是什么
  • 海帝
    #21楼    海帝
    2022-05-14 13:23:14
    Chrome 0
    看看代码是什么样的
  • 云南麦田
    #22楼    云南麦田
    2022-05-15 15:28:19
    Chrome 0
    好方便谢谢分享
  • 找寻知音
    #23楼    找寻知音
    2022-05-16 21:29:12
    华为手机 0
    简单,方便
  • yangyan12138
    #24楼    yangyan12138
    2022-05-19 22:01:04
    Chrome 0
    看看是什么
  • 伦少
    #25楼    伦少
    2022-05-21 10:58:52
    Firefox 100.0 0
    先观为敬

  • superany
    #26楼    superany
    2022-05-27 13:57:01
    Chrome 0
    支持一下~~~~~~
  • 洛斯同学
    #27楼    洛斯同学
    2022-05-30 10:59:45
    Chrome 0
    学习学习。
  • 邓州市千诺网络科技有
    #28楼    邓州市千诺网络科技有
    2022-06-06 13:14:32
    Chrome 0
    学习学习!!!!!!!!!!!!
  • 1002054290
    #29楼    1002054290
    2022-07-02 15:31:25
    Chrome 0
    学习学习!!!!!!!!!!!!
  • zswqk1314
    #30楼    zswqk1314
    2022-08-20 08:25:42
    Chrome 0
    kankan
  • 18603858631
    #31楼    18603858631
    2022-08-25 17:19:00
    Chrome 0
    我还是没有成功,把
    <div class="pager">{$pages}</div>
    复制过去搭配着CSS还是不显示咋回事
  • 18603858631
    #32楼    18603858631
    2022-08-25 17:22:27
    Chrome 0
    <div class="pager">{$pages}</div>
    ********此内容需要回复后才能看到********
    ********此内容需要回复后才能看到********
  • 王小五
    #33楼    王小五
    2022-09-04 20:01:18
    Chrome 0
    ********此内容需要回复后才能看到********
  • 王小五
    #34楼    王小五
    2022-09-04 20:01:36
    Chrome 0
    ********此内容需要回复后才能看到********
  • 青橙
    #35楼    青橙
    2022-09-05 09:29:57
    Chrome 0
    学习一下。
  • 11daodao
    #36楼    11daodao
    2022-09-05 21:01:14
    Chrome 0
    瞅瞅怎么样
  • 张先生
    #37楼    张先生
    2022-09-09 14:10:15
    Chrome 0
    看看css放的在哪
  • yejiang
    #38楼    yejiang
    2022-09-15 03:12:16
    Chrome 0
    学习学习学习学习学习学习
  • 梦灭
    #39楼    梦灭
    2022-09-15 03:41:19
    Chrome 0
    看看是什么
  • 阿提亚
    #40楼    阿提亚
    2022-09-29 17:09:10
    Firefox 105.0 0
    前来学习,学习,学习
  • rczpzx
    #41楼    rczpzx
    2022-09-30 01:57:14
    Edge 0
    看着不错,先看看吧
  • 1211017642
    #42楼    1211017642
    2022-10-06 18:17:49
    Chrome 0
    看看是什么看看是什么
  • aireden
    #43楼    aireden
    2022-10-24 17:06:15
    Firefox 106.0 0
    看看是什么看看是什么
  • 爱情小丑
    #44楼    爱情小丑
    2022-11-02 16:05:13
    Chrome 0
    看看学习学习
  • langes
    #45楼    langes
    2022-11-05 22:27:06
    Edge 0
    学习一下看看
  • 不知名菜鸟
    #46楼    不知名菜鸟
    2022-11-07 23:30:00
    Chrome 0
    学习学习大哥方法
  • jm3q
    #47楼    jm3q
    2022-11-16 00:33:25
    Chrome 0
    看看学习学习
  • 黄金阳
    #48楼    黄金阳
    2022-11-17 11:20:32
    Chrome 0
    看看学习学习
  • 春春
    #49楼    春春
    2022-12-16 20:51:42
    Edge 0
    都是大佬,我看看
  • xyxsjgm
    #50楼    xyxsjgm
    2022-12-17 11:56:07
    Chrome 0
    学习一下,看一看
  • 程信~网站
    #51楼    程信~网站
    2022-12-29 14:48:33
    Firefox 108.0 0
    学习一下,看一看
  • gongying
    #52楼    gongying
    2023-01-03 11:33:08
    Chrome 0
    ********此内容需要回复后才能看到********
  • 天云
    #53楼    天云
    2023-01-08 16:05:27
    Chrome 0
    学习一下。看看内容
  • fallenjie
    #54楼    fallenjie
    2023-01-08 16:38:54
    Chrome 0
    ********此内容需要回复后才能看到********
    学习一下,看一看
  • 木木建站
    #55楼    木木建站
    2023-01-09 10:51:55
    Chrome 0
    学习一下,看一看
  • ydw101
    #56楼    ydw101
    2023-01-13 11:24:38
    Edge 0
    看下好不好用
  • sd053t
    #57楼    sd053t
    2023-01-19 22:24:40
    Chrome 0
    ********此内容需要回复后才能看到********
  • tsmupin
    #58楼    tsmupin
    2023-02-06 23:31:13
    Chrome 0
    学习一下,看一看
  • DiuDiu
    #59楼    DiuDiu
    2023-02-20 18:09:13
    Chrome 0
    学习一下,看一看
  • 陈连生
    #60楼    陈连生
    2023-02-21 14:51:30
    Chrome 0
    后端自定的页面如何搞分页代码
  • 明伦
    #61楼    明伦
    2023-02-22 10:08:55
    Chrome 0
    看看是什么
  • 婳沨
    #62楼    婳沨
    2023-03-04 20:12:51
    Safari 0

    好好好好好好好好好好好好


  • dhusi4521
    #63楼    dhusi4521
    2023-03-07 14:25:38
    Edge 0
    学习学习大哥方法
  • 穹苍
    #64楼    穹苍
    2023-03-09 10:12:56
    Chrome 0
    学习学习大哥方法
  • 穹苍
    #65楼    穹苍
    2023-03-09 10:13:26
    Chrome 0
    ********此内容需要回复后才能看到********
  • 布衣无言
    #66楼    布衣无言
    2023-03-09 16:58:59
    Chrome 0
    学习一下,看一看
  • 蓝色悠郁
    #67楼    蓝色悠郁
    2023-03-14 13:46:00
    Chrome 0
    向大佬们学习……
  • 一路往前
    #68楼    一路往前
    2023-03-22 17:39:43
    Chrome 0
    支持一下,看看
  • criminalist
    #69楼    criminalist
    2023-03-24 10:17:58
    Chrome 0
    学习一下看看
  • 从允
    #70楼    从允
    2023-03-27 14:21:12
    Chrome 0
    学习一下,看一看
  • aoo1
    #71楼    aoo1
    2023-04-04 16:46:28
    Chrome 0
    122112312312123123多试试wewewq额外
  • samshenli
    #72楼    samshenli
    2023-04-05 13:04:04
    Chrome 0
    学习一下,看一看
  • 李大仙儿
    #73楼    李大仙儿
    2023-04-19 08:53:34
    Chrome 0
    学习一下,看一看
  • zhenx
    #74楼    zhenx
    2023-04-23 22:00:23
    Firefox 112.0 0
    我也的学习一下啊。不然怎么办

  • 钊华有课
    #75楼    钊华有课
    2023-04-23 22:15:04
    Edge 0
    看看是什么
  • 莫得感情的鸭子
    #76楼    莫得感情的鸭子
    2023-04-29 14:34:46
    Chrome 0
    看看是什么
  • 汤上
    #77楼    汤上
    2023-05-01 00:01:35
    Chrome 0
    学习一下,看一看
  • yx999
    #78楼    yx999
    2023-05-05 15:47:49
    Chrome 0
    666666你撒大大说的
  • 想钱想疯了
    #79楼    想钱想疯了
    2023-05-10 20:51:59
    Edge 0
    学习学习,学习一下,看一看
  • 穹苍
    #80楼    穹苍
    2023-05-28 23:35:45
    Chrome 0
    学习一下,看看是什么
  • 汇选课
    #81楼    汇选课
    2023-06-03 17:17:04
    Edge 0
    看看样式怎么样
  • monface
    #82楼    monface
    2023-06-06 09:21:43
    Chrome 0
    这个就非常不错了,是修改那个文件呢?
  • q502290005
    #83楼    q502290005
    2023-06-07 10:42:03
    Chrome 0
    瞅瞅怎么样
  • itpass
    #84楼    itpass
    2023-06-07 14:13:43
    Firefox 113.0 0
    看看是什么
  • smjlovexc
    #85楼    smjlovexc
    2023-06-14 17:50:47
    Chrome 0
    我想看看,学习一下
  • 小陆
    #86楼    小陆
    2023-06-16 10:59:30
    Chrome 0
    学习一下学习一下!
  • 懒虫b
    #87楼    懒虫b
    2023-06-21 17:33:32
    Chrome 0
    学习学习大哥方法
  • zzqllly
    #88楼    zzqllly
    2023-06-29 16:02:04
    Chrome 0
    学习一下学习一下!
  • 技术爱好者
    #89楼    技术爱好者
    2023-07-16 22:04:20
    Chrome 0
    回复就可以看了哦哦

  • 小哥哥
    #90楼    小哥哥
    2023-07-17 13:53:00
    Chrome 0
    学习学习学习
  • 隽
    #91楼    隽
    2023-07-28 01:03:50
    Chrome 0
    学习一下,看看是什么
  • 走廊灯关上
    #92楼    走廊灯关上
    2023-08-15 11:03:20
    Chrome 0
    隐藏了什么
  • 老头子
    #93楼    老头子
    2023-08-16 15:01:33
    Edge 0
    学习以下看看。
  • 魂
    #94楼    魂
    2023-08-16 15:23:49
    Chrome 0
    学习一下学习一下
  • 8834629
    #95楼    8834629
    2023-08-17 09:32:52
    Chrome 0
    看看隐藏的什么
  • 一个小白的自白
    #96楼    一个小白的自白
    2023-09-05 16:44:28
    Firefox 117.0 0
    学习一下,看一看
  • 将来
    #97楼    将来
    2023-09-14 13:13:04
    Chrome 0
    学习一下如何做 😀
  • mlilicty
    #98楼    mlilicty
    2023-09-22 10:25:16
    Edge 0
    感谢分享 试试看
  • 天友网
    #99楼    天友网
    2023-09-30 08:58:14
    Chrome 0
    看看是什么
  • 笨笨
    #100楼    笨笨
    2023-10-07 10:29:44
    Chrome 0
    学习一下,看一看
  • TUMI
    #101楼    TUMI
    2023-10-15 12:19:47
    Chrome 0
    看看是什么
  • 唐
    #102楼    唐
    2023-10-18 15:08:11
    Chrome 0
    学习一下学习一下学习一下
  • 小飞鸡。
    #103楼    小飞鸡。
    2023-10-18 17:31:26
    Chrome 0
    看看是什么东东
  • TTQOO
    #104楼    TTQOO
    2023-10-26 10:25:14
    Chrome 0
    谢谢,感谢分享~~~~~~~~~~~~~~~~~~~
  • 微设计
    #105楼    微设计
    2023-10-28 21:51:40
    Edge 0
    我也回复一下
  • 南京市长江大桥
    #106楼    南京市长江大桥
    2023-11-02 10:22:49
    Chrome 0
    大表哥 看看什么
  • 南京市长江大桥
    #107楼    南京市长江大桥
    2023-11-02 10:24:13
    Chrome 0
    ********此内容需要回复后才能看到********
    王小五
  • Hi
    #108楼    Hi
    2023-11-04 15:52:42
    Chrome 0
    看一下哦 哦😏
  • Sanys
    #109楼    Sanys
    2023-11-06 20:27:30
    Chrome 0
    学习 学习!看看楼主的思路
  • xingyunyijiu
    #110楼    xingyunyijiu
    2023-11-13 15:48:55
    Chrome 0
    学习一下,看一看
  • 麦没有兜
    #111楼    麦没有兜
    2023-11-20 14:43:17
    Chrome 0
    看看是什么
  • qq584081347
    #112楼    qq584081347
    2023-11-22 19:27:32
    Chrome 0
    学习一下学习一下学习一下
  • 18600969886
    #113楼    18600969886
    2023-11-29 11:53:13
    Chrome 0
    学习一下,看一看
  • fengcar123
    #114楼    fengcar123
    2023-12-01 17:36:15
    Chrome 0
    大哥方法大哥方法
  • jieke2233
    #115楼    jieke2233
    2023-12-02 09:25:43
    Chrome 0
    学习一下,看一看
  • 业余选手
    #116楼    业余选手
    2023-12-07 10:20:43
    Firefox 120.0 0
    前来学习,学习,学习
  • Allen白羽
    #117楼    Allen白羽
    2023-12-12 14:55:44
    安卓手机 0
    学习一下,看一看
  • cat2007
    #118楼    cat2007
    2023-12-26 15:21:47
    Chrome 0
    学习学习下看看
  • 小萌娃
    #119楼    小萌娃
    2023-12-28 21:23:46
    Chrome 0
    什么好东西 观看下 嘎嘎
  • twtyydbj
    #120楼    twtyydbj
    2023-12-30 20:41:07
    Chrome 0
    学习一下....哦
  • 呼嗬哈嗤
    #121楼    呼嗬哈嗤
    2024-01-04 14:12:46
    Edge 0
    😀 学习一下,看一看
  • gaobei
    #122楼    gaobei
    2024-01-15 11:01:04
    Chrome 0
    学习看看,栏目内容分页
  • gaobei
    #123楼    gaobei
    2024-01-15 11:01:37
    Chrome 0
    大表哥
  • gaobei
    #124楼    gaobei
    2024-01-15 11:02:28
    Chrome 0
    ********此内容需要回复后才能看到********
    回复看看
  • 麦尖
    #125楼    麦尖
    2024-01-18 10:36:34
    Chrome 0
    学习学习大哥方法
  • tpxcm
    #126楼    tpxcm
    2024-01-24 11:19:51
    Chrome 0
    究竟隐藏了什么
  • cxsy123
    #127楼    cxsy123
    2024-02-07 16:24:56
    Chrome 0
    学习一下,看一看
  • jiushuo19
    #128楼    jiushuo19
    2024-02-16 15:58:57
    Chrome 0
    学习一下,看一看
  • 3389808553
    #129楼    3389808553
    2024-02-21 10:56:09
    Edge 0
    嗯???似曾相识啊
  • 爱学习的小白
    #130楼    爱学习的小白
    2024-02-23 22:11:46
    Chrome 0
    正需要,感谢分享
  • xyz1113
    #131楼    xyz1113
    2024-02-26 15:32:27
    Firefox 123.0 0
    学习下,看一看

  • 微信20329916
    #132楼    微信20329916
    2024-02-27 11:43:53
    Chrome 0
    学习一下,看一看
  • 微信20329916
    #133楼    微信20329916
    2024-02-27 11:45:08
    Chrome 0
    大表哥 学习一下,看一看
  • eawea
    #134楼    eawea
    2024-02-27 12:20:55
    Chrome 0
    分页。谢谢分享。。
  • tangyan822
    #135楼    tangyan822
    2024-03-01 08:28:16
    Chrome 0
    看看是什么 。好学习一下
  • terryri
    #136楼    terryri
    2024-03-01 19:34:58
    Chrome 0
    学习一下,看一看
  • terryri
    #137楼    terryri
    2024-03-01 19:47:53
    Chrome 0
    学习一下,看一看
  • xr510649452
    #138楼    xr510649452
    2024-03-05 15:56:09
    Chrome 0
    看看是什么
  • Hi
    #139楼    Hi
    2024-03-19 22:16:59
    Chrome 0
    18603858631 看看有什么,
  • fsolid
    #140楼    fsolid
    2024-03-22 17:27:28
    Chrome 0
    我的翻页为撒不显示呢?
  • 学习狂人
    #141楼    学习狂人
    2024-03-22 21:25:16
    Chrome 0
    先回为敬,努力学习
  • 小松针
    #142楼    小松针
    2024-03-27 20:39:31
    Chrome 0
    学习学习学习
  • 爱客
    #143楼    爱客
    2024-03-28 20:40:59
    Chrome 0
    学习一下,看一看
  • 猴子阿
    #144楼    猴子阿
    2024-04-02 21:38:25
    Chrome 0
    看看是什么
  • milky
    #145楼    milky
    2024-04-05 08:39:30
    Firefox 125.0 0
    正在学习,尝试了,还有很多要做的。谢谢
  • Hypoxia
    #146楼    Hypoxia
    2024-04-11 16:32:17
    Chrome 0
    大表哥 kanxi看下