百度首页越来越大了,精简了一下

2014-07-11 14:19

直接上代码,复制粘贴。。。你懂得,演示网址 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>


^