⽤HTML+CSS实现⼀下百度顶部的搜索框用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(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>
可能优化的不太够，希望能有所帮助，⼤家有更好的写法也可以分享出来，共同学习，共同进步吖~