fg棋牌斗地主

會員投稿 匿名投稿 投稿指南 RSS訂閱 楚天站長站推薦:
搜索: 您的位置主頁 > 設計在線 > 網頁設計 > 閱讀資訊︰css分頁樣式 帶有鼠標效果功能

fg棋牌斗地主

2011-12-14 09:38:37 來源:本站整理 【 】 點擊:次 我要投稿 發表評論

這是個很不錯的CSS分頁樣式,大家如果有趣的話,可以放大分頁效果,為的是練習CSS布局,這個效果帶鼠標效果,在鼠標放上時,按鈕就會放大,移開的時候就還原了。大家可以測試下!

代碼如下︰

<div class="pagination">  
<ul>  
<li class="disablepage">上一頁</li>  
<li class="currentpage">1</li>  
<li><a href="#">2</a></li>  
<li><a href="#">3</a></li>  
<li><a href="#">4</a></li>  
<li><a href="#">5</a></li>  
<li><a href="#"></a></li>  
<li><a href="#">7</a></li>  
<li><a href="#">8</a></li>  
<li><a href="#">9</a>...</li>  
<li><a href="#">15</a></li>  
<li><a href="#">16</a></li>  
<li class="nextpage"><a href="#">下一頁</a></li>  
</ul>  
</div>

 CSS

  1. .pagination{   
  2. padding: 2px;   
  3. }   
  4.   
  5. .pagination ul{   
  6. margin: 0;   
  7. padding: 0;   
  8. text-align: left; /*Set to "right" to right align pagination interface*/   
  9. font-size: 12px;   
  10. }   
  11.   
  12. .pagination li{   
  13. list-style-type: none;   
  14. display: inline;   
  15. padding-bottom: 1px;   
  16. }   
  17.   
  18. .pagination a, .pagination a:visited{   
  19. padding: 0 5px;   
  20. border: 1px solid #9aafe5;   
  21. text-decoration: none;    
  22. color: #2e6ab1;   
  23. }   
  24.   
  25. .pagination a:hover, .pagination a:active{   
  26. border: 1px solid #2b66a5;   
  27. color: #000;   
  28. background-color: lightyellow;   
  29. }   
  30.   
  31. .pagination li.currentpage{   
  32. font-weight: bold;   
  33. padding: 0 5px;   
  34. border: 1px solid navy;   
  35. background-color: #2e6ab1;   
  36. color: #FFF;   
  37. }   
  38.   
  39. .pagination li.disablepage{   
  40. padding: 0 5px;   
  41. border: 1px solid #929292;   
  42. color: #929292;   
  43. }   
  44.   
  45. .pagination li.nextpage{   
  46. font-weight: bold;   
  47. }   
  48.   
  49. * html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/   
  50. margin-right: 5px;   
  51. padding-right: 0;   
  52. }  

.pagination ul{ margin: 0; padding: 0; text-align: left; /*Set to "right" to right align pagination interface*/ font-size: 12px; } .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; } .pagination a, .pagination a:visited{ padding: 0 5px; border: 1px solid #9aafe5; text-decoration: none; color: #2e6ab1; } .pagination a:hover, .pagination a:active{ border: 1px solid #2b66a5; color: #000; background-color: lightyellow; } .pagination li.currentpage{ font-weight: bold; padding: 0 5px; border: 1px solid navy; background-color: #2e6ab1; color: #FFF; } .pagination li.disablepage{ padding: 0 5px; border: 1px solid #929292; color: #929292; } .pagination li.nextpage{ font-weight: bold; } * html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/ margin-right: 5px; padding-right: 0; }

 

 顯示樣式


 

 

感謝 佚名 的投稿 本文僅代表作者觀點,與楚天站長站立場無關。

分享到︰

數據統計中!!

tags︰樣式,分頁,css,

 責任編輯︰靚哥
  • 上一篇︰新聞網站首頁設計要具備那些原則
  • 下一篇︰鼠標形狀特效,鼠標指針源碼,鼠標特效變形
  • 相關文章列表                                                                                     收藏 - 挑錯 - 推薦 - 打印
    評論總數︰ [ 查看全部 ] 網友評論