深入浅析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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
Node 模块原理与用法详解
May 13 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php 文件上传类代码
2011/08/06 PHP
PHP面向对象概念
2011/11/06 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
js实现左右轮播图
2020/01/09 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python学生信息管理系统(初级版)
2018/10/17 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Python如何生成xml文件
2020/06/04 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
《花的勇气》教后反思
2014/02/12 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014年班务工作总结
2014/12/02 职场文书
元宵节寄语大全
2015/02/27 职场文书
筑梦中国心得体会
2016/01/18 职场文书
什么是SOLID
2022/03/24 Javascript