HTML+CSS实现搜索框

首先：

<div class="box">
	<input type="text" class="input" placeholder="请输入商品">
	<!--placeholder是文本框中的提示文字-->
	<input type="button" value="搜索" class="button">
</div>

我们先放置一个大盒子，里面嵌套1个文本框，一个按钮。
然后我们使用css设置样式：

	.box{
		width:500px;
		height:40px;
		border:2px solid red;
		margin:auto;
	}

我们将搜索框的宽度与高度设置为500，40像素，边框为2的红色线条并且自动居中。
然后我们设置文本框与按钮的样式。

	.input{
		float:left;
		width:400px;/*宽400*/
		height:38px;/*高38（因为文本框内外边框要占用1像素所以总体高度减2，其他盒子同理）*/
		outline:none;
		border:none;/*取消文本框内外边框*/
	}

.button{
	float:left;
	width:96px;
	height:40px;
	color:white;
	background-color:red;/*将按钮背景设置为红色，字体设置为白*/
	border:none;
	outline:none;/*取消边框和外边框将按钮边框去掉*/
}

最后看成品图：