深入浅析search 搜索框的写法


Posted in Javascript onAugust 02, 2016

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

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

深入浅析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 相关文章推荐
Javascript String.replace的妙用
Sep 08 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 #Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 #Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 #Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 #Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 #Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 #Javascript
浅谈Cookie的生命周期问题
Aug 02 #Javascript
You might like
C# Assembly类访问程序集信息
2009/06/13 PHP
openPNE常用方法分享
2011/11/29 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
详解python中@的用法
2019/03/27 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python面向对象实现方法总结
2020/08/12 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
Delphi软件工程师试题
2013/01/29 面试题
微观物理专业自荐信
2014/01/26 职场文书
医院检讨书范文
2014/02/01 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
小学优秀教师材料
2014/12/15 职场文书
护理心得体会范文
2016/01/22 职场文书
商业计划书之服装
2019/09/09 职场文书