欢迎光临
我们一直在努力

DHTML实例解析:用HTC统一定制表单样式-网页设计,Dreamweaver

建站超值云服务器,限时71元/月

    在制作表单的时候,我们往往用css来重新定义表单元素(如输入框、按钮等)的样式,以便看起来更加美观。而表单中的很多不同元素(如输入框、提交按钮、单选框)使用的是一个标记--input,这就意味着,我们在css中无法通过只定义input标记来达到我们分别定义样式的目的。一般的做法是定义几种class,在写表单的时候,不同的元素使用不同的class。但是在表单较多的时候,这仍显得不是很方便。

  那么,有没有更省力的办法呢?答案是肯定的,一个简单的htc就可以解决这个问题。

  实例如下:

  htc代码:

  把上面这段代码保存成一个htc文件,比如保存成input.htc

  简单分析一下代码:事实上这仅仅是一段js,通过判断type(input是通过type属性判断是哪种表单域的,注意这里switch语句的使用)来决定使用什么样式。是不是很简单?

  htc文件写好之后,接下来我们要用css的行为(behavior)来调用这个htc文件,调用的css语句如下:

  input { behavior:url(input.htc) } /*这里假设input.htc与网页在同一目录下*/

  我们看到,现在我们是定义了整个input标记的样式,而具体什么表单元素使用什么样式,则是通过js在htc文件中判断并定义的。

   怎么样,我们是不是已经通过这样一个简单的实例初步领略到了htc的魅力呢?

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » DHTML实例解析:用HTC统一定制表单样式-网页设计,Dreamweaver
分享到: 更多 (0)

相关推荐

  • 暂无文章