【连载~前端学习日志】03：做搜索框的两个有趣技巧！

写在文前：通过对比蘑菇街上的两个搜索框的案例+老师上课的案例。两个案例轻松解决搜索框的难题。

原本我以为，搜索框可以使用input按钮，两个！就可以把text和submit两个功能加上~没错，不过我忽略了一个点：那样做并非十分美观。

原始代码如下：

这样，就是分离的了两个框了。

但，我想要的是这个效果。。。

两个图片均来自蘑菇街。这也是今天我要解答的一个问题。如何做出这样的input文本框和搜索框结合的方法：

方法1：

先看代码：

 

总结1：

利用field，form，input三个标签。使用field的外边框，然后取消input1和input2的边框。逐步调试边框的宽度以至于达到结合。

方法2：

搜本店

看表现层：

*{
margin:0;
padding:0;
}



.p1{
width:300px;
height:31px;
border:none;
border:2px solid red;
float:left;
}



.p2{
width:87px;
height:35px;
background:red;
border:none;
color:white;
cursor:pointer;
float:left;
}



div{
width:510px;
height:35px;


display:block;


}

div a{
width:87px;
height:33px;
display:block;
float:right;
border:1px solid red;
background:white;
text-align:center;
vertical-align:middle;
line-height:33px;
color:red;

text-decoration:none;

}

总结2：

利用display:block 把div包含下的input标签进行块状化。利用浮动float进行排列。然后Input1的边框不用取消，Input2（即搜索框）的边框可以取消掉。


在蘑菇街的搜索栏目中，左边是输入文本框，右边是搜索框，在搜索框右边，还有一个“搜本店”的按钮。大小和搜索框input高度同样，宽度有些许差别。但也是同样利用了display：block原理，然后float:right 向右边浮动即可。这个功能和在输入框中有一个下拉列表（里面包含搜店铺和搜商品两个功能）是同样的作用。

再来分析蘑菇街的搜索框代码：

（第二个图片的搜索框）

module-shop .shop-info .shop-search .inptxt  {

1. float: left;
2. width: 85px;
3. height: 14px;
4. line-height: 14px;
5. padding: 3px;
6. border-width: 1px 0px 1px 1px;
7. border-style: solid;
8. border-color: rgb(221, 221, 221);
9. border-image: initial;
10. color: rgb(51, 51, 51);

注意padding的作用。

padding放在input的作用是，把搜索框撑大。比如：padding-left=10px; 搜索框的整体宽度增加了10px的宽度。需要在这个数目加入整体的框长度。高度也是同样道理。
因此，输入的文本搜索框总体宽度和高度是：

宽度/高度=原来的Input定义宽度+两倍的padding定义px+两倍边框定义px。

解决完毕！

+ bj-yx-2016-12-20 晚上~