模板无忧
Div+Css
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
CMS教程
CMS行业动态
动易Cms教程
DedeCms教程
PHPCms教程
Discuz教程
PhpWind教程
动网论坛教程
PHP168教程
SupeSite教程
帝国Cms教程
新云Cms教程
科汛Cms教程
风讯Cms教程
模板安装教程
Div+Css教程
Div+CSS教程
DIV+CSS实例
CSS教程
XHTML教程
Web标准教程
浏览器兼容教程
HTML5教程
CSS3教程
网站制作教程
Flash教程
Fireworks教程
Dreamweaver教程
网页配色教程
网页设计教程
网站重构教程
Photoshop教程
网站运营
站长新闻
建站经验教程
SEO优化教程
免费建站资源
网站推广教程
策划盈利教程
GoogleAdsense教程
站长休闲故事
网络编辑教程
网络编程
PHP教程
ASP教程
.Net教程
JSP教程
AJAX教程
Xml教程
Access数据库教程
Mssql数据库教程
MySQL教程
服务器教程
Web服务器教程
Windows教程
Linux教程
Ftp服务器教程
Mail服务器教程
Dns服务器教程
负载集群教程
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
Div+Css教程
模板无忧
>
建站教程
>
Div+Css教程
>
DIV+CSS实例
>
收藏
分享
查看评论
DIV+CSS实例
大
中
小
仿谷歌google的搜索框下拉提示列表效果_DIV+CSS实例
编辑Tag赚U币
教程Tag:
下拉列表
下拉提示
google
搜索框提示
用户体验
添加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>输入框提示列表效果</title> <style type="text/css"> <!-- body{background:#fff} .Menu { position:relative; width:204px; height:127px; z-index:1; background: #FFF; border:1px solid #000; margin-top:-100px; display:none; } .Menu2 { position: absolute; left:0; top:0; width:100%; height:auto; overflow:hidden; z-index:1; } .Menu2 ul{margin:0;padding:0} .Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px; border-bottom:1px dashed #ccc;color:#666;cursor:pointer; change:expression( this.onmouseover=function(){ this.style.background="#F2F5EF"; }, this.onmouseout=function(){ this.style.background=""; } ) } input{width:200px} .form{width:200px;height:auto;} .form div{position:relative;top:0;left:0;margin-bottom:5px} #List1,#List2,#List3{left:0px;top:93px;} --> </style> <script type="text/javascript"> function showAndHide(obj,types){ var Layer=window.document.getElementById(obj); switch(types){ case "show": Layer.style.display="block"; break; case "hide": Layer.style.display="none"; break; } } function getValue(obj,str){ var input=window.document.getElementById(obj); input.value=str; } </script> </head> <body> <div class="form"> <div> Location:<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div> <!--列表1--> <div class="Menu" id="List1"> <div class="Menu2"> <ul> <li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li> <li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li> </ul> </div> </div> <div> :<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div> <!--列表2--> <div class="Menu" id="List2"> <div class="Menu2"> <ul> <li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li> <li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li> </ul> </div> </div> <div> education:<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div> <!--列表3--> <div class="Menu" id="List3"> <div class="Menu2"> <ul> <li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">大专</li> <li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li> <li onmousedown="getValue('txt3','硕士');showAndHide('List3','hide');">硕士</li> <li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li> </ul> </div> </div> </div><br/><br/>更多代码请访问 <a href="http://www.mb5u.com/" target="_blank">模板无忧</a> </body> </html>
网站制作在线视频教程
网站制作视频教程打包下载
DIV+CSS模板
CSS视频教程
CSS设计彻底研究视频教程
网页制作基础教程
网站重构&web标准设计教程
div css视频教程
DIV + CSS 入门视频教程,只用记事本编写代码演示
精通CSS+DIV网页样式与布局配套视频教程
别具光芒:DIV+CSS网页布局与美化
DIV.CSS应用视频教程(DIV+CSS)
来源:模板无忧
/
/
所属分类:
DIV+CSS实例
/
更新时间:2012-05-26
[收藏]
[报错]
[返回列表]
相关
DIV+CSS实例
:
固定div容器的宽高,图片居中(图片不限制大小)
用css制作有滚动条的居中弹出框
鼠标指住(hover)变色的按钮演示demo
10个很酷的涂鸦风格国外网店设计展示
jquery模拟浏览器滚动条效果
JS显示网页最后更新时间
CSS技巧:text-indent隐藏文字(以图换字)
CSS实例:三列自适应等高且中列宽度自适应
DivCSS布局实例:很实用的图文混排CSS列表-富有语义
DivCSS实例:CSS菜单Flash效果用图片模拟实现
DivCSS布局实例用dldtdd来制作列表
DivCSS实例:符合web标准的嵌入Flash的方法-JS调用
DIV+CSS实例Rss订阅
Div+Css教程搜索
DIV+CSS实例推荐
CSSFormExample:带有小图标的清爽CSS表单设计!
如何用CSS实现翻页效果?
CSS实例:非常不错的鼠标悬停TIP效果!
JS显示网页最后更新时间
用“ul li”及css制作韩国风格菜单
DIVCSS布局教程:应用ul、li实现表格形式
利用CSS同比例缩小图片并且符合Web标准
DivCSS布局实例:三行单列上下固定高度中间自适应
css背景渐变的技巧与方法
css javascript图片自动同比例缩小并且实现垂直居中
猜你也喜欢看这些
CSS文档流,块级元素和内联元素
如何制作可控制显示或隐藏的伸缩式DIV CSS新闻列表?
CSS网站横向导航
Web Developer插件 Information工具教程
WEB2.0标准教程:应用WEB标准建设网站有什么好处?
DIV CSS中id与class 的命名及编码的6个最佳习惯
用css制作的导航菜单
可以用CSS实现在新窗口打开链接吗?
如何让层显示在FLASH之上呢
CSS对文字溢出时的自动隐藏处理
相关链接:
复制本页链接
|
搜索仿谷歌google的搜索框下拉提示列表效果
教程说明:
DIV+CSS实例
-
仿谷歌google的搜索框下拉提示列表效果
。