免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: OURPHP 翻页（上一页下一页）列表CSS样式大全 [打印本页]
作者: ourphp    时间: 2017-4-19 09:34
标题: OURPHP 翻页（上一页下一页）列表CSS样式大全
OURPHP V1.7.1以后 增加了可以直接控制翻页的样式。这样就更方便的去开发翻页样式和模板风格配套了。

我们在后台->全局->翻页按钮样式中  来修改自已喜欢的风格样式。
这里面要用到的是 CSS
界面如图：

我们只需要去修改它的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>
复制代码


样式一：（需把上一页改成< 把下一页改成 >）

  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>
复制代码


样式二：（需把上一页改成< 把下一页改成 >）

  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>
复制代码

样式三：
  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>
复制代码

样式四：
  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>
复制代码


样式五:

  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>
复制代码

样式六:

  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>
复制代码


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









欢迎光临 免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (https://ourphp.net/club/) Powered by Discuz! X3.2