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

深入淺析search 搜索框的寫法

 更新時間:2016年08月02日 09:43:27   作者:當背包沒有包  
本文以京東搜索框為例給大家淺析search 搜索框的寫法,本文介紹的非常不錯,需要的朋友可以參考下

關于搜索框,寫法有很多種,搜索框這一塊是一個比較細的活,要先計算好他的高、寬;

下面我就以京東搜索框為例,給大家淺析一下。

上面就是最終search框效果圖。

先送出代碼>>>>>>

<span style="color: rgb(255, 0, 255); font-size: 18pt;"><strong>HTML 標簽:</strong></span> 
<div class="center_child1">
<form>
<input type="text" name="search" placeholder="search練習">
<button>搜索</button> -------像京東是用的button標簽,其他網站,
如百度:是用的<input type="submit" name="" > 標簽。
</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; ----------------對 input 內補白,使其字體不緊貼 border 邊框,增加美感。 background-color:transparent; -------讓 input 標簽的背景顏色為透明色。
border:none; -----------------去 input 標簽,原有的邊框屬性。
outline:none;
font-size:16px;
}
.center_child1 button{
width:76px;
height:36px;
float:right;
background:#BD1D17;
border:none;
color:#fff;
font-size:15px;
}

總結:一個搜索框主要有三部分,一個是輸入框部分(左邊的),另一個是搜索按鈕部分(右邊的),還有就是一個包含它們兩個大的 div ;

1、先對大的 div 設置寬高、邊框顏色,這個要根據個人需求事先計算好。

2、分別對 input(輸入框部分)左浮動;對 button(按鈕部分)右浮動,記得對大的div使用overflow:hidden;屬性;

3、調整 input 的高度,寬度,記得用 padding 撐起它的高度值,這樣不至于輸入字體時緊貼邊框,增加美感 ;寬度值,左邊可稍微加點 padding 值,為了美感。

以上所述是小編給大家介紹的search 搜索框的寫法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • 微信小程序scroll-view實現左右聯動效果

    微信小程序scroll-view實現左右聯動效果

    這篇文章主要為大家詳細介紹了微信小程序scroll-view實現左右聯動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • JavaScript實現年歷效果

    JavaScript實現年歷效果

    這篇文章主要為大家詳細介紹了JavaScript實現年歷效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 以JavaScript來實現WordPress中的二級導航菜單的方法

    以JavaScript來實現WordPress中的二級導航菜單的方法

    這篇文章主要介紹了以JavaScript來實現WordPress中的二級導航菜單的方法,文中首先對WordPress基本的PHP導航菜單的做法給出了說明來作為基礎,需要的朋友可以參考下
    2015-12-12
  • JS截取數組操作簡單示例

    JS截取數組操作簡單示例

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

    彈出遮罩層后禁止?jié)L動效果【實現代碼】

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

    原生js實現波浪導航效果

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

    微信小程序用canvas實現圓形進度條

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

    JavaScript箭頭函數中的this詳解

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

    微信JS-SDK選取手機照片上傳功能

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

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

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

最新評論