1、分塊<div>

搜尋框：（body部分）

偽裝成一個搜尋框，一般都是<input>標籤+<button>標籤

<form method="get" id="searchform" action="http://blog.iliyang.cn/">
<fieldset class="search">
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="關鍵字" x-webkit-speech>
 <button class="btn" title="SEARCH"> </button>
</fieldset>
</form>

其中 x-webkit-speech 支援語音輸入功能

<input>標籤用於蒐集使用者資訊，根據不同的type屬性值，輸入欄位擁有很多種形式，輸入欄位可以是文字欄位、

複選框、掩碼後的文字控制元件，單選按鈕、按鈕等等

<input>標籤 placeholder屬性

定義與用法：

placeholder 屬性提供可描述輸入欄位預期值的提示資訊（hint）

該提示會在輸入欄位為空時顯示，並會在欄位獲得焦點時消失。

註釋：placeholder 屬性適用於以下的<input> 型別：text，search，url，telephone，email以及password。

延伸另一種搜尋框方法：<input>標籤的 search屬性

例項：實現一個文字搜尋功能，要求輸入時，鍵盤迴車按鈕提示顯示為“搜尋”。

1、input type=text 並不能達到這種效果，使用type=search可以做到（但需要input type=search外面包上一層帶action屬性的form)

a.type=search會有很多預設樣式和行為

。會預設下拉框顯示搜尋歷史記錄

設定input autocomplete =“off”去掉彈出的下拉框

。輸入時自動彈出”X“

取消：

input[type="search"]::-webkit-search-cancel-button{
  display: none;
}

。IOS手機輸入框是橢圓形

-webkit-appearance: none;

container.on('submit', '.input-kw-form', function(event){
    event.preventDefault();
})

這是畫圖軟體畫的初始圖片，後來有人推薦給我一個線上繪圖工具感覺很好用https://www.processon.com/

畫出來的效果

怎麼感覺我畫的比較好看哈哈哈哈哈