七零部落格
思则大道至简,疑则谜团重重!
思则大道至简,疑则谜团重重!
直接上代码,复制粘贴。。。你懂得,演示网址 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>