深入浅析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 相关文章推荐
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
JS数组方法reduce的用法实例分析
Mar 03 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
基于mysql的bbs设计(一)
2006/10/09 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python实现提取文章摘要的方法
2015/04/21 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python的时间模块datetime详解
2017/04/17 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
医院义诊活动总结
2014/07/04 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
教学质量月活动总结
2015/05/11 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
Python之matplotlib绘制饼图
2022/04/13 Python
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android