CSS中的行为——HTC

CSS中的行为——HTC

最近对这些CSS中的行为有点兴趣,看了些文档作了个表单鼠标滑过效果。当然HTC的用途,大家最喜欢的要数自制组建,自定义标签了。

Quote

说明:

HTC是HTML component的缩写,

是IE5.0的主要扩展之一,

除了具备一般组件的可重用优点之外,

还具有易于开发使用等优点,

因为需要引入外部文件,这里就不举例了,宝库里有例子.

控件和组件

HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别,并且以“.htc”为后缀。

关于demo,我看到一些表单的输入框,有鼠标滑过效果,或者背景变色或者边框变色。使用:hover很容易实现,可惜MS IE7以前的浏览器不能支持,那么就单独给IE5.+使用HTC定义鼠标行为。其实这个实用JS实现也挺容易,我就想拿HTC练练手。先看看效果?

下面是代码

XHTML结构来自ALA的Prettier Accessible Forms。这里多说一嘴,建议大家以后做表单的时候多采用下面的结构,Strict型xhtml建议<form>下不可以直接放置表单元素。而用<ol>来组织多个表单也是合理的。

<fieldset>

 <legend>Delivery Details</legend>

 <ol>

 <li>

 <label for=”name”>Name<em>*</em></label>

 <input id=”name” />

 </li>

 <li>

 <label for=”address1″>Address<em>*</em></label>

 <input id=”address1″ />

 </li>

 <li>

 <label for=”address2″>Address 2</label>

 <input id=”address2″ />

 </li>

 <li>

 <label for=”town-city”>Town/City</label>

 <input id=”town-city” />

 </li>

 <li>

 <label for=”county”>County<em>*</em></label>

 <input id=”county” />

 </li>

 <li>

 <label for=”postcode”>Postcode<em>*</em></label>

 <input id=”postcode” />

 </li>

 <li>

 <fieldset>

第 1 2 页

CSS中的行为——HTC

相关文章:

你感兴趣的文章:

标签云: