封装搜索框小组件

自己做的百度搜索框,复用性高,该有的样式基本都有,可以参考

看下效果吧

效果图

看着还不错吧!

 上代码看一下吧

html代码很简单,主要要注意的就是标签嵌套问题,如果标签嵌套不好,容易出bug而且修复起来超级麻烦,还容易搞不清哪里出错.

主要思路就是建一个大盒子,里面包裹一个小盒子,小盒子里面再包裹input和button,让它们居中显示就能实现大概效果,其他的样式就自己慢慢添加上去

html代码:

  <nav>
    <div class="logo">
      <a href="www.baidu.com"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></a>
    </div>
    <div class="search">
      <input type="text">
      <span class="layui-icon">&#xe660 </span>
      <div class="search_img"><a href="">按图片搜索</a></div>
      <button>百度一下</button>
    </div>
  </nav>

html代码很简单,再看看样式代码

css代码好像有点赘余,我还是不熟练代码不简洁,请不要嫌弃,百度一下大logo我给了一个宽度高度让它居中显示就行了,其他的用到了position定位(主要用于小图标) 跟 display弹性盒子(主要是让小盒子相当于大盒子居中显示),还是很简单的用了半个小时

nav{
  width: 100%;
  height: 300px;
}
.logo{
  text-align: center;
}
.logo img{
  width: 215px;
  height: 110px;
}
.search{
  width: 750px;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  min-width: 750px;
  position: relative;
}
input{
  width: 550px;
  height: 40px;
  border-right: none;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-color: #f5f5f5;
  /* 去除搜索框激活状态的边框 */
  outline: none;
}
input:hover{
  /* 鼠标移入状态 */
  box-shadow: 2px 2px 2px #ccc;  
}
input:focus{
  /* 选中状态,边框颜色变化 */
  border-color: rgb(78, 110, 242);
}
.search span{
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 170px;
}
.search span:hover{
  color: rgb(78, 110, 242);
}
button{
  width: 100px;
  height: 44px;
  background-color: rgb(78, 110, 242);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-color: rgb(78, 110, 242);
  color: white;
  font-size: 14px;
}
.search_img{
  width: 90px;
  height: 30px;
  text-align: center;
  color: #ccc;
  line-height: 30px;
  border-radius: 5px;
  position: absolute;
  top: 50px;
  right: 135px;
  box-shadow: 0px 0px 3px #ccc;
  border-color: white;
  display: none;
}
.search:hover .search_img{
  display: block;
}

注意:

小图标我用了layUi框架,感觉比直接放图片好用,方便.有需要的可以去官网下载,或者私信我我发给你,直接引入layui.css就能使用小图标了