html设计一个漂亮的搜索栏
时间: 2023-10-04 14:06:02 浏览: 61
好的,以下是一个简单的HTML搜索栏设计示例:
```html
<div class="search-container">
<form action="/search">
<input type="text" placeholder="搜索...">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
```
你可以添加自己的CSS样式来美化这个搜索栏。例如,可以通过添加以下CSS使其看起来更漂亮:
```css
.search-container {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.search-container input[type="text"] {
padding: 10px;
border: none;
border-radius: 5px;
font-size: 18px;
width: 300px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.search-container button[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px;
margin-left: 5px;
font-size: 18px;
cursor: pointer;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.search-container button[type="submit"]:hover {
background-color: #3e8e41;
}
```
这里使用了Flexbox布局来居中搜索栏,并使用了一些基本的CSS样式来使其看起来更漂亮。你也可以根据自己的需求修改这些样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.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)