福彩幸运武林开奖 ?
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > DIV+CSS模塊 >

DIV+CSS居中分頁代碼 居中的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.mcowk.com.cn/template/m693.shtml

我要分享到:

必備CSS教程 Essential CSS Tutorials

必備HTML基礎教程 Essential HTML Tutorials

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2014-05-22 16:56 原創:DIVCSS5
本文www.mcowk.com.cn DIVCSS5版權所有。

福彩幸运武林开奖