带来一篇CSS:网页表单完成鼠标悬停交互效果
大大缩减页面代码，提高页面浏览速度,缩减带宽成本;网页制造poluoluo文章简介：我们有无更好的举措来完成输出框input款式悬停交互的效果呢？我们有无更好的举措来完成输出框input款式悬停交互的效果呢？
制造表单的时分，完成鼠标悬停交互效果有多种办法:
1、在xhtml中间接写进onmou搜索引擎优化ver、onmou搜索引擎优化ut剧本就能够完成了，但如许就违反了web尺度所倡议的内容、体现相分别的准绳。今后若要对此举行修正也将会很烦琐。如许间接写进xhtml也会让页面代码增添，假如只是一个input输出框也许是无所谓的，假如是几十个几百个，增添的字节数就很宠年夜了。
2、在xhtml中到场小剧本，鼠标经由时能够切换CSS。详细内容请看这篇文章。固然完成了内容、体现相分别，今后的修正也会很便利。但一样会让页面代码增添。
我们有无更好的举措来完成输出框input款式悬停交互的效果呢？
我们明天就会商如许的办法，间接在CSS文件中写进悬停交互效果的小剧本。不仅完成了内容与体现分别，并且使xhtml代码减小，增进了代码重用、加倍的优化。
这一办法的道理，次要是使用CSS的expression，关于expression的更多先容，请看这篇文章。
input{star:expression(
onmou搜索引擎优化ver=function(){this.style.borderColor="#060"},
onmou搜索引擎优化ut=function(){this.style.borderColor="#c00"})}
下面的代码，声了然，当鼠标移上往的时分，边框的色彩是#060，当鼠标移除的时分边框的色彩是#c00。我们看一下运转效果：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>用CSS把持输出框input悬停交互款式</title><styletype="text/css"><!--input{border:1pxsolid#c00;}input{star:expression(onmou搜索引擎优化ver=function(){this.style.borderColor="#060"},onmou搜索引擎优化ut=function(){this.style.borderColor="#c00"})}--></style></head><body>姓名：<inputtype="text"/><br/>岁数：<inputtype="text"/><br/>性别：<inputtype="text"/><br/>手机：<inputtype="text"/><br/>地点：<inputtype="text"/><br/></body></html>
你也能够如许做
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>用CSS把持输出框input悬停交互款式</title><styletype="text/css"><!--input{border:1pxsolid#c00; background:#fff;}input{star:expression(onmou搜索引擎优化ver=function(){this.style.backgroundColor="#eee"},onmou搜索引擎优化ut=function(){this.style.backgroundColor="#fff"})}.in40{width:40px;}.in80{width:80px;}.in120{width:120px;}.in200{width:200px;}--></style></head><body>姓名：<inputclass="in80"type="text"/><br/>岁数：<inputclass="in40"type="text"/><br/>性别：<inputclass="in40"type="text"/><br/>手机：<inputclass="in120"type="text"/><br/>地点：<inputclass="in200"type="text"/><br/></body></html>
使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 可以使用 CSS 检查工具进行设计。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。
页:
[1]