html+css搜索栏
时间: 2024-09-27 17:15:21 浏览: 16
HTML和CSS结合起来可以创建一个基本的搜索栏,这是网页设计中常见的交互元素。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.search-bar {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: flex;
align-items: center;
}
input[type=text] {
flex: 1;
padding: 5px;
border: none;
outline: none;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 14px;
border: none;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="search-bar">
<input type="text" placeholder="请输入搜索关键词...">
<button>搜索</button>
</div>
</body>
</html>
```
在这个例子中,`.search-bar`是搜索框容器,包含一个文本输入框(input)用于输入关键字,以及一个按钮(button),用户点击后会触发搜索动作。CSS样式使得这个搜索栏看起来整洁且响应式。