极客教程使用HTML和CSS创建搜索栏
参考： Create a Search Bar using HTML and CSS
在现代的网页设计中，搜索栏是一个不可或缺的元素，它允许用户快速找到他们需要的信息。本文将详细介绍如何使用HTML和CSS创建一个简单而又美观的搜索栏。我们将一步步地介绍不同的样式和功能，每个部分都会提供详细的示例代码。
基础搜索栏
首先，我们从最基础的搜索栏开始。以下是一个简单的HTML和CSS代码示例，它创建了一个基本的搜索框和提交按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础搜索栏 - how2html.com</title>
<style>
.search-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.search-bar input[type="text"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
outline: none;
}
.search-bar input[type="submit"] {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
cursor: pointer;
}
.search-bar input[type="submit"]:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="search-bar">
<input type="text" placeholder="搜索 how2html.com">
<input type="submit" value="搜索">
</div>
</body>
</html>
Output:
圆角搜索栏
接下来，我们将搜索栏的边角变得圆润，使其看起来更加现代和友好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角搜索栏 - how2html.com</title>
<style>
.rounded-search-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.rounded-search-bar input[type="text"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 25px 0 0 25px;
outline: none;
}
.rounded-search-bar input[type="submit"] {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 0 25px 25px 0;
cursor: pointer;
}
.rounded-search-bar input[type="submit"]:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="rounded-search-bar">
<input type="text" placeholder="搜索 how2html.com">
<input type="submit" value="搜索">
</div>
</body>
</html>
Output:
带图标的搜索栏
在这个示例中，我们将在搜索框中添加一个搜索图标，以提供更直观的用户体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带图标的搜索栏 - how2html.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
.icon-search-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
position: relative;
}
.icon-search-bar input[type="text"] {
padding: 10px 10px 10px 40px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 25px;
outline: none;
}
.icon-search-bar .fa-search {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}
.icon-search-bar input[type="submit"] {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
margin-left: 10px;
}
.icon-search-bar input[type="submit"]:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="icon-search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="搜索 how2html.com">
<input type="submit" value="搜索">
</div>
</body>
</html>
Output:
响应式搜索栏
现在，我们将创建一个响应式的搜索栏，它可以在不同大小的屏幕上都能很好地显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式搜索栏 - how2html.com</title>
<style>
.responsive-search-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
flex-wrap: wrap;
}
.responsive-search-bar input[type="text"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 25px;
outline: none;
flex: 1;
min-width: 250px;
margin-bottom: 10px;
}
.responsive-search-bar input[type="submit"] {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
flex-shrink: 0;
}
.responsive-search-bar input[type="submit"]:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="responsive-search-bar">
<input type="text" placeholder="搜索 how2html.com">
<input type="submit" value="搜索">
</div>
</body>
</html>
Output:
悬浮效果搜索栏
为了使搜索栏更加吸引人，我们可以添加一些悬浮效果，当用户将鼠标悬停在搜索框或按钮上时，它们会有所反应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬浮效果搜索栏 - how2html.com</title>
<style>
.hover-effect-search-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.hover-effect-search-bar input[type="text"] {
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 25px;
outline: none;
transition: border-color 0.3s;
}
.hover-effect-search-bar input[type="text"]:hover {
border-color: #aaa;
}
.hover-effect-search-bar input[type="submit"] {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s;
}
.hover-effect-search-bar input[type="submit"]:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="hover-effect-search-bar">
<input type="text" placeholder="搜索 how2html.com">
<input type="submit" value="搜索">
</div>
</body>
</html>
Output:
带动画的搜索栏
增加动画效果可以使搜索栏更加生动有趣。以下示例展示了如何在搜索栏中添加简单的动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带动画的搜索栏 - how2html.com</title>
<style>
@keyframes expand {
from { width: 100px; }
to { width: 250px; }
}
.animated-search-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.animated-search-bar input[type="text"] {
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 25px;
outline: none;
width: 100px;
transition: width 0.5s;
}
.animated-search-bar input[type="text"]:focus {
animation: expand 0.5s forwards;
}
.animated-search-bar input[type="submit"] {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="animated-search-bar">
<input type="text" placeholder="搜索 how2html.com">
<input type="submit" value="搜索">
</div>
</body>
</html>
Output:
搜索栏与下拉建议
为了提高用户体验，我们可以为搜索栏添加下拉建议功能。当用户开始输入时，他们会看到一些可能的搜索建议。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索栏与下拉建议 - how2html.com</title>
<style>
.suggestion-search-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
position: relative;
}
.suggestion-search-bar input[type="text"] {
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 25px;
outline: none;
width: 250px;
}
.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: white;
border: 1px solid #ddd;
border-top: none;
z-index: 1000;
}
.suggestion-item {
padding: 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.suggestion-item:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="suggestion-search-bar">
<input type="text" placeholder="搜索 how2html.com" oninput="showSuggestions(this.value)">
<div class="suggestions" style="display: none;">
<div class="suggestion-item">how2html.com HTML</div>
<div class="suggestion-item">how2html.com CSS</div>
<div class="suggestion-item">how2html.com JavaScript</div>
</div>
</div>
<script>
function showSuggestions(value) {
const suggestions = document.querySelector('.suggestions');
if (value.length > 0) {
suggestions.style.display = 'block';
} else {
suggestions.style.display = 'none';
}
}
</script>
</body>
</html>
Output:
以上示例展示了如何创建不同风格和功能的搜索栏。通过这些示例，你可以学习到如何使用HTML和CSS来设计和实现具有吸引力和实用性的搜索栏。