关于标签

 

<input>标签用于让用户输入信息
今天主要讲<input type="text"/>，这种类型很是多见，各大网站的搜索栏中都会出现，好比在淘宝中用户经过它搜索想要的商品。
那么怎么作出一个相似淘宝的搜索框？

代码实现：
<input type="text" placeholder="家居摆设添欣喜"/>
<button>搜索</button>

css中设置样式：
input{
/*让输入框中的提示文字距离边框必定距离，更加美观*/
text-indent: 20px;
/*取消默认的边框颜色*/
outline: none;
/*给边框加上颜色，规定粗细*/
border: 2px solid #ff0000 ;
/*文本框大小*/
width: 500px;
height: 36px;
/*能够将搜索框内的小图标做为背景图片插入*/
/*背景图片不平铺，居左*/
background: url("image/search-input.png") no-repeat left;

}
/*通常文本框后面都会跟上一个搜索按钮*/
button{
/*按钮上的文字颜色*/
color: white;
/*按钮的颜色*/
background-color: #ff0000 ;
border: 2px solid #ff0000 ;
height: 42px;
width: 118px;
/*文本框与按钮间有间隙*/
/*经过设置margin为负，去掉间隙*/
margin-left: -5px;
}

获得的效果以下：