如何製作手機搜尋框?

Tags: ,

現在好多手機版的網站出現,網站頁面也是用html編寫的,但是編寫方式略有區別。今天小漁就教大家一個製作手機搜尋框的簡便方法。

方法/步驟

首先,我們要明確,手機版的搜尋框預期效果是什麼樣的,即我們的搜尋框始終在頁面的一側,並且不要給搜尋框的按鈕設定寬度。

如何製作手機搜尋框

我用的佈局思想是,首先寫一個div,並且設定padding值,讓搜尋框不會貼邊顯示。

如何製作手機搜尋框

然後寫我們的input框,用form先將input框套起來,使其成組顯示。

如何製作手機搜尋框

裡面的兩個Input框採用一個固定,另一個相對定位的方法。固定的那個width設為100%,這樣即便螢幕伸縮,還是這個框還是會佔100%設為

如何製作手機搜尋框

而需要設定position:absolute的搜尋框按鈕,是相對於form定位的,保證靠右是0,高度和整個Input框是一致的。不要為其設定固定的寬度,只要設一下左右的padding即可。

如何製作手機搜尋框

為了美觀起見,我們為每個Input框都設定了一個border-radius,這樣會有一個圓角的弧形出現。

如何製作手機搜尋框

相關問題答案