请用前端开发制作一个搜索框样式放到一张图片右边
时间: 2024-03-20 15:40:26 浏览: 8
好的,我可以给您提供一个简单的实现示例,代码如下:
HTML部分:
```
<div class="search-container">
<div class="search-box">
<input type="text" placeholder="请输入搜索内容">
</div>
<div class="search-img">
<img src="your-image-url">
</div>
</div>
```
CSS部分:
```
.search-container {
position: relative;
width: 500px; /* 可根据实际情况调整 */
height: 50px; /* 可根据实际情况调整 */
margin: 0 auto; /* 居中对齐 */
}
.search-box {
float: left;
width: calc(100% - 80px); /* 80px为图片宽度,可根据实际情况调整 */
height: 100%;
}
.search-box input {
width: 100%;
height: 100%;
padding: 10px;
border: none;
border-radius: 5px;
}
.search-img {
position: absolute;
top: 0;
right: 0;
width: 80px; /* 可根据实际情况调整 */
height: 100%;
}
.search-img img {
width: 100%;
height: 100%;
}
```
以上代码实现了一个搜索框样式放到一张图片右边的效果,您可以根据实际情况进行相应的调整和优化。