找回密码
 立即注册
即日起,论坛关闭新用户注册和登录,论坛相关的贴子保留查阅和下载。获得授权后,有技术问题可联系微信 13199509559 一对一解决。 2024-3-12
查看: 6228|回复: 0

OURPHP 翻页(上一页下一页)列表CSS样式大全

130

主题

130

主题

130

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
698
ourphp 发表于 2017-4-19 09:34:34 | 显示全部楼层 |阅读模式
OURPHP V1.7.1以后 增加了可以直接控制翻页的样式。这样就更方便的去开发翻页样式和模板风格配套了。

我们在后台->全局->翻页按钮样式中  来修改自已喜欢的风格样式。
这里面要用到的是 CSS
界面如图:
1.jpg
我们只需要去修改它的CSS样式就可以控制前台翻页的显示样式了。

我们也会不定期的在此贴来发布翻页样式

默认样式:
  1. <style type="text/css">.ourphp_page { font-size:14px; margin:20px auto 0 auto; float:left; clear:both;}.ourphp_page a { padding:8px 15px; float:left; margin-right:10px; border:1px #D1D1D1 solid; background:#f4f4f4; color:#666;}.ourphp_page .me { padding:8px 15px; float:left; margin-right:10px; border:1px #f4f4f4 solid; background:#D1D1D1; color:#666; font-weight:bold;}.ourphp_page a:hover {background:#D1D1D1; color:#666;}.ourphp_dian{ padding:8px 15px; float:left; margin-right:10px; color:#666;}.ourphp_page .disabled{ padding:8px 15px; float:left; margin-right:10px; border:1px #f4f4f4 solid; background:#D1D1D1; color:#666;}.ourphp_page .disabled2{background:#f4f4f4; color:#666;}</style>
复制代码


样式一:(需把上一页改成< 把下一页改成 >)
QQ截图20170419091944.jpg
  1. <style type="text/css">
  2.                                 .ourphp_page { font-size:14px; margin:0 auto; height:auto; overflow:hidden; padding:10px 0; width:300px;}
  3.                                 .ourphp_page a { text-decoration:none; display:block; float:left; margin-right:10px; padding:2px 10px; background:#FFF; color:#666;}
  4.                                 .ourphp_page a:hover { background:#f4f4f4;}
  5.                                 .ourphp_page .me { float:left; padding:2px 15px; background:#488FCD; color:#fff; margin-right:10px; font-weight:bold; border-radius: 4px;}
  6.                                 .ourphp_dian{ padding:2px 15px;color:#666; margin-right:10px; }
  7.                                 .ourphp_page .disabled{ float:left; padding:2px 10px; color:#666; margin-right:10px;}
  8.                                 .ourphp_page .disabled2{}
  9.                                 </style>
复制代码


样式二:(需把上一页改成< 把下一页改成 >)
QQ截图20170425103301.jpg
  1. <style type="text/css">
  2. .ourphp_page { font-size:14px; margin:20px auto 0 auto; float:left; clear:both;}
  3. .ourphp_page a { padding:8px 15px; float:left; margin-right:10px; border:1px #ccc solid; background:#fff; color:#333;}
  4. .ourphp_page .me { padding:9px 15px; float:left; margin-right:10px; background:#1679D4; color:#fff;}
  5. .ourphp_page a:hover {background:#D1D1D1; color:#333;}.ourphp_dian{ padding:8px 15px; float:left; margin-right:10px; color:#333;}
  6. .ourphp_page .disabled{ padding:9px 15px; float:left; margin-right:10px; background:#1679D4; color:#fff;}
  7. .ourphp_page .disabled2{background:#f4f4f4; color:#333;}
  8. </style>
复制代码

样式三:
123123123123.jpg
  1. <style type="text/css">
  2. .ourphp_page { font-size:14px; margin:20px auto 0 auto; float:left; clear:both;}
  3. .ourphp_page a { padding:7px 14px; float:left; margin-right:10px; border:1px #DDDDDD solid; background:#fff; border-radius:5px; color:#666;}
  4. .ourphp_page .me { padding:7px 14px; float:left; margin-right:10px; border:1px #DDDDDD solid; background:#DDDDDD; color:#666; border-radius:5px;}
  5. .ourphp_page a:hover {background:#ECECEC; color:#666;}
  6. .ourphp_dian{ padding:7px 14px; float:left; margin-right:10px; color:#666;}
  7. .ourphp_page .disabled{ padding:7px 14px; float:left; margin-right:10px; border:1px #DDDDDD solid; background: #DDDDDD; color:#666; border-radius:5px;}
  8. .ourphp_page .disabled2{background:#DDDDDD; color:#666; border-radius:5px;}
  9. </style>
复制代码

样式四: QQ截图20171208154707.jpg
  1. <style type="text/css">
  2. .ourphp_page { font-size:14px; margin:0 auto; height:auto; overflow:hidden; padding:10px 0; max-width:560px; text-align:center;}
  3. .ourphp_page a { text-decoration:none; display:block; float:left; padding:15px 20px; background:#FFF; color:#666; border-right:1px #ccc solid;}
  4. .ourphp_page a:hover { background: #CCC; color:#FFF;}
  5. .ourphp_page .me { float:left; padding:15px 20px; background: #C00; color:#fff; font-weight:bold; }
  6. .ourphp_dian{ padding:15px 20px;color:#666; float:left;border-right:1px #ccc solid;}
  7. .ourphp_page .disabled{ float:left; padding:15px 20px; color:#666; }
  8. .ourphp_page .disabled2{}
  9. </style>
复制代码


样式五:
QQ截图20180517210337.jpg
  1. <style type="text/css">.ourphp_page { font-size:14px; margin:20px auto 0 auto; float:left; clear:both;}.ourphp_page a { padding:5px 10px; float:left; margin-right:10px; color:#666;}.ourphp_page .me { padding:5px 10px; float:left; margin-right:10px; border:1px #e76d34 solid; border-radius:50%; color:#666; font-weight:bold;}.ourphp_page a:hover { color:#666;}.ourphp_dian{ padding:8px 15px; float:left; margin-right:10px; color:#666;}.ourphp_page .disabled{ padding:8px 15px; float:left; margin-right:10px; color:#666;}.ourphp_page .disabled2{ color:#666;}</style>
复制代码

样式六: QQ20180623-165443.png

  1. <style type="text/css">
  2. .ourphp_page { font-size:14px; margin:0 auto; height:auto; overflow:hidden; padding:10px 0; max-width:560px; text-align:center;}
  3. .ourphp_page a { text-decoration:none; display:block; float:left; padding:7px 15px; background:#FFF; color:#666; text-decoration: underline;border:1px #ccc solid; float:left;}
  4. .ourphp_page a:hover { background: #CCC; color:#FFF;}
  5. .ourphp_page .me { float:left; padding:8px 15px; background: #C00; color:#fff; font-weight:bold;text-decoration: underline; margin:0 5px;  float:left;}
  6. .ourphp_dian{ padding:7px 15px;color:#666; float:left; border:1px #ccc solid;  float:left;}
  7. .ourphp_page .disabled{ float:left; padding:7px 13px; color:#666; border:1px #ccc solid;  float:left;}
  8. .ourphp_page .disabled2{}
  9. </style>
复制代码


本贴不会关闭留言,如果你们有什么好的翻页样式。可以直接在本贴发布!





您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表