css仿百度首页如何加小相机

在经过一番思索后，我决定仿照百度首页并在搜索框右侧添加一个小相机图标。首先，我们需要在HTML中添加一个包含搜索框的div元素，并设置合适的样式：

div class="search-box">
        input type="text" placeholder="请输入搜索内容"/>
    /div>
.search-box{
        width: 500px;
         height: 40px;
         border: 1px solid #ccc;
         padding: 10px;
         position: relative;
         border-radius: 20px;
}
     

接下来，我们需要添加一个相机图片，并使其定位到搜索框的右侧。可以使用绝对定位来实现：

div class="search-box">
        input type="text" placeholder="请输入搜索内容"/>
        img src="camera.png" alt="相机" class="camera">
    /div>
.camera{
        position: absolute;
         top: 50%;
         right: 10px;
         height: 24px;
         transform: translateY(-50%);
}
 

最后，我们需要将图片的层级设置为更高，以确保其在搜索框上方显示：

.camera{
        position: absolute;
         top: 50%;
         right: 10px;
         height: 24px;
         transform: translateY(-50%);
        z-index: 1;
}
     

通过以上步骤，我们可以成功地在搜索框右侧添加一个小相机图标，使其与百度首页类似。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！