模仿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 ...
随机推荐
- 杂记（C语言中的不知怎么归类的细小点。）
1.int a; printf("%d",2a); 从数学上讲,没有丝毫问题,但是在计算机上,就无法识别! 纠正:应写成2*a. 2.关于输出结果保留一位小数的:不应 ...
- 基于Nginx和openssl实现https
[root@localhost ssl]# yum -y install openssl [root@localhost ssl]# mkdir /usr/local/nginx/conf/ssl/ ...
- mysql用户与权限操作
本文所有操作均在mysql8.1下验证,mysql5.x部分语句不适用. 1.创建用户 '; # 创建用户test,密码123456,%表示允许在所有主机登陆 用户表为mysql库小的user表,Ho ...
- matplotlib动态绘图
目录 package Process 解决中文乱码问题 simple_plot() scatter_plot() three_dimension_scatter() Jupyter notebook ...
- Linux高性能服务器编程，书中的 shell 命令
记录<Linux高性能服务器编程>书里面讲解到的若干 shell 命令 arp 命令查看ARP高速缓存: [root@VM_0_10_centos heliang]# arp -a ? ( ...
- docker入门与部署微服务--学习笔记
最近公司进一步去windows,走向 linux+云化. 原来的一大坨windows虚拟机服务器都要转向linux, 既然走向linux的话,那么docker肯定是要涉足的. 故学习了docker入门 ...
- redis命令之 ----key（键）
DEL DEL key [key ...] 删除给定的一个或多个 key . 不存在的 key 会被忽略. DUMP DUMP key 序列化给定 key ,并返回被序列化的值,使用 RESTORE ...
- 奥展项目笔记07--vue绑定下拉框和checkbox总结
1.vue绑定下拉框 <div class="col-md-1 data"> <select class="form-control " v- ...
- h5中的audio音频标签与对应的dom对象
HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象. H5中的<audio>标签 此标签是H ...
- 汇总Anaconda与ROS冲突解决方法
汇总一下在网上找到的Anaconda与ROS冲突解决方法,如果还有其他人找到其他方法,欢迎留言. anaconda和ros的安装就不介绍了. 1. 在某视频网站上一个印度小哥提出的方法 安装完成后,在 ...