模仿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: 0;
    width: 578px;
    height:42px;
    border: none;
    outline: none;
    text-indent: 20px;
    float: left;/*解决不能够顶部对齐*/
  }

  #tijiao{
    padding: 0;
    width: 46px;
    height:42px;
    background:#21b8ff url(./s.png) 62px -44px;
    border: 0;
  }

.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>

 

posted @ 2019-09-15 18:51  南风晚来晚相识  阅读(259)  评论(0)  编辑  收藏  举报