用HTC统一定制表单样式_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

用HTC统一定制表单样式

作者：闵涛文章来源：闵涛的学习笔记点击数：684 更新时间：2009/4/23 12:27:01

在制作表单的时候，我们往往用CSS来重新定义表单元素（如输入框、按钮等）的样式，以便看起来更加美观。而表单中的很多不同元素（如输入框、提交按钮、单选框）使用的是一个标记－－Input，这就意味着，我们在CSS中无法通过只定义Input标记来达到我们分别定义样式的目的。一般的做法是定义几种Class，在写表单的时候，不同的元素使用不同的Class。但是在表单较多的时候，这仍显得不是很方便。那么，有没有更省力的办法呢？答案是肯定的，一个简单的HTC就可以解决这个问题。

实例如下： htc代码：＜script language=javascript＞
switch(type)
{
case 'text':
case 'password': //文本输入框和密码输入框的样式
style.border="1px solid #000000";
style.backgroundColor="#FFFFFF";
style.height="18px";
style.font="normal 12px 宋体";
style.color="#000000";
break;

case 'submit':
case 'reset':
case 'button': //按钮类的样式（不包括图片按钮）
style.border="1px solid #000000";
style.backgroundColor="#CCCCCC";
style.height="18px";
style.font="normal 12px 宋体";
style.color="#000000";
break;

default: ;//对于象单选框多选框等上面没有出现过的元素，我们使用默认样式。
}
＜/script＞把上面这段代码保存成一个HTC文件，比如保存成input.htc。简单分析一下代码：事实上这仅仅是一段JS，通过判断type（Input是通过type属性判断是哪种表单域的，注意这里switch语句的使用）来决定使用什么样式。是不是很简单？ HTC文件写好之后，接下来我们要用CSS的行为（behavior）来调用这个HTC文件，调用的CSS语句如下： input { behavior:url('input.htc') } /*这里假设input.htc与网页在同一目录下*/ 我们看到，现在我们是定义了整个Input标记的样式，而具体什么表单元素使用什么样式，则是通过JS在HTC文件中判断并定义的。怎么样，我们是不是已经通过这样一个简单的实例初步领略到了HTC的魅力呢？

[网页制作]DHTML实例解析:用HTC统一定制表单样式

教程录入：mintao 责任编辑：mintao

上一篇教程：菜鸟学用Dreamweaver MX 2004行为

下一篇教程：除DW MX 2004表格宽度辅助

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……