基于JavaScript实现百度搜索框效果

本文实例为大家分享了js实现百度搜索框展示效果的具体代码，供大家参考，具体内容如下

具体代码如下:

 
 
 
 *{
  margin:0;
  padding:0;
  font-size:14px;
 }
 input{
  display:block;
  outline:none;
 }
 a{
  display:block;
  text-decoration: none;
  color:#000;
 }
 a:hover,a:active,a:target{
  text-decoration: none;
  color:#000;
 }
 ul,li{

  list-style:none;
 }
 .box{
  position:absolute;
  top:20px;
  left:50%;
  margin-left:-250px;
  width:500px;
 }
 .box input{
  width:300px;
  height:35px;
  padding:0 10px;
  border:1px solid #008000;
 }
 .box ul{
  display:none;
  position:relative;
  top:-1px;
  border:1px solid #008000;
 }
 .box ul li,.box ul li a{
  height:35px;
  line-height:35px;
  
 }
 .box ul li a{
  padding:0 10px;
 }
 .box ul li a:hover{
  background:#ccc;
 }
 


 
 
 

  
111111111111
  
2222222222
  
33333333333
  
444444444444
  
5555555555555
 
 


 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。