立即登录 注册新帐号

http://www.chutianz.com - 楚天站长站

会员投稿 匿名投稿 投稿指南 RSS订阅 楚天站长站推荐:
搜索: 您的位置主页 > 设计在线 > 网页设计 > 阅读资讯:css分页样式 带有鼠标效果功能

css分页样式 带有鼠标效果功能

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,

 责任编辑:靓哥
  • 上一篇:新闻网站首页设计要具备那些原则
  • 下一篇:鼠标形状特效,鼠标指针源码,鼠标特效变形
  • 相关文章列表                                                                                     收藏 - 挑错 - 推荐 - 打印
    评论总数: [ 查看全部 ] 网友评论