用前端开发制作一个搜索框样式 <div class="search-container"> <input type="text" placeholder="搜索"> <button type="submit">搜索</NOtton> </div><img src="bg.jpg"> </div></div> 放到一张图片里面
时间: 2023-08-14 19:36:29 浏览: 60
好的,你可以使用以下代码实现一个简单的搜索框样式,并把它放到一张图片中:
```
<div style="background-image: url('bg.jpg'); background-size: cover;">
<div class="search-container" style="position: relative; width: 50%; margin: auto; top: 50%; transform: translateY(-50%);">
<input type="text" placeholder="搜索" style="padding: 10px; border: none; border-radius: 5px; width: 70%; font-size: 18px;">
<button type="submit" style="background-color: #4CAF50; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 18px;">搜索</button>
</div>
</div>
```
这段代码会在一张背景图片上居中显示一个搜索框和一个按钮,搜索框的宽度为70%。你可以将上述代码复制到你的 HTML 文件中,然后将 `bg.jpg` 替换为你自己的图片路径。
相关问题
用前端开发制作一个搜索框样式(<input type="text" placeholder="搜索"> <button type="submit">搜索</NOtton>)放到一张图片里面
好的,以下是一个简单的搜索框样式的前端代码,将其放到一张图片中可以使用CSS的background-image属性:
```html
<div class="search-container">
<input type="text" placeholder="搜索">
<button type="submit">搜索</button>
</div>
```
```css
.search-container {
background-image: url("your-image-url");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 300px; /*根据图片大小自行调整*/
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px 0 0 5px;
}
button[type="submit"] {
padding: 10px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
```
你需要将上述代码中的"your-image-url"替换为你自己的图片链接。
<view class="container"> <view class="search-bar"> <input class="search-input" placeholder="请输入搜索关键词"/> <button class="search-btn">搜索</button> </view> <view class="category"> <!-- 图书分类 --> </view> <view class="recommend"> <!-- 推荐图书 --> </view> <view class="hot"> <!-- 热门图书 --> </view> </view>
这是一段简单的 HTML 代码,用于显示一个搜索框以及图书分类、推荐图书和热门图书等内容。其中,<view> 标签是小程序中的自定义组件,相当于 HTML 中的 <div> 标签。在小程序中,我们通常使用 <view> 标签来构建页面结构。在 <view> 中,我们可以放置其他组件或者标签,以实现页面的不同功能和效果。在这段代码中,<input> 和 <button> 标签用于创建搜索框中的输入框和搜索按钮,而其余的 <view> 标签则用于放置不同的图书内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)