随笔之各大热门网站search 搜索框的写法，浅析！

原创: 2016-08-04 08:53:19 821浏览

关于搜索框，写法有很多种，搜索框这一块是一个比较细的活，要先计算好他的高、宽；

下面我就以京东搜索框为例，给大家浅析一下。

上面就是最终search框效果图。

先送出代码>>>>>>

HTML 标签：

<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;
}