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

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

原页面是这样的
用HTML+CSS实现一下百度顶部的搜索框_第1张图片
我在这里采取的是原页面的写法,用的精灵图实现,后面用的两个input框,在加一个iconfont图标加定位简单实现了一下。

这个是做出来的样子。
用HTML+CSS实现一下百度顶部的搜索框_第2张图片
加了一个点击时让出现一个蓝色边框,也是原网页的做法。
用HTML+CSS实现一下百度顶部的搜索框_第3张图片

不多说,直接上代码。(第一次写博客,多多包涵【抱拳】)

这是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代码。


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

你可能感兴趣的:(新手代码,css,html,百度)