模仿51cto搜索框
做这个demo遇见的问题
1==>input type=submit有默认样式
padding:1px 6px
所以将他去除
2==>input submit有默认样式
去除默认边框 border: 0;
3==>两个input不能够顶部对齐
解决：让其中一个左浮动
4==>子元素浮动，父级元素为0怎么解决
https://www.cnblogs.com/liangfc/p/7392344.html
方法一
这种方法就是向父容器的末尾再插入一个额外的标签，
并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，缺点就是需要额外的标签。
方法二（我选的这一种）
父元素:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
方法三 设置overflow为hidden或者auto
这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，
你最好是能在多个浏览器上测试你的页面。如无特殊情况，一般推荐使用hidden属性。
5==>在搜索框种展现的热词
（热词）要使用绝对定位，他的父级元素相对定位。
ps==>form元素外面时可以包裹div的哈！！
搜索框获得焦点 热词消失
6==>一刷新就获得焦点。
<label id="lable" class="first" for="tel"onclick="fun()" >
<script>
function fun(){
document.getElementById("tel_").focus();//tel_为文本框的id
}
</script>
原文链接：https://blog.csdn.net/legendaryhaha/article/details/83690117
7==>光标放进文本框就会触发
sousuokuang.onfocus=function(){
console.log("ada")
}
8==>// 文本框失去焦点
sousuokuang.onblur=function(){
hot.style.display="block";
}
9==>在使用精灵图片时，需要测量图片的位置
x轴的坐标一般为正 y轴为负值
10==> background复用 背景颜色 图片 图片坐标
background:#21b8ff url(./s.png) 62px -44px;
<body>
<p>搜索框
两个input不能够顶部对齐<br/>
子元素浮动父级元素为0怎么解决<br/>
搜索框获得焦点 热词消失
</p>
<div class="maxformbox">
<form id="feombox">
<input type="search" id="sousuokuang" name="s" placeholder="想学什么"><input type="submit" id="tijiao" name="submit" value="" >
</form> <div class="hotKey" id="hotci">
<a href="https://edu.51cto.com/course/19420.html?utm_source=hotkw" target="_blank">王佩丰新课</a>
<a href="http://home.51cto.com/members/in-fo" target="_blank">VIP会员</a>
<a href="https://edu.51cto.com/course/16687.html?source=hotkw" target="_blank">修图PS</a>
</div>
</div>
</body>
body{
background: #ccc;
}
#feombox{
width: 624px;
height:42px;
border:1px solid #21b8ff;
overflow:hidden;/*清除子元素浮动*/
}
#sousuokuang{
padding:;
width: 578px;
height:42px;
border: none;
outline: none;
text-indent: 20px;
float: left;/*解决不能够顶部对齐*/
}
#tijiao{
padding:;
width: 46px;
height:42px;
background:#21b8ff url(./s.png) 62px -44px;
border:;
}
.maxformbox{
width: 624px;
position: relative;
}
/*热刺*/
.hotKey{
position: absolute;
right: 60px;
top: 10px;
}
.hotKey a{
text-decoration: none;
display: inline-block;
width: 90px;
height:24px;
line-height: 24px;
text-align: center;
padding: 0px 5px;
margin-left: 10px;
background: #efedee;
border-radius: 23px;
}
<script type="text/javascript">
var hot=document.querySelector("#hotci");
var sousuokuang=document.querySelector("#sousuokuang"); // 文本框获得焦点
sousuokuang.onfocus=function(){
hot.style.display="none";
} // 文本框失去焦点
sousuokuang.onblur=function(){
hot.style.display="block";
} </script>
模仿51cto搜索框的更多相关文章
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- VUE模仿百度搜索框，按上下方向键及回车键实现搜索选中效果
逻辑介绍: 1.表单获取焦点时,显示搜索建议框 2.输入内容时,请求后台接口,并将返回的数据展示在搜索建议框内 3.表单获取焦点情况下,按键盘上下箭头可实现搜索列表项的切换,按回车可以选择当前激活的选 ...
- iOS开发UI篇 -- UISearchBar 属性、方法详解及应用（自定义搜索框样式）
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
- 用jsonp实现搜索框功能
用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...
- java简单的实现搜索框的下拉显示相关搜索功能
最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- WPF 自定义搜索框
控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...
- weui 搜索框
点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...
- 搜索框(Thinkphp5.0)
1.普通关键词搜索框 模板部分代码: <form name='searchform' action='/index.php/module/controller/search' method='g ...
随机推荐
- 961.重复N次的元素
在大小为 2N 的数组 A 中有 N+1 个不同的元素,其中有一个元素重复了 N 次. 返回重复了 N 次的那个元素. 示例 1: 输入:[1,2,3,3]输出:3示例 2: 输入:[2,1,2,5, ...
- C++ class外的 << 重载，输出流，重载示例。不应该定义类内的<<重载
#include <iostream> // overloading "operator << " outside class // << 应该 ...
- jTopo介绍（一）
jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包.jTopo关注于数据的图形展示,它是面向开发人员的,需要进行 ...
- luoguP4151 [WC2011]最大XOR和路径
题意 这题有点神啊. 首先考虑注意这句话: 路径可以重复经过某些点或边,当一条边在路径中出现了多次时,其权值在计算 XOR 和时也要被计算相应多的次数 也就是说如果出现下面的情况: 我们可以通过异或上 ...
- SQL Server 修改数据库
1. 可视化界面修改数据库 (1)右击数据库,然后选择属性. (2)在工具选项卡中,选择[文件]页,可以更改所有者,文件大小,自增量等参数. 2. 使用ALTER Database修改数据库 (1) ...
- 小白专场-堆中的路径-c语言实现
目录 一.题意理解 二.堆的表示及其操作 三.主程序 更新.更全的<数据结构与算法>的更新网站,更有python.go.人工智能教学等着你:https://www.cnblogs.com/ ...
- 插头Dp总结
T1 HDU1693:Eat the Trees 题目大意:给出n*m的方格,有些格子不能铺线,其它格子必须铺,可以形成多个闭合回路.问有多少种铺法? 插头Dp板子题,题目要求可以是多个回路, 只需要 ...
- HTML连载31-制作一个百度首页
一. 我们制作一个百度首页作为练习,可直接复制该代码保存后缀名为.html来查看 <!DOCTYPE html> <html lang="en"> < ...
- vue 移动端禁止浏览器后退，禁止安卓和ios点击后退操作乱跳页面
开发微信公众号网页,页面登录成功之后,是禁止再次返回到登录页. 我在页面设置了让禁止跳到登录页,可是在手机上有自带的微信浏览器后退按钮,所以必须要禁止浏览器后退,才能禁止后退到登录页. 刚开始百度,查 ...
- ASCll编码,