欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

div css分页排版代码,此居中分页效果为水平排版居中的,解决分页排版DIV CSS居中效果。非常简单实用的居中分页排版代码。

本分页代码特点:
1、纯DIV+CSS实现排版布局。非常简单实用。
2、本分页排版为水平平分居中的布局。
3、分页“上一页”、“首页”、“1”、“2”、“3”、“4”、“尾页”等数字均有边框。
4、鼠标悬停时,对应分页文字或数字背景变化。
5、没有超链接的文字灰色并有边框。

DIV CSS网页分页排版
DIV+CSS布局的水平居中的分页布局效果

完整HTML(DIV+CSS)代码:

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
  5. <title>居中分页DIV CSS  DIVCSS5在线案例演示</title> 
  6. <style> 
  7. a{ text-decoration:none} 
  8. .ep-pages{padding:10px 12px;clear:both;text-align:center;
    font-family:Arial, "\5B8B\4F53", sans-serif;font-size:14px;vertical-align:top} 
  9. .ep-pages a, .ep-pages span{display:inline-block;height:23px;line-height:23px;padding:0 8px;
    margin:5px 1px 0 0;background:#fff;border:1px solid #e5e5e5;overflow:hidden;vertical-align:top} 
  10. .ep-pages a:hover{background:#cc1b1b;border:1px solid #cc1b1b;text-decoration:none} 
  11. .ep-pages a, .ep-pages a:visited{color:#252525} 
  12. .ep-pages a:hover, .ep-pages a:active{color:#ffffff} 
  13. .ep-pages .current{background:#cc1b1b;border:1px solid #cc1b1b;color:#fff} 
  14. .ep-pages a.current, .ep-pages a.current:visited{color:#ffffff} 
  15. .ep-pages a.current:hover, .ep-pages a.current:active{color:#ffffff} 
  16. .ep-pages-ctrl{font-family:"\5B8B\4F53", sans-serif;font-weight:bold;font-size:16px} 
  17. .ep-pages-e5e5e5{color:#e5e5e5} 
  18. .ep-pages-all{font-size:12px;vertical-align:top} 
  19.  
  20. </style> 
  21. </head> 
  22. <body> 
  23. <div class="ep-pages"> 
  24.     <span class="ep-pages-e5e5e5">首页</span> <span class="ep-pages-ctrl ep-pages-e5e5e5">&lt;</span>
     <a href="#" target="_self" class="current">1</a> <a href="#" target="_self">2</a> <a href="#" target="_self">3</a>
     <span>...</span> <a href="#" target="_self" class="ep-pages-ctrl">&gt;</a> <a href="#" target="_self">尾页</a>
     <a href="#" target="_self" class="ep-pages-all">在本页阅读全文</a> 
  25. </div> 
  26.  
  27. </body> 
  28. </html> 

以上完整div css代码可以直接复制使用。

相关CSS教程
1、CSS文字居中
2、CSS布局居中
3、更多CSS分页模块

在线演示:查看案例

打包下载完整源代码

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m693.shtml