| 首页 | 新闻 | 网页 | 设计 | 色彩 | 原创 | 视觉 | 素材 | 动漫 | 酷站 | 策划 | 文案 | 访谈 | 运营 | 编程 | 数据库 | 服务器 | 下载 | 图库 | 
您的位置: 幽幽天空 > 网页 > 网页制作 > HTMLCSS教程 > 文章正文 用户登录
网页菜单之---树形
用XSLT生成网页菜
网页菜单详解(4):
网页菜单详解(3):
网页菜单详解(2):
网页菜单详解(1):
网页菜单之---"抄

DHTML实例解析:用HTC统一定制表单样式           

DHTML实例解析:用HTC统一定制表单样式

作者:钟钟 来源:天极设计在线 更新:2005-3-30 13:31:11 错误报告 我要投稿
    在制作表单的时候,我们往往用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的魅力呢?

文章录入:skyuu    责任编辑:skyuu 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
    姓名:  评 分: 1分 2分 3分 4分 5分
     
  • 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
  • 用户需对自己在使用幽幽天空服务过程中的行为承担法律责任。
  • 本站管理员有权保留或删除评论内容。
  • 评论内容只代表机友个人观点,与本网站立场无关。