做这个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搜索框的更多相关文章

  1. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  2. VUE模仿百度搜索框，按上下方向键及回车键实现搜索选中效果

    逻辑介绍: 1.表单获取焦点时,显示搜索建议框 2.输入内容时,请求后台接口,并将返回的数据展示在搜索建议框内 3.表单获取焦点情况下,按键盘上下箭头可实现搜索列表项的切换,按回车可以选择当前激活的选 ...

  3. iOS开发UI篇 -- UISearchBar 属性、方法详解及应用（自定义搜索框样式）

    很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...

  4. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

  5. java简单的实现搜索框的下拉显示相关搜索功能

    最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...

  6. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  7. WPF 自定义搜索框

      控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...

  8. weui 搜索框

    点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...

  9. 搜索框(Thinkphp5.0)

    1.普通关键词搜索框 模板部分代码: <form name='searchform' action='/index.php/module/controller/search' method='g ...

随机推荐

  1. Tensorflow之MNIST手写数字识别：分类问题（1）

    一.MNIST数据集读取 one hot 独热编码独热编码是一种稀疏向量,其中:一个向量设为1,其他元素均设为0.独热编码常用于表示拥有有限个可能值的字符串或标识符优点:   1.将离散特征的取值扩展 ...

  2. Python网络编程基础 ❷ 基于upd的socket服务 TCP黏包现象

    TCP的长连接 基于upd的socket服务 TCP黏包现象

  3. 洛谷P3157 [CQOI2011]动态逆序对

    题目大意: 给定\(1\)到\(n\)的一个排列,按照给定顺序依次删除\(m\)个元素,计算每个元素删除之前整个序列的逆序对数量 基本套路:删边变加边 那么我们不就是求满足\(pos_i<pos ...

  4. VS2019 远程调试

    碰到一个问题,在本机调试没有任何问题,部署到测试环境的CentOS 7 上,抛出异常.为解决这个问题,使用远程调试. 第一步,设置远程链接 第二步,Debug--Attach  to Process ...

  5. 在jenkins中处理外部命令7z的异常

    powershell中有自己的异常捕获机制,但是在jenkins中处理第三方工具抛出的异常时,一直抓不到,疑惑了很久,本篇内容主要描述此次过程及解决方案. powershell可以处理外部异常 try ...

  6. sentry 9.1.1docker版onepremise过程记录

    sentry安装:https://github.com/getsentry/onpremise正确使用此文档安装步骤,安装版本9.1.1-onbuild,这个需要自改Dockerfile. 备注:构建 ...

  7. git同步本地数据到github——第一次使用和以后使用

    git作为版本控制工具十分的好用,但是在使用的过程中,会因为仓库版本的不同步出现很多错误 一.git简单的原理交互模型 从下面的model中我们看到在不创建分支情况下始终是远程的origin和本地的m ...

  8. 【杂文】CSP2019蒟蒻AFO(假)记

    [杂文]CSP2019蒟蒻AFO(假)记 [初赛前 N 天] 时间:2019-10-15 今晚 \(2012\) 的初赛题做到心态爆炸,选择考计算机基础知识一脸懵逼,填空和后面一道大模拟直接跳过,最后 ...

  9. WPF 动态资源 DataContext="{DynamicResource studentListKey}" DisplayMemberPath="Name"

    public class StudentList:ObservableCollection<Student> { public List<Student> studentLis ...

  10. Asp.netCore 3.0 Web 实现Oauth2.0微信授权登陆的测试

    1:Oauth2.0授权的流程截图 官方流程如下: 1 第一步:用户同意授权,获取code 2 第二步:通过code换取网页授权access_token 3 第三步:刷新access_token(如果 ...