仿百度页面，实现百度一下js部分代码

js部分代码

<script type="text/javascript">		
	function startSearch(){
		var contentText = document.getElementById("content").value;
		//"https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&wd="这个地址就是搜索内容地址，将搜索内容获取放入地址，就实现搜索了
		var searchAddress = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&wd="+contentText;
		window.location.href = searchAddress;
	}
	//js回车监听事件
	document.onkeydown = function (event) {
        var e = event || window.event;
        if (e && e.keyCode == 13) { 
            document.getElementById("enter").click();
        }
    }
</script>

html部分代码

<input type="text" id="content" class="baidu_text" /><input type="submit" id="enter" onClick="startSearch()" class="baidu_button" value="百度一下"/>

css部分代码

.baidu_text{
	width:540px;
	height:31px; 
	float: left;
}
.baidu_button{
	width:100px;
	height:37px;
	border:none;
	background:#1E90FF;
	color: #FFFFFF; 
	float: left;
}

注：以下这两种写法排版上不同，最终会导致显示不同。

<input type="text" id="content" class="baidu_text" /><input type="submit" id="enter" onClick="startSearch()" class="baidu_button" value="百度一下"/>

下面代码会导致文本框与按钮之间会有间隙，而上面input标签之间紧挨一起，可以消除文本框与按钮之间会有间隙。而且，要想文本框与按钮之间的高度保持一直，不出现高低不平的现象，就用一个div将他们装起来,然后一个左浮动，一个右浮动。

<input type="text" id="content" class="baidu_text" />
<input type="submit" id="enter" onClick="startSearch()" class="baidu_button" value="百度一下"/>