写在文前:通过对比蘑菇街上的两个搜索框的案例+老师上课的案例。两个案例轻松解决搜索框的难题。
原本我以为,搜索框可以使用input按钮,两个!就可以把text和submit两个功能加上~没错,不过我忽略了一个点:那样做并非十分美观。
原始代码如下:
<input class='p1' type='text' placeholder='搜索你的内容'/>
<a href='#'></a>
<input class='p2' type='submit' name='sousuo' value='搜索'/>
这样,就是分离的了两个框了。
但,我想要的是这个效果。。。
两个图片均来自蘑菇街。这也是今天我要解答的一个问题。如何做出这样的input文本框和搜索框结合的方法:
方法1:
先看代码:
<form>
<fieldset>
<input class='p1' type='text' placeholder='搜索你的内容'/>
<a href='#'></a> <!-----用于在文本搜索框内,增加链接图片的功能------>
<input class='p2' type='submit' name='sousuo' value='搜索'/>
</fieldset>
</form>
总结1:
利用field,form,input三个标签。使用field的外边框,然后取消input1和input2的边框。逐步调试边框的宽度以至于达到结合。
方法2:
<div>
<input class='p1' type='text' placeholder='搜索你的内容'/>
<a href='?'>搜本店</a>
<input class='p2' type='submit' name='sousuo' value='搜索'/>
</div>
看表现层:
*{
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;
}
</style>
总结2:
利用display:block 把div包含下的input标签进行块状化。利用浮动float进行排列。然后Input1的边框不用取消,Input2(即搜索框)的边框可以取消掉。
在蘑菇街的搜索栏目中,左边是输入文本框,右边是搜索框,在搜索框右边,还有一个“搜本店”的按钮。大小和搜索框input高度同样,宽度有些许差别。但也是同样利用了display:block原理,然后float:right 向右边浮动即可。这个功能和在输入框中有一个下拉列表(里面包含搜店铺和搜商品两个功能)是同样的作用。
再来分析蘑菇街的搜索框代码:
(第二个图片的搜索框)
注意padding的作用。
padding放在input的作用是,把搜索框撑大。比如:padding-left=10px; 搜索框的整体宽度增加了10px的宽度。需要在这个数目加入整体的框长度。高度也是同样道理。
因此,输入的文本搜索框总体宽度和高度是:
宽度/高度=原来的Input定义宽度+两倍的padding定义px+两倍边框定义px。
解决完毕!
+ bj-yx-2016-12-20 晚上~