HTML+CSS实现搜索框

HTML+CSS实现搜索框

首先：

我们先放置一个大盒子，里面嵌套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;/*取消边框和外边框将按钮边框去掉*/

}

最后看成品图：