DHTML实例解析:用HTC统一定制表单样式
作者:钟钟 来源:天极设计在线 发布时间:2007-11-04 18:48:00
标签:HTC,DHTML,css,样式
在制作表单的时候,我们往往用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的魅力呢?
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 简介使用百度深度学习框架paddlepaddle对人像图片进行自动化抠图安装根据PaddlePaddle官网命令安装如pip install
- 本文实例讲述了php设计模式之适配器模式。分享给大家供大家参考,具体如下:星际的很多兵种,都有至少一项特殊技能。而且有些兵种的技能是相同的,
- 本文实例为大家分享了js实现黑白div块画空心图形的具体代码,供大家参考,具体内容如下<!DOCTYPE html><ht
- 安装Python环境ANACONDA是一个Python的发行版本,包含了400多个Python最常用的库,其中就包括了数据分析中需要经常使用
- 学习Python的过程中,我们会遇到Excel的读写问题。这时,我们可以使用xlwt模块将数据写入Excel表格中,使用xlrd模块从Exc
- 我们假设TPCoins的发起人最初向已知客户 Dinesh 发出500个TPCoins.为此,他首先创建一个Dinesh
- 1.CephFS文件存储核心概念1.1.CephFS文件存储简介官方文档:docs.ceph.com/en/pacific/&hel
- 环境:ubuntu 16.04 python3.5 pycharm包 : wave pyaudio sys上代码:AudioPlayer.p
- 新建yaml文件在上文我们的 go学习笔记:使用 consul 做服务发现和配置共享 这里我们单独来用viper实现读取consu
- 分享一个新增备案不关站的代码,这里只是转帖,没有亲自实验,如有问题请及时反馈。其实就是利用API接口的IP查询地址来限制首页不被所在省的IP
- #1042 - Can't get hostname for your address 使用IP链接或域名链接都可能遇到
- 1、在模块中,我们需要判断__name__是否被赋值为“__main__”。python fibo.py <arguments>
- Anaconda 是一个旗舰版的python安装包, 因为普通的python没有库, 如果需要安装一些重要的库, 要经常一个一个下载,会非常
- 一. SQL2008卸载。1.从控制面板卸载1)点击计算机右下角“开始”,点击“控制面板”2)点击“卸载
- MySQL binlog记录的所有操作实际上都有对应的事件类型的,譬如STATEMENT格式中的DML操作对应的是QUERY_EVENT类型
- MySQL 触发器MySQL 数据库中触发器是一个特殊的存储过程,不同的是执行存储过程要使用 CALL 语句来调用,而触发器的执行不需要使用
- 1、首先,根据自己的机子到MySQL官网下载对应的数据库https://dev.mysql.com/downloads/mysql/2、利用
- CentOS mysql安装还是很常用的软件,我就学习如何CentOS mysql安装,在这里拿出来和大家分享一下,希望对大家有用。Cent
- 模块导入方式: import osos模块是Python标准库中的一个用于访问操作系统相关功能的模块,os模块提供了一种可移植的使
- 目录一.准备工作二.预览1.启动2.添加城市3.展示多个城市天气三.设计流程1.获取城市天气信息过程四.源代码1.Weather_Tool-