用HTML+CSS实现一下百度顶部的搜索框

2024-07-01 04:50| 来源: 网络整理| 查看: 265

原页面是这样的原页面在这里插入图片描述我在这里采取的是原页面的写法，用的精灵图实现，后面用的两个input框，在加一个iconfont图标加定位简单实现了一下。

这个是做出来的样子。在这里插入图片描述加了一个点击时让出现一个蓝色边框，也是原网页的做法。

不多说，直接上代码。（第一次写博客，多多包涵【抱拳】）

这是html代码部分

这是CSS代码。

* { margin: 0; padding: 0; } .top-img { width: 420px; height: 131px; background-color: pink; margin: 80px auto; background: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png) no-repeat -60px -102px; zoom: .5; } .top-search { width: 680px; height: 45px; margin: 30px auto; } .search-box { display: flex; position: relative; } .search-left { width: 545px; height: 45px; border: 2px solid rgb(196, 199, 206); border-top-left-radius: 10px; border-bottom-left-radius: 10px; outline-color: rgb(78, 110, 242); } .icon-xiangji { position: absolute; right: 150px; top: 12px; font-size: 24px; color: rgb(196, 199, 206); } .search-right { color: #fff; font-size: 18px; width: 110px; height: 49px; border: 0px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background-color: rgb(78, 110, 242); }

可能优化的不太够，希望能有所帮助，大家有更好的写法也可以分享出来，共同学习，共同进步吖~

【本文地址】

公司简介

联系我们