深入浅析search 搜索框的写法
更新时间：2016年08月02日 09:43:27 作者：当背包没有包
本文以京东搜索框为例给大家浅析search 搜索框的写法，本文介绍的非常不错，需要的朋友可以参考下
关于搜索框，写法有很多种，搜索框这一块是一个比较细的活，要先计算好他的高、宽；
下面我就以京东搜索框为例，给大家浅析一下。
上面就是最终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 搜索框的写法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了JavaScript鼠标悬停事件用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要给大家介绍了关于TypeScript判断对象类型的4种方式代码,TypeScript能根据一些简单的规则推断(检查)变量的类型,你可以通过实践很快的了解它们,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了js中settimeout方法加参数,需要的朋友可以参考下2014-02-02
javascript设计模式 – 抽象工厂模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 抽象工厂模式,结合实例形式分析了javascript抽象工厂模式相关概念、原理、定义、应用场景及操作注意事项,需要的朋友可以参考下2020-04-04
javascript parseUrl函数(来自国外的获取网址url参数)
在外国一博客看到一个很好的函数，获取网址url等地址参数。非常不错，值得参考与收藏。2010-06-06
面试题中有一题数组去重，首先想到的是对象存键值的方法可是遇到不同类型又能转换成同样的字符串的就完了接下来为大家介绍下双重循环/存键值和类型实现去重，感兴趣的各位可以参考下哈2013-03-03
通过点击预约按钮即可生成二维码凭码入校参观,下面小编通过实例代码讲解微信小程序实现预约生成二维码功能,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了JavaScript中判断整数的多种方法总结,本文总结了5种判断整数的方法,如取余运算符判断、Math.round、Math.ceil、Math.floor判断等,需要的朋友可以参考下2014-11-11
相信大家都知道，ES5及之前时代的JavaScript中this的绑定机制是让很多开发者头疼不已的事情。this 的绑定变化多端，让笔者也吃了不少亏。所以本文总结了this的四条绑定规则，在此记录，以防自己遗忘，也方便他人参考借鉴。下面来一起看看吧。2016-09-09
这篇文章主要介绍了JavaScript中的变量作用域介绍,本文同时讲解了一个新概念变量的作用域链,需要的朋友可以参考下2014-12-12
最新评论