帮我写一个查询框的代码
时间: 2023-06-13 15:03:55 浏览: 45
好的,以下是一个简单的查询框的HTML和CSS代码示例:
HTML代码:
```
<div class="search-container">
<form action="/search">
<input type="text" placeholder="搜索...">
<button type="submit">搜索</button>
</form>
</div>
```
CSS代码:
```
.search-container {
display: flex;
justify-content: center;
}
.search-container form {
display: flex;
align-items: center;
}
.search-container input[type="text"] {
padding: 10px;
border: none;
border-radius: 5px 0 0 5px;
}
.search-container button[type="submit"] {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.search-container button[type="submit"]:hover {
background-color: #3e8e41;
}
```
这个查询框包含一个文本输入框和一个搜索按钮,可以根据需要进行修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)