html+css 百度搜索框(搜索框+搜索按钮+小图标)

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:925篇文章
  • 发布时间:2022年10月14日 23:08:02
  • 所属分类:CSS, html, WEB前端
  • 阅读次数:755次阅读
  • 标签:

封装搜索框小组件

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

看下效果吧

image.png

效果图

看着还不错吧!

 上代码看一下吧

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就能使用小图标了

顶一下
(1)
100%
订阅 回复
踩一下
(0)
0%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!