Essay on how to write search boxes on major popular websites, a brief analysis!

Regarding the search box, there are many ways to write it. The search box is a relatively detailed job. You must first calculate its height and width;

Now I will take the JD search box as an example to give you a brief analysis.

The above is the final search box rendering.

Send the code first>>>>>>

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

<span style="font-size: 16px;"><span style="color: #0000ff;"><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 style="color: #800000;">form</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><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 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 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></span></span></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>

Summary: A search box mainly has three parts, one is the input box part (the left one), the other is the search button part (the right one), and there is a large div that contains them;

1. First set the width, height and border color of the large div. This should be calculated in advance according to personal needs.

2. Float the input (input box part) to the left and the button (button part) to the right. Remember to use overflow: hidden; attribute for large divs;

3. Adjust the height and width of the input. Remember to use padding to prop up its height value, so that it does not stick to the border when inputting fonts, which increases the beauty; for the width value, you can add a little padding value on the left side for the sake of beauty.