深入浅析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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
JQuery for与each性能比较分析
May 14 Javascript
JavaScript中对象介绍
Dec 31 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 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
xml+php动态载入与分页
2006/10/09 PHP
详解:――如何将图片储存在数据库里
2006/12/05 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php实现对象克隆的方法
2015/06/20 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
菜单效果
2006/10/14 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
Python Queue模块详解
2014/11/30 Python
Python检测网络延迟的代码
2018/05/15 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
Python基于execjs运行js过程解析
2020/11/27 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
清洁工岗位职责
2014/01/29 职场文书
安全口号大全
2014/06/21 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle