做这个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. socket 与 websocket的区别

    区别: socket并不是一个协议,而是抽象出来的一层,应用于应用层和传输控制层之间的一组接口, socket是传输控制层协议,websocket是应用层协议 websocket是什么样的协议,具有什 ...

  2. Vue生命周期钩子---2

    vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...

  3. 201271050130-滕江南-《面向对象程序设计（java）》第十五周学习总结

    201271050130-滕江南-<面向对象程序设计(java)>第十五周学习总结 博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.c ...

  4. （day50）二、文件配置、ORM

    目录 一.静态文件 (一)配置html文件 (二)什么是静态文件 (三)静态文件配置 (四)静态文件动态绑定 (五)form表单POST请求配置 二.request方法初识 (一)request.me ...

  5. LG4341/BZOJ2251 「BJWC2010」外星联络 Trie

    问题描述 LG4341 BZOJ2251 BZOJ需要权限号 题解 字符串的性质:一个字符串\(s\)所有的字串,等于\(s\)所有后缀的前缀. 枚举这个字符串的每一个后缀,将其插入一个\(\math ...

  6. 使用Python拆分数据量大的CSV文件（亲测有效）

    转载:https://www.cnblogs.com/FYZHANG/p/11629075.html 一次就运行成功了,感谢博主分享 #!/usr/bin/env python3 # -*- # @F ...

  7. 支付宝AopSdk在dotnet core下的实现

    随着项目都迁移到了dotnet core下,阿里的支付宝也需要随着项目迁移.之前在.Net Framework下用到了阿里提供的AopSdk和F2FPay两个程序集,支付宝官方提供的只支持Framew ...

  8. iOS Workflow 分享 - Debug Action

    有时候我们想要知道别人的 app 在调用 Share Extension 时提供了什么类型的数据以及具体数据是什么,我们可以自己在 Xcode 里面写个 app 去接收别人 app 的数据,但我们也可 ...

  9. 微信小程序跳转web-vie时提示appId无法读取：Cannot read property 'appId' of undefined

    微信小程序报web-view错无法读取appId:Cannot read property 'appId' of undefined 问题描述: 我以前一直如下写代码没报错也都是可以使用的,并且小程序 ...

  10. Vue.js 源码分析(二十二) 指令篇 v-model指令详解

    Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语 ...