今天来学习JS+DIV表单实例——鼠标移上背景变色和笔墨提醒

显示全部楼层 · 发表于 2015-1-16 10:37:05

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

使用Div+CSS所费功夫与收入不成正比，利用table可以大大减少工作量。而上市公司的期望目标不同对Div+css的认同和投入要大一些。

一个表单计划实例，鼠标移上背景变色，同时呈现笔墨提醒。间接看演示吧！
<!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>JS+CSS完成的一种交互体验</title><style>@charset"utf-8";/*元素初始值*/html{background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin:0px;padding:0px;}p{cursor:text;}h1,h2,h3,h4,h5,h6{font-size:100%;}ol,ul{list-style-type:none;}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}table{border-collapse:collapse;}fieldset,img{border:0;}img{display:block;}caption,th{text-align:left;}body{position:relative;font-size:62.5%;font-family:"宋体"}a{text-decoration:none;}/*demo所用元素值*/#need{margin:20pxauto0;width:610px;}#needli{height:26px;width:600px;font:12px/26pxArial,Helvetica,sans-serif;background:#FFD;border-bottom:1pxdashed#E0E0E0;display:block;cursor:text;padding:7px0px7px10px!important;padding:5px0px5px10px;}#needli:hover,#needli.hover{background:#FFE8E8;}#needinput{line-height:14px;background:#FFF;height:14px;width:200px;border:1pxsolid#E0E0E0;vertical-align:middle;padding:6px;}#needlabel{padding-left:30px;}#needlabel.old_password{background-position:0-277px;}#needlabel.new_password{background-position:0-1576px;}#needlabel.rePassword{background-position:0-1638px;}#needlabel.email{background-position:0-429px;}#needdfn{display:none;}#needli:hoverdfn,#needli.hoverdfn{display:inline;margin-left:7px;color:#676767;}</style><scripttype="text/javascript">functionsuckerfish(type,tag,parentId){if(window.attachEvent){window.attachEvent("onload",function(){varsfEls=(parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);type(sfEls);});}}hover=function(sfEls){for(vari=0;i<sfEls.length;i++){sfEls.onmou搜索引擎优化ver=function(){this.className+="hover";}sfEls.onmou搜索引擎优化ut=function(){this.className=this.className.replace(newRegExp("hover"),"");}}}suckerfish(hover,"li");</script></head><body><olid="need"><li><labelclass="old_password">原始暗码：</label><inputname=type=passwordid=/></li><li><labelclass="new_password">新的暗码：</label><inputname=type=passwordid=/><dfn>（暗码长度为6~20字节。不想修正请留空）</dfn></li><li><labelclass="rePassword">反复暗码：</label><inputname=type=passwordid=/></li><li><labelclass="email">邮箱设置：</label><inputname=type=textid=/><dfn>（Codemoz!答应毫不会给您发送任何渣滓邮件。）</dfn></li></ol></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
课余，我们也思考过为什么要学习并使用div+css，而不是如何实现某个细节。当然我们也不应当为了Div+css而Div+css。这样做毫无意义。而以下两点是我们总结了的它不得不说的好：

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 今天来学习JS+DIV表单实例——鼠标移上背景变色和笔墨提醒

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子