用HTML+CSS实现一下百度顶部的搜索框 |
您所在的位置：网站首页 › 搜索搜索一下百度 › 用HTML+CSS实现一下百度顶部的搜索框 |
用HTML+CSS实现一下百度顶部的搜索框
|
用HTML+CSS实现一下百度顶部的搜索框 原页面是这样的 这个是做出来的样子。 不多说，直接上代码。（第一次写博客，多多包涵【抱拳】） 这是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); }可能优化的不太够，希望能有所帮助，大家有更好的写法也可以分享出来，共同学习，共同进步吖~ |
我在这里采取的是原页面的写法，用的精灵图实现，后面用的两个input框，在加一个iconfont图标加定位简单实现了一下。
加了一个点击时让出现一个蓝色边框，也是原网页的做法。 
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |