帮我生成一个盒子,左侧是一张图片,右侧是一个搜索框,搜索框中显示提示语句请输入您要搜索的功能,左侧图片占比20%,右侧盒子占比80%
时间: 2023-12-01 18:03:37 浏览: 13
可以使用以下代码来实现:
```html
<div class="container">
<div class="image-box">
<img src="your-image-url" alt="your-image-alt">
</div>
<div class="search-box">
<input type="text" placeholder="请输入您要搜索的功能">
</div>
</div>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.image-box {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 20%;
}
.image-box img {
max-width: 100%;
height: auto;
}
.search-box {
flex: 4;
display: flex;
align-items: center;
justify-content: center;
width: 80%;
}
.search-box input[type="text"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
font-size: 16px;
color: #333;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
text-align: center;
}
.search-box input[type="text"]::placeholder {
color: #999;
}
</style>
```
这段代码会生成一个左侧是图片,右侧是搜索框的盒子。图片占比为20%,搜索框占比为80%,搜索框中会显示提示语句"请输入您要搜索的功能"。你可以根据自己的需求进行修改。