隨筆之各大熱門網站search 搜尋框的寫法，淺析！-html教學-PHP中文網

隨筆之各大熱門網站search 搜尋框的寫法，淺析！

WBOY

發布： 2016-08-04 08:53:19

原創

1303 人瀏覽過

關於搜尋框，寫法有很多種，搜尋框這一塊是一個比較細的活，要先計算好他的高、寬；

下面我就以東東搜尋框為例，給大家淺析一下。

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

先送代碼>>>>>>

<span style="color: #ff00ff; font-size: 18pt;"><strong>HTML 标签：</strong></span>

登入後複製

<span style="font-size: 16px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center_child1"</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"><</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="search"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="search练习"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>搜索<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span><span style="color: #000000;">   -------像京东是用的button标签，其他网站，
                              如百度：是用的</span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">></span><span style="color: #000000;"> 标签。
   </span><span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

登入後複製

<span style="color: #800000;"><strong><span style="color: #ff00ff; font-size: 18pt;">CSS 样式：</span></strong><br /><br /><strong><span style="font-size: 14pt;">.center_child1</span></strong></span><strong><span style="font-size: 14pt;">{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">538px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">36px</span>;<br /><span style="color: #ff0000;">　　 overflow:hidden;
    border</span>:<span style="color: #0000ff;">2px solid #BD1D17</span>;
}<span style="color: #800000;">
.center_child1 input</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">456px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">24px</span>;<br /></span></strong>

登入後複製

<strong><span style="color: #888888; font-size: 18px;">    float:left; </span><span style="font-size: 14pt;"><span style="color: #888888;">   <br />    <span style="color: #ff6600;">padding</span></span>:<span style="color: #0000ff;">6px 2px</span>;   ----------------对 input 内补白，使其字体不紧贴 border 边框,增加美感。</span></strong>

登入後複製

<em id="__mceDel"><strong><span style="font-size: 14pt;"><span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;">transparent</span>;   -------让 input 标签的背景颜色为透明色。<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">none</span>;   -----------------去 input 标签，原有的边框属性。<span style="color: #ff0000;">
    outline</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;
}<span style="color: #800000;">
.center_child1 button</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">76px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">36px</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">right</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#BD1D17</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#fff</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">15px</span>;
}</span></strong></em>

登入後複製

總結：一個搜尋框主要有三個部分，一個是輸入框部分（左邊的），另一個是搜尋按鈕部分（右邊的），還有一個包含它們兩個大的 div ；

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

2、分別對 input（輸入框部分）左浮動；對 button（按鈕部分）右浮動，記得對大的div使用overflow：hidden；屬性；

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