你的位置：首页 >> 网页设计 >> 网页设计网站制作CSS中的行为——HTC
网页设计网站制作CSS中的行为——HTC
作者： 北京网站建设 日期：2008-03-27 06:14:05 来源： http://www.qitongnet.com
最近对这些CSS中的行为有点兴趣，看了些文档作了个表单鼠标滑过效果。当然HTC的用途，大家最喜欢的要数自制组建，自定义标签了。
中国站长.站
说明： Chinaz@com
HTC是HTML component的缩写，是IE5.0的主要扩展之一，除了具备一般组件的可重用优点之外，还具有易于开发使用等优点，因为需要引入外部文件，这里就不举例了，宝库里有例子。
中.国 www.qitongnet.com. 北京网站制作站长站
控件和组件 中国.站.长站
HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀。 中.国.站.长.站 网站制作
关于demo，我看到一些表单的输入框，有鼠标滑过效果，或者背景变色或者边框变色。使用:hover很容易实现，可惜MS IE7以前的浏览器不能支持，那么就单独给IE5.+使用HTC定义鼠标行为。其实这个实用JS实现也挺容易，我就想拿HTC练练手。先看看效果？ 站长.站
下面是代码 中国.站.长站
XHTML结构来自ALA的Prettier Accessible Forms。这里多说一嘴，建议大家以后做表单的时候多采用下面的结构，Strict型xhtml建议：
Chinaz^com
|
以下为引用的内容：北京网页设计
<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> 北京网站设计
<legend>Is this address also your invoice » 网站制作
address?<em>*</em></legend> 北京网站设计
<label><input type="radio" » 北京网页设计
name="invoice-address" /> Yes</label> 北京网页设计
<label><input type="radio" » 中国站.长.站 北京网页设计
name="invoice-address" /> No</label> 北京网站设计
</fieldset> 网站制作
</li> 网站建设
</ol> 北京网站建设
</fieldset> 北京网页设计
HTC：input.htc<PUBLIC:COMPONENT> 网站制作
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" /> 北京网站设计
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" /> 北京网站设计
<SCRIPT LANGUAGE="JScript"> 北京网站设计
<!-- 网站建设 网站建设
function Hilite() 北京网页设计企通互联
{ 北京网页设计
// save original values 北京网站建设
element.style.border = "1px #f60 solid"; 网页设计
element.style.background = "#f5f5f5"; 北京网站设计
} Chinaz~com
function Restore() 企通互联
{ 网站设计
// restore original values 网站制作
element.style.border = "1px #ccc solid"; 网站制作
element.style.background = "#fff"; 北京网页设计
} 企通互联
--> 网站设计
</SCRIPT> 北京网站建设
</PUBLIC:COMPONENT> 站长.站
CSS 中国.站.长站
<style type="text/css"> 网站建设
<!-- 北京网页设计
*{color:#666; font-size:11px;font-family:Arial， Helvetica， sans-serif;} 网站制作
body{text-align:center;} 北京网站制作
fieldset{border:1px #eee solid; width:310px; margin:0 auto; padding:8px; text-align:left;} 网页设计
legend{padding:4px;} 北京网站设计
fieldset label{float:left; width:70px; text-align:right;padding:0 10px;} 北京网页设计
fieldset ol{list-style:none; margin:0; padding:0;} 北京网站制作
fieldset ol li{clear:both; line-height:20px;} 北京网站制作
fieldset ol li fieldset{width:280px;} 网站制作
input{behavior:url(input.htc); border:1px #ccc solid; background:#fff; width:160px;}/*Only for ie 5.0+*/ 北京网站建设
label input{width:14px;height:14px;border:0;} /*For input type is Radio*/ 北京网站建设
input:hover{border:1px #f60 solid;background:#f5f5f5;}/*For orther browsers*/ Chinaz@com 北京网站制作
em{color:#ff0000;} 北京网站建设
--> 网页设计 企通互联
</style> 站长.站
|
中国站长_站,为中文网站提供动力
企通互联
上一篇：北京网站设计Photoshop精细制作Vista风格网站导航条
下一篇：网站建设CSS中的行为——HTC