使用 HTML 和 CSS 创建搜索栏

在现代web应用程序中，搜索栏是必不可少的元素之一。本文将介绍如何使用HTML和CSS创建一个基本的搜索栏。我们将从基本的HTML标记开始，一步步添加样式，达到我们想要的效果。

基本的 HTML 结构

我们将使用HTML5的语法来创建搜索栏，这包括一个文本输入框和一个提交按钮。以下是一个基本的HTML结构:

<form>
  <input type="text" placeholder="搜索...">
  <button type="submit">搜索</button>
</form>

在这段代码中，我们首先创建一个<form>元素。该元素用于将输入字段和提交按钮分组在一起。在<form>元素内部，我们添加了一个文本输入框和一个提交按钮。文本输入框由<input>元素表示。我们为该元素指定了一个type属性，用于说明该输入框应该是一个文本输入框。placeholder属性用于提示用户输入内容。

此外，我们还添加了一个提交按钮，该按钮由<button>元素表示。我们为该元素指定了一个type属性，用于说明该按钮应该是一个提交按钮。按钮的标签文本为“搜索”。

现在，我们的搜索栏在页面上已经可见，但它看起来相当简单。让我们通过添加样式来美化它。

CSS 样式

我们想要我们的搜索栏看起来更优美，所以我们将添加一些CSS样式。以下是我们将使用的样式:

form {
  display: flex;
}

input[type="text"] {
  padding: 5px;
  border: none;
  border-radius: 3px;
  width: 300px;
}

button[type="submit"] {
  padding: 5px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  margin-left: -4px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0062cc;
}

首先，我们将<form>元素的显示属性设置为flex。这将使输入字段和提交按钮呈现在同一行上。 接下来，我们添加了样式来设置输入文本框的大小、填充、边框和圆角半径。我们还指定了其宽度为300px。对于提交按钮，我们添加了样式来设置填充、背景颜色、字体颜色、边框和圆角半径。我们还将其左外边距设置为-4px，以使其更紧密地与输入字段相邻。最后，我们使用:hover伪类为提交按钮添加了鼠标悬停效果。

效果预览

现在，我们已经完成了我们的搜索栏，让我们预览它的效果：

结论

现在您已经了解了如何在HTML和CSS中创建简单的搜索栏，这将使您的web应用程序更加符合现代潮流。我们希望您能够使用这些技术来创建自己的搜索栏。