深入淺析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)文章
這篇文章主要介紹了JavaScript鼠標(biāo)懸停事件用法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要給大家介紹了關(guān)于TypeScript判斷對(duì)象類型的4種方式代碼,TypeScript能根據(jù)一些簡(jiǎn)單的規(guī)則推斷(檢查)變量的類型,你可以通過實(shí)踐很快的了解它們,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了js中settimeout方法加參數(shù),需要的朋友可以參考下2014-02-02
javascript設(shè)計(jì)模式 – 抽象工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 抽象工廠模式,結(jié)合實(shí)例形式分析了javascript抽象工廠模式相關(guān)概念、原理、定義、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
javascript parseUrl函數(shù)(來自國外的獲取網(wǎng)址url參數(shù))
在外國一博客看到一個(gè)很好的函數(shù)，獲取網(wǎng)址url等地址參數(shù)。非常不錯(cuò)，值得參考與收藏。2010-06-06
javascript數(shù)組去重3種方法的性能測(cè)試與比較
面試題中有一題數(shù)組去重，首先想到的是對(duì)象存鍵值的方法可是遇到不同類型又能轉(zhuǎn)換成同樣的字符串的就完了接下來為大家介紹下雙重循環(huán)/存鍵值和類型實(shí)現(xiàn)去重，感興趣的各位可以參考下哈2013-03-03
微信小程序?qū)崿F(xiàn)預(yù)約生成二維碼功能
通過點(diǎn)擊預(yù)約按鈕即可生成二維碼憑碼入校參觀,下面小編通過實(shí)例代碼講解微信小程序?qū)崿F(xiàn)預(yù)約生成二維碼功能,感興趣的朋友跟隨小編一起看看吧2024-04-04
JavaScript中判斷整數(shù)的多種方法總結(jié)
這篇文章主要介紹了JavaScript中判斷整數(shù)的多種方法總結(jié),本文總結(jié)了5種判斷整數(shù)的方法,如取余運(yùn)算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下2014-11-11
JavaScript中this的四個(gè)綁定規(guī)則總結(jié)
相信大家都知道，ES5及之前時(shí)代的JavaScript中this的綁定機(jī)制是讓很多開發(fā)者頭疼不已的事情。this 的綁定變化多端，讓筆者也吃了不少虧。所以本文總結(jié)了this的四條綁定規(guī)則，在此記錄，以防自己遺忘，也方便他人參考借鑒。下面來一起看看吧。2016-09-09
這篇文章主要介紹了JavaScript中的變量作用域介紹,本文同時(shí)講解了一個(gè)新概念變量的作用域鏈,需要的朋友可以參考下2014-12-12