深入淺析search 搜索框的寫法
關(guān)于搜索框,寫法有很多種,搜索框這一塊是一個(gè)比較細(xì)的活,要先計(jì)算好他的高、寬;
下面我就以京東搜索框?yàn)槔?,給大家淺析一下。
上面就是最終search框效果圖。
先送出代碼>>>>>>
<span style="color: rgb(255, 0, 255); font-size: 18pt;"><strong>HTML 標(biāo)簽:</strong></span> <div class="center_child1"> <form> <input type="text" name="search" placeholder="search練習(xí)"> <button>搜索</button> -------像京東是用的button標(biāo)簽,其他網(wǎng)站, 如百度:是用的<input type="submit" name="" > 標(biāo)簽。 </form> </div> CSS 樣式:.center_child1{ width:538px; height:36px; overflow:hidden; border:2px solid #BD1D17; } .center_child1 input{ width:456px; height:24px; float:left; padding:6px 2px; ----------------對(duì) input 內(nèi)補(bǔ)白,使其字體不緊貼 border 邊框,增加美感。 background-color:transparent; -------讓 input 標(biāo)簽的背景顏色為透明色。 border:none; -----------------去 input 標(biāo)簽,原有的邊框?qū)傩浴? outline:none; font-size:16px; } .center_child1 button{ width:76px; height:36px; float:right; background:#BD1D17; border:none; color:#fff; font-size:15px; }
總結(jié):一個(gè)搜索框主要有三部分,一個(gè)是輸入框部分(左邊的),另一個(gè)是搜索按鈕部分(右邊的),還有就是一個(gè)包含它們兩個(gè)大的 div ;
1、先對(duì)大的 div 設(shè)置寬高、邊框顏色,這個(gè)要根據(jù)個(gè)人需求事先計(jì)算好。
2、分別對(duì) input(輸入框部分)左浮動(dòng);對(duì) button(按鈕部分)右浮動(dòng),記得對(duì)大的div使用overflow:hidden;屬性;
3、調(diào)整 input 的高度,寬度,記得用 padding 撐起它的高度值,這樣不至于輸入字體時(shí)緊貼邊框,增加美感 ;寬度值,左邊可稍微加點(diǎn) padding 值,為了美感。
以上所述是小編給大家介紹的search 搜索框的寫法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09以JavaScript來實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法
這篇文章主要介紹了以JavaScript來實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法,文中首先對(duì)WordPress基本的PHP導(dǎo)航菜單的做法給出了說明來作為基礎(chǔ),需要的朋友可以參考下2015-12-12彈出遮罩層后禁止?jié)L動(dòng)效果【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄獜棾稣谡謱雍蠼節(jié)L動(dòng)效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06