时间:2021-05-18
关于搜索框,写法有很多种,搜索框这一块是一个比较细的活,要先计算好他的高、宽;
下面我就以京东搜索框为例,给大家浅析一下。
上面就是最终search框效果图。
先送出代码>>>>>>
<span style="color: rgb(255, 0, 255); font-size: 18pt;"><strong>HTML 标签:</strong></span> <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 值,为了美感。
以上所述是小编给大家介绍的search 搜索框的写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
上效果图:一:搜索框功能实现1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索.search{width:80%;}.search_arr{border:1p
假设在搜索框search中输入:“asp编程”先得到输入框中的内容:search=request("search")然后将这两个值分别取出来s=split(se
完整效果演示首先完成这个伪搜索框src/components/search/index.vue(通用搜索框组件){{placeholder}}import{de
search类型:在网站中,用户经常进行信息搜索,HTML5增加了搜索控件,可以在搜索框中输入信息进行站点搜索。例如:
1.根据属性ID值进行定位deftest_find_element_by_id(self):#定位搜索文本框search_input=self.driver.f