|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道,实在是太过于麻烦。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>输出框提醒列表效果</title><styletype="text/CSS"><!--body{background:#fff}.Menu{position:relative;width:204px;height:127px;z-index:1;background:#FFF;border:1pxsolid#000;margin-top:-100px;display:none;}.Menu2{position:absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;}.Menu2ul{margin:0;padding:0}.Menu2ulli{width:100%;height:25px;line-height:25px;text-indent:15px;border-bottom:1pxdashed#ccc;color:#666;cursor:pointer;change:expression(this.onmou搜索引擎优化ver=function(){this.style.background="#F2F5EF";},this.onmou搜索引擎优化ut=function(){this.style.background="";})}input{width:200px}.form{width:200px;height:auto;}.formdiv{position:relative;top:0;left:0;margin-bottom:5px}#List1,#List2,#List3{left:0px;top:93px;}--></style><scripttype="text/javascript">functionshowAndHide(obj,types){varLayer=window.document.getElementById(obj);switch(types){case"show":Layer.style.display="block";break;case"hide":Layer.style.display="none";break;}}functiongetValue(obj,str){varinput=window.document.getElementById(obj);input.value=str;}</script></head><body><divclass="form"><div>Location:<inputtype="text"id="txt"name="txt"onfocus="showAndHide(List1,show);"onblur="showAndHide(List1,hide);"></div><!--列表1--><divclass="Menu"id="List1"><divclass="Menu2"><ul><lionmousedown="getValue(txt,中国CHINA);showAndHide(List1,hide);">中国CHINA</li><lionmousedown="getValue(txt,美国USA);showAndHide(List1,hide);">美国USA</li></ul></div></div><div>:<inputtype="text"id="txt2"name="txt2"onfocus="showAndHide(List2,show);"onblur="showAndHide(List2,hide);"></div><!--列表2--><divclass="Menu"id="List2"><divclass="Menu2"><ul><lionmousedown="getValue(txt2,男Male);showAndHide(List2,hide);">男Male</li><lionmousedown="getValue(txt2,女Female);showAndHide(List2,hide);">女Female</li></ul></div></div><div>education:<inputtype="text"id="txt3"name="txt3"onfocus="showAndHide(List3,show);"onblur="showAndHide(List3,hide);"></div><!--列表3--><divclass="Menu"id="List3"><divclass="Menu2"><ul><lionmousedown="getValue(txt3,this.innerText);showAndHide(List3,hide);">年夜专</li><lionmousedown="getValue(txt3,本科);showAndHide(List3,hide);">本科</li><lionmousedown="getValue(txt3,硕士);showAndHide(List3,hide);">硕士</li><lionmousedown="getValue(txt3,本科);showAndHide(List3,hide);">本科</li></ul></div></div></div><br/><br/>更多代码请会见<ahref="http://www.lanrentuku.com/"target="_blank">懒人图库</a></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
可以说Div+css代表的是网络世界发展的方向。它是网站标准中常用术语之一 |
|