七零部落格
思则大道至简,疑则谜团重重!
思则大道至简,疑则谜团重重!
直接上代码,复制粘贴。。。你懂得,演示网址 http://cdn.qiling.org
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度一下,你就知道</title> </head> <style> /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:12px '微软雅黑';color:#000;outline:0;} body{background:#fff;} a,a:hover{color:#333;} .href a{text-decoration:underline; font-size:15px; color:#00c; margin:5px} .href .curre{text-decoration:none; color:#000; font-weight:bold} .btnSearch {display:inline-block; width:70px; border:1px solid #CCC; float:right; text-align:center; height: 20px;outline: medium none;padding: 9px 7px; font-size:16px ; background:#f6f6f6; color:#000} .input{ border:1px solid #b8b8b8;display:inline-block; width:415px; border:1px solid #CCC; float:left; border: 1px solid #b8b8b8;} .input{font: 16px arial;height: 20px;outline: medium none;padding: 9px 7px; vertical-align: top; } #suggest{} #suggest div{ height:30px; font-size:15px; line-height:30px; padding:0 10px; cursor:pointer} #suggest div:hover{ background:#ebebeb; } </style> <script> function searchResult(obj){ //window.dddd({q:"111",p:false,s:["11185","11183","1111","11185快递查询","11183是什么号码","111ttt","111路公交车路线","111124","1117","11185挂号信查询"]}); //alert(obj.s); var html = ""; for(var o in obj.s){ html += '<div onClick=selectKeyword(this.innerHTML)>'+ obj.s[o] + '</div>'; } document.getElementById('suggest').innerHTML = html; } function selectKeyword(value){ window.show = false; document.getElementById('keyword').value = value; hideSuggest(); document.getElementById('form').submit(); } </script> <script> function showSuggest(value){ document.getElementById('suggest').style.display = 'block'; } function hideSuggest(){ if(window.show){ return; } document.getElementById('suggest').style.display = 'none'; } function searchForm(value){ if(!value){ return; } //document.getElementById('suggestion').src = 'http://suggestion.baidu.com/su?wd='+ value +'&cb=window.searchResult&from=superpage&t=1335581987353'; var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src='http://suggestion.baidu.com/su?wd='+ value +'&cb=window.searchResult&from=superpage&t=1335581987353'; oHead.appendChild( oScript); } </script> <body> <div id="main" style="width:520px; clear:both; margin:0 auto; margin-top:5%"> <div class="logo" style="background:url(http://www.baidu.com/img/baidu_sylogo1.gif) center no-repeat; height:129px; overflow:hidden "> </div> <div class="href" style="text-align:center"> <a href="">新闻</a> <a class="curre" href="">网页</a> <a href="">贴吧</a> <a href="">知道</a> <a href="">音乐</a> <a href="">图片</a> <a href="">视频</a> <a href="">地图</a> <a href="">百科</a> <a href="">文库</a> <a href="">更多>></a> </div> <div class="inputBox" style="margin-top:10px;position:relative"> <form name="form" id="form" method="get" action="http://www.baidu.com/s"> <input id="keyword" type="text" class="input" name="wd" autocomplete="off" onblur="hideSuggest()" onfocus="showSuggest()" onkeyup="searchForm(this.value)"/> <a onclick="document.getElementById('form').submit()" class="btnSearch" style="">百度一下</a> </form> <div id="suggest" onMouseOver="window.show = true" onMouseOut="window.show = false" style=" display:none;position:absolute; height:100px; width:429px; border:1px solid #817f82; background:#fff; top:39px; height:auto;"> </div> </div> </div> </body> </html>