欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入淺析search 搜索框的寫法

 更新時(shí)間:2016年08月02日 09:43:27   作者:當(dāng)背包沒有包  
本文以京東搜索框?yàn)槔o大家淺析search 搜索框的寫法,本文介紹的非常不錯(cuò),需要的朋友可以參考下

關(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)效果

    微信小程序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)年歷效果

    JavaScript實(shí)現(xiàn)年歷效果

    這篇文章主要為大家詳細(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)航菜單的方法

    這篇文章主要介紹了以JavaScript來實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法,文中首先對(duì)WordPress基本的PHP導(dǎo)航菜單的做法給出了說明來作為基礎(chǔ),需要的朋友可以參考下
    2015-12-12
  • JS截取數(shù)組操作簡(jiǎn)單示例

    JS截取數(shù)組操作簡(jiǎn)單示例

    這篇文章主要給大家介紹了關(guān)于JS截取數(shù)組操作的相關(guān)資料,對(duì)數(shù)組的操作相信大家都不陌生,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-08-08
  • 彈出遮罩層后禁止?jié)L動(dòng)效果【實(shí)現(xiàn)代碼】

    彈出遮罩層后禁止?jié)L動(dòng)效果【實(shí)現(xiàn)代碼】

    下面小編就為大家?guī)硪黄獜棾稣谡謱雍蠼節(jié)L動(dòng)效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考
    2016-04-04
  • 原生js實(shí)現(xiàn)波浪導(dǎo)航效果

    原生js實(shí)現(xiàn)波浪導(dǎo)航效果

    這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)波浪導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條

    微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條

    這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • JavaScript箭頭函數(shù)中的this詳解

    JavaScript箭頭函數(shù)中的this詳解

    這篇文章主要介紹了JavaScript箭頭函數(shù)中的this詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下
    2019-06-06
  • 微信JS-SDK選取手機(jī)照片上傳功能

    微信JS-SDK選取手機(jī)照片上傳功能

    這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • 淺談ES6 模板字符串的具體使用方法

    淺談ES6 模板字符串的具體使用方法

    本篇文章主要介紹了淺談ES6 模板字符串的具體使用方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11

最新評(píng)論