曲径通幽论坛

标题: 按钮样式举例 [打印本页]
作者: beyes    时间: 2015-12-25 17:00
标题: 按钮样式举例
下面举例对按钮进行样式描述。

考虑下面的代码：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7.         <style type="text/css">
  8.                 .ip { height:30px; width:200px; background-color:#033; border:none; color:#CCC;}
  9.                 .ip_over { height:30px; width:200px; background-color:#990; border:none; color:#CCC; cursor:pointer;}
  10.                
  11.          }
  12.     </style>

  14. </head>

  16. <body>
  17.         <input type="submit" value="注册" /> <br/> <br/>
  18.     <input type="submit" value="注册" class="ip" />        

  20. </body>
  21. </html>
复制代码


第 1 条 input 语句，定义了一个最为普通的按钮。

第 2 条 input 语句则是使用了样式描述。它有两个事件，当鼠标不在按钮上时(onMounseOut)时应用类名为 ip 的样式；当鼠标悬停在按钮上时（onMouseOver）应用类名为 ip_over 的样式。

效果如下图所示：[attach]4266[/attach]





欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2