你的位置:首页 > 网页设计

[网页设计]随笔之——各大热门网站search 搜索框的写法,浅析!


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

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

 

上面就是最终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;}

总结:一个搜索框主要有三部分,一个是输入框部分(左边的),另一个是搜索按钮部分(右边的),还有就是一个包含它们两个大的 div ;

1、先对大的 div 设置宽高、边框颜色,这个要根据个人需求事先计算好。

2、分别对 input(输入框部分)左浮动;对 button(按钮部分)右浮动,记得对大的div使用overflow:hidden;属性;

3、调整 input 的高度,宽度,记得用 padding 撑起它的高度值,这样不至于输入字体时紧贴边框,增加美感 ;宽度值,左边可稍微加点 padding 值,为了美感。