仿163邮箱的按钮效果

  • 2007-11-17
  • 分类：XHTML+CSS
  • 作者：银子
  • 282 次查看

163邮箱是用JS来实现的，我这里用到了CSS伪类 hover

Demo http://www.qqdang.net/code/mail163/

HTML

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>163邮箱按钮</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="top">
  10. <div id="logo"><img src="163logo.gif" alt="logo" /></div>
  11. </div>
  12. <div id="nav">
  13. <ul>
  14. <li><a href="#"><span class="left"></span><span class="center">发送</span><span class="right"></span></a><span class="img1"></span></li>
  15. <li><a href="#"><span class="left"></span><span class="center">存草稿</span><span class="right"></span></a><span class="img2"></span></li>
  16. <li><a href="#"><span class="left"></span><span class="center">贺卡</span><span class="right"></span></a><span class="img3"></span></li>
  17. <li><a href="#"><span class="left"></span><span class="center">查词典</span><span class="right"></span></a><span class="img4"></span></li>
  18. </ul>
  19. </div>
  20. </body>
  21. </html>

CSS

  1. * {
  2. margin:0;
  3. padding:0;
  4. font-size:12px;
  5. }
  6.  
  7. #top {
  8. height:91px;
  9. background:url(f2.gif) repeat-x;
  10. }
  11.  
  12. #logo {
  13. padding:6px;
  14. }
  15.  
  16. #nav {
  17. height:37px;
  18. width:100%;
  19. background:url(f2.gif) repeat-x 0px -147px;
  20. }
  21.  
  22. #nav ul {
  23. list-style:none;
  24. float:left;
  25. margin-top:4px;
  26. }
  27.  
  28. #nav li {
  29. float:left;
  30. margin:0 6px;
  31. }
  32.  
  33. #nav li a {
  34. display:block;
  35. height:26px;
  36. text-decoration:none;
  37. color:#444;
  38. cursor:pointer;
  39. }
  40.  
  41. #nav li a span.center{
  42. height:26px;
  43. float:left;
  44. padding:6px 3px 0 28px;
  45. *padding:7px 3px 0 28px;
  46. width:100%;
  47. }
  48.  
  49. #nav li a:hover span.center{
  50. background:url(f2.gif) repeat-x 0px -250px;
  51. }
  52.  
  53. #nav li a span.left {
  54. float:left;
  55. width:5px;
  56. height:26px;
  57. }
  58.  
  59. #nav li a:hover span.left {
  60. background:url(f1.gif) no-repeat -757px -16px;
  61. }
  62.  
  63. #nav li a span.right {
  64. float:left;
  65. width:5px;
  66. height:26px;
  67. }
  68.  
  69. #nav li a:hover span.right {
  70. background:url(f1.gif) no-repeat -781px -16px;
  71. }
  72.  
  73. #nav li span.img1 {
  74. width:26px;
  75. height:13px;
  76. display:block;
  77. background:url(ico.gif) no-repeat -1318px -42px;
  78. position:relative;
  79. left:5px;
  80. bottom:20px;
  81. }
  82.  
  83. #nav li span.img2 {
  84. width:14px;
  85. height:13px;
  86. display:block;
  87. background:url(ico.gif) no-repeat -1360px -42px;
  88. position:relative;
  89. left:8px;
  90. bottom:20px;
  91. }
  92.  
  93. #nav li span.img3 {
  94. width:26px;
  95. height:13px;
  96. display:block;
  97. background:url(ico.gif) no-repeat -1393px -42px;
  98. position:relative;
  99. left:5px;
  100. bottom:20px;
  101. }
  102.  
  103. #nav li span.img4 {
  104. width:17px;
  105. height:13px;
  106. display:block;
  107. background:url(ico.gif) no-repeat -1434px -42px;
  108. position:relative;
  109. left:8px;
  110. bottom:20px;
  111. }
Tags : ,
0 条评论

浏览最多的10篇日志

评论最多的10篇日志

随机显示的10篇日志