深入浅析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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
js微信分享接口调用详解
Jul 23 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
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
php桥接模式应用案例分析
2019/10/23 PHP
js left,right,mid函数
2008/06/10 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
node.js中的path.basename方法使用说明
2014/12/09 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python字典对象实现原理详解
2019/07/01 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
Hibernate持久层技术
2013/12/16 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
新品发布会策划方案
2014/06/08 职场文书
小学见习报告
2014/10/31 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
springboot读取nacos配置文件
2022/05/20 Java/Android