在网页上加入一个美化的搜索框
时间: 2023-12-14 22:37:09 浏览: 175
要在网页上加入一个美化的搜索框,可以使用 CSS 样式来实现。以下是一个简单的示例代码:
```html
<div class="search-box">
<input type="text" placeholder="搜索...">
<button type="submit">搜索</button>
</div>
```
```css
.search-box {
display: flex;
align-items: center;
background: #f0f0f0;
border-radius: 4px;
padding: 6px;
}
.search-box input[type="text"] {
flex: 1;
border: none;
outline: none;
font-size: 16px;
padding: 8px;
}
.search-box button[type="submit"] {
border: none;
outline: none;
background: #007bff;
color: #fff;
font-size: 16px;
padding: 8px 16px;
border-radius: 4px;
margin-left: 8px;
cursor: pointer;
}
```
这段代码将会创建一个具有美化样式的搜索框,并且可以在网页上使用。你可以根据自己的需求进行样式的调整。
阅读全文