做这个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. luoguP3979 遥远的国度

    换根的树剖 https://www.luogu.org/problem/P3979 题意: (出题人口活好.... 给定一棵以 root 为根的 n 个点的有根树,对于任意一个点 x, 给定他 的点权 ...

  2. Python面试题分享——图迹信息科技

    本帖最后由 逆风TO 于 2019-5-23 14:25 编辑 公司名称:西安图迹信息科技有限公司 公司地址:锦业路69号创业研发园瞪羚谷A座9层 主营概况:2013年成立,大数据应用工程中心,为五大 ...

  3. python线程类的start()和run()

    start()方法: 开始线程活动. 对每一个线程对象来说它只能被调用一次,它安排对象在一个另外的单独线程中调用run()方法,而非当前所处的线程,当该方法在同一个线程对象中被调用超过一次时,会引入R ...

  4. 洛谷 P5594 【XR-4】模拟赛

    洛谷 P5594 [XR-4]模拟赛 洛谷传送门 题目描述 X 校正在进行 CSP 前的校内集训. 一共有 nn 名 OIer 参与这次集训,教练为他们精心准备了 mm 套模拟赛题. 然而,每名 OI ...

  5. java中的转义字符（遇到再进一步总结）

    一.常见的转义字符转移字符对应的英文是escape character , 转义字符串(Escape Sequence)字母前面加上捺斜线""来表示常见的那些不能显示的ASCII字 ...

  6. 怎样用cmd脚本添加Qt的环境变量

    在网上遍历了很久,终于找到了一个简单且令人满意的答案: 定位到PyQt5发布文件所需的plugins的位置: 新建一个名为“设置环境变量”的cmd脚本,在里面写上: wmic ENVIRONMENT ...

  7. PyCharm工具配置和快捷键使用

    PyCharm是一款高效开发Python程序的IDE,包含有自动联想.语法高亮.代码调试.管理多个版本Python解释器等功能.本文主要描述Python界面个性化定制方法(字体.颜色配置).常用配置和 ...

  8. 在Ubuntu18.04.2LTS上安装搜狗输入法

    在Ubuntu18.04.2LTS上安装搜狗输入法 一.前言 最近项目使用到了Linux系统,因此就安装了Ubuntu18.04.2这个最新的LTS的OS.整体的使用效果是不敢恭维的,特别是使用虚拟机 ...

  9. 【Java语言特性学习之四】常用集合

    java中常见的数据结构

  10. pycharm的安装与破解

    一.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=windows,下载PyCharm安装包,根据自己 ...