js+css+htm写出百度搜索框
时间: 2023-07-25 12:38:42 浏览: 63
好的,下面是代码:
HTML代码:
```
<div class="search-container">
<form action="https://www.baidu.com/s">
<input type="text" placeholder="百度一下,你就知道" name="wd">
<button type="submit">搜索</button>
</form>
</div>
```
CSS代码:
```
.search-container {
display: flex;
justify-content: center;
margin-top: 50px;
}
form {
display: flex;
align-items: center;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 20px;
padding: 5px;
}
input[type="text"] {
border: none;
outline: none;
font-size: 16px;
padding: 5px;
flex: 1;
}
button[type="submit"] {
border: none;
outline: none;
background-color: #3385FF;
color: #fff;
font-size: 16px;
padding: 5px 10px;
border-radius: 20px;
cursor: pointer;
margin-left: 10px;
}
```
这样,一个简单的百度搜索框就完成了。
相关推荐
![](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)