随笔之——各大热门网站search 搜索框的写法,浅析!
随笔之——各大热门网站search 搜索框的写法,浅析!
关于搜索框,写法有很多种,搜索框这一块是一个比较细的活,要先计算好他的高、宽;
下面我就以京东搜索框为例,给大家浅析一下。
上面就是最终search框效果图。
先送出代码>>>>>>
1
|
< span style="color: #ff00ff; 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 搜索框的写法,浅析!的更多相关文章
- 十大高明的Google搜索技巧
WHY 对于google检索,有时需要技巧会得到更好的检索结果,不用简单输入关键字检索后,一个个去浏览.对于这些技巧,基本都知道,但是如果不经常用,总是忘了,又得重新搜索下具体使用方法,这里就把它放到 ...
- 2015年十大热门Android开源新项目
2015年十大热门Android开源新项目 2015 即将结束,又到了大家喜闻乐见的年终盘点时刻啦,今天给大家盘点一下 2015 年 Android 开发领域新出现的 10 大热门开源项目.数据来自于 ...
- 如何使用油猴脚本不要vip就能观看各大视频网站如腾讯,爱奇艺等的vip视频
如何使用油猴脚本不要vip就能观看各大视频网站如腾讯,爱奇艺等的vip视频 首先打开谷歌商店(这里需要fq,如不能fq的小伙伴请看上面写的Chrome怎么访问外网) 搜索Tampermonkey,点击 ...
- mysql数据库优化课程---7、网站的搜索技术怎么选
mysql数据库优化课程---7.网站的搜索技术怎么选 一.总结 一句话总结: 1.量很小(像小网站)---like2.量大一点()---标签3.量超级大(像百度)---搜索引擎 1.数据库中取一列比 ...
- 【起航计划 032】2015 起航计划 Android APIDemo的魔鬼步伐 31 App->Search->Invoke Search 搜索功能 Search Dialog SearchView SearchRecentSuggestions
Search (搜索)是Android平台的一个核心功能之一,用户可以在手机搜索在线的或是本地的信息.Android平台为所有需要提供搜索或是查询功能的应用提 供了一个统一的Search Framew ...
- 各大就业网站对web前端的就业要求
今日与女神有约,在[web前端学习部落22群]有直播公开课,喜欢的朋友赶紧加入吧!随着高等教育的普及,高校毕业生的人数每年都以极快的速度增长,数据显示,2016年,高校毕业生多达765万人,比2015 ...
- Ternary Search Tree 应用--搜索框智能提示
前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...
- 程序员十大热门flag,有你的吗?
2018的尾声,南方人期盼已久的下雪天终于到了,实在是太鸡冻了! 而赏雪的喜悦也伴随着寒冷的忧伤 早上起床越来越难,衣服怎么裹都还是冷 这时,穿搭届的神话般的人物——程序员们,可能又要引起轰动了吧! ...
- team330团队铁大兼职网站使用说明
项目名称:铁大兼职网站 项目形式:网站 网站链接:http://39.106.30.16:8080/zhaopinweb/mainpage.jsp 开发团队:team330 网站上线时间:2018年1 ...
随机推荐
- JavaWeb---总结(十八)JSP属性范围
所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...
- java中的异常理解
java异常是java提供的用于处理程序中错误的一种机制.所谓错误是指在程序运行的过程中发生的一些异常事件(如:除0溢出,数组下标越界,所要读取的文件不存在).设计良好地程序应该在程序异常发生时提供处 ...
- linux如何查看系统信息
一:cpu [root@srv /]# more /proc/cpuinfo | grep "model name" model name : Intel(R) Xeon(R ...
- JS转码
JS转码是解决XSS漏洞的方案,XSS漏洞是指对dom操作时,出现特殊字符造成的安全泄露. XSS漏洞的主要来源有: 1.URL(需要对url进行encodeURIComponent转码). 2.数据 ...
- CentOS_PHP_NGINX_FastCGI
yum安装nginx,它会默认作为一个服务加到系统中,启动nginx: service nginx start/nginx -s start 他有4个参数(start|stop|restart|rel ...
- php mysql实体字符
问题描述:php提交数据的时候遇到特殊符号,需要转义才可以提交数据 如:提交单引号,双引号... php代码: $str = "我但是'sdf6448"; $data['goods ...
- div文字超出
效果一:div文字超出处理 <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:elli ...
- LeetCode —— Merge k Sorted Lists
/* ** 算法的思路: ** 1.将k个链表的首元素进行建堆 ** 2.从堆中取出最小的元素,放到链表中 ** 3.如果取出元素的有后续的元素,则放入堆中,若没有则转步骤2,直到堆为空 */ #in ...
- SVN合并操作实践
大家都知道,SVN是很多公司管理代码的版本控制工具,当分支越来越多,版本迭代越来越频繁的时候,经常会出现代码冲突的头疼事儿,这里讲一下鲨鱼遇到过关于代码版本控制的一些事,最后做个小例子,看图描述. 为 ...
- jQuery,title、仿title功能整理
如图:仿 title="查看" note="查看",note 可换成其他 样式: /*重写,标签title层*/#titleRewrite {position: ...