做这个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. Vue 动态粒子特效(vue-particles)

    图上那些类似于星座图的点和线 是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 是非常炫的一种动态特效 可以在Vue项目中使用,需要安装第三方依赖 使用步骤 1. 安装 ...

  2. 第十二周Scrum会议

    本次照片 总结上周所达成的工作 做到的工作 1. 将前端页面进行了比较美观的美化 2. 实现了后台的代码的整合,同时将flask项目的整体框架搭建完成 3. 进行了数据库的建表等一些工作 遇到的难点 ...

  3. C++ 数组遍历的两种方式

    C++ 数组遍历的两种方式: #include <iostream> using namespace std; int main() { // 一维数组 ] = {, , , , }; / ...

  4. C语言——初见指针

    指针 指针是存放变量地址的变量. 由此我们可以知道了,指针存放的是变量地址且只能应用于内存中对象,指针本身也是一个变量.但是指针不仅仅可以存储变量地址,还可以是其他例如函数指针. C语言程序运行时,内 ...

  5. awk、sed、grep更适合的方向

    awk.sed.grep更适合的方向: grep 更适合单纯的查找或匹配文本 sed 更适合编辑匹配到的文本 awk 更适合格式化文本,对文本进行较复杂格式处理 关于awk内建变量个人见解,简单易懂 ...

  6. css3 rem手机自适应框架

    css3 rem手机自适应框架 rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便<pre><!DOCT ...

  7. TensofFlow函数: tf.image.crop_and_resize

    tf.image.crop_and_resize( image, boxes, box_ind, crop_size, method='bilinear', extrapolation_value=0 ...

  8. raspberry pi 4b 常见的一些配置信息

    实验记录地址 https://gitee.com/dhclly/icepi.raspberry-pi 针脚图 面包板 gnd & vcc VCC:电路的供电电压: GND:指板子里面总的地线. ...

  9. WPF Adorner 简易图片取色器

    回答MSDN问题所写. 使用Adorner+附加属性 图片类(来自这位博主的博客) /// <summary> /// 用于获取位图像素的类 /// </summary> pu ...

  10. [CrackMe]160个CrackMe之001

    吾爱破解专题汇总:[反汇编练习]160个CrackME索引目录1~160建议收藏备用 一.Serial/Name 之 暴力破解 1. 熟悉界面:很常规的一个界面,输入完账号密码之后会进行验证.  2. ...