使用HTML和CSS创建搜索栏

要使用HTML和CSS创建搜索栏，我们可以使用简单的表单元素和基本的CSS属性。搜索框是网站中最常用的组件，它使导航更加方便。在这篇文章中，我们将了解如何使用HTML和CSS创建一个带有搜索按钮的搜索栏。

在这篇文章中，我们有一个文本类型的输入框和一个按钮，我们的任务是使用HTML和CSS创建一个搜索栏。

使用HTML和CSS创建搜索栏的步骤

  • 首先，我们创建了一个表单，然后使用HTML input标签和type属性创建了一个搜索输入文本框，然后使用button标签创建了一个按钮。
  • 我们使用了**search**类，它设置了搜索栏的背景颜色和最大宽度。
  • 然后，我们设计了搜索输入框，我们应用了内边距和边框，并设置了框的宽度和圆角。
  • 使用**button**类，我们通过设置按钮的背景颜色和文本颜色来设计按钮。
  • 我们使用了:hover伪类，它在悬停时将光标更改为指针，并更改背景和文本颜色。
  • 我们使用了link标签在搜索按钮上插入一个图标。

示例

这是一个完整的示例代码，实现了上面提到的使用HTML和CSS创建搜索栏的步骤。

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<title>Document</title>
	<style>
		.search {
			padding: 5px;
			background-color: #031926;
			max-width: fit-content;
			border-radius: 5px;
		}
		input[type="text"]{
			padding: 10px;
			border: 2px solid #031926;
			border-radius: 5px;
			width: 200px;
		}
		button {
			padding: 10px;
			border-radius: 5px;
			background-color: #031926;
			color: white;
		}
		button:hover {
			color: #031926;
			background-color: white;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h3>
		To create a Search Bar using HTML and CSS
	</h3>
	<p>
		We have used <strong>input</strong> tag
		to create a text type search box using HTML
		and CSS.
	</p>
	<div class="search">
		<form action="#">
			<input type="text" placeholder="Search...">
			<button type="submit">
				<i class="fa fa-search"></i>
			</button>
		</form>
	</div>
</body>
</html>

结论

在这篇文章中，我们学习了如何使用HTML和CSS创建搜索栏。这是一个非常简单的任务，可以使用基本的CSS属性轻松实现。

更新于：2024年9月17日

1K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告