Koubei UED

Just another WordPress weblog

Posts Tagged ‘通用’

制作通用的Button

%e5%88%b6%e4%bd%9c%e9%80%9a%e7%94%a8%e7%9a%84button

我们经常使用到a,button,input等标签,通过css加背景等方式来实现按钮的效果。但是要做一个通用的样式类,又能保证在各个浏览器下表现一致,还能有很好的扩展性的按纽可不就那么容易了。好了废话少说。进入正题。

首先我们选择a和button两个标签作为通用按纽的外包装器。主要考虑到,在ie6不支持a以外的:hover伪类,使用a就可以对按钮做悬浮状态,这就是为什么选择他们做为最外层的包装器而不是span或者其他的标签。为什么不用input下面会详细说到。

先来认识一下button的类型(type),button,默认的类型。submit,该可以用来提交表单,功能同<input type=”submit” value=”提交” />。reset,可以用来恢复表单默认值。如下




之前说了,当button的type属性为submit的时候,同样可以对表单进行提交,那为什么要选择button,而不是input。原因有两点。

  1. 表单中,在css中可以通过标签名字来作为选择器,对输入框和按钮进行样式控制,在不支持css2属性选择器的浏览器中,这点非常重要。
  2. 可以在button内甚至可以嵌入div,p这样的标签标签,其扩展性那是相当的好。

但如果想让button在各个浏览器和各种操作系统下表现一致。还是一件比较让人头疼的事情。 阅读全文»