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>

复制代码

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