關於標籤

 

<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;
}

獲得的效果以下：