仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 2428|回复: 9
打印 上一主题 下一主题

[DIV+CSS] CSS教程之仿google/gougou的搜刮框下拉提醒列表效果

[复制链接]
小妖女 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:37:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

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代表的是网络世界发展的方向。它是网站标准中常用术语之一
海妖 该用户已被删除
沙发
发表于 2015-1-17 17:47:57 | 只看该作者
可以使用CSS检查工具进行设计。
老尸 该用户已被删除
板凳
发表于 2015-1-21 08:56:40 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
只想知道 该用户已被删除
地板
发表于 2015-1-30 13:00:47 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
小魔女 该用户已被删除
5#
发表于 2015-2-6 12:33:46 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
6#
发表于 2015-2-16 04:55:39 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
因胸联盟 该用户已被删除
7#
发表于 2015-3-5 00:03:25 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
变相怪杰 该用户已被删除
8#
发表于 2015-3-11 22:06:23 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
乐观 该用户已被删除
9#
发表于 2015-3-19 15:19:05 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
柔情似水 该用户已被删除
10#
发表于 2015-3-28 22:11:40 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-2 06:03

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表