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

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

原页面是这样的

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

这个是做出来的样子。

加了一个点击时让出现一个蓝色边框，也是原网页的做法。

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

这是html代码部分

<body>
    <div class="top-img"></div>
    <div class="top-search">
        <div class="search-box">
            <input type="text" name="search" class="search-left">
            <span class="iconfont icon-xiangji"></span>
            <input class="search-right" type="submit" name="btn" id="su" value='百度一下'>
        </div>
    </div>
</body>

这是CSS代码。

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .top-img {
            width: 420px;
            height: 131px;
            background-color: pink;
            margin: 80px auto;
            background: url(https://www.baidu/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);
        }
    </style>