深入淺析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
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)年歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
以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
這篇文章主要給大家介紹了關(guān)于JS截取數(shù)組操作的相關(guān)資料,對(duì)數(shù)組的操作相信大家都不陌生,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
彈出遮罩層后禁止?jié)L動(dòng)效果【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄獜棾稣谡謱雍蠼節(jié)L動(dòng)效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)波浪導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JavaScript箭頭函數(shù)中的this詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
本篇文章主要介紹了淺談ES6 模板字符串的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11