CSS教程之仿google/gougou的搜刮框下拉提醒列表效果
在原来的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代表的是网络世界发展的方向。它是网站标准中常用术语之一 可以使用CSS检查工具进行设计。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 滚动条)层属性--溢出(visible/hidden/scroll/auto)
页:
[1]