html设计一个漂亮的搜索栏

好的，以下是一个简单的HTML搜索栏设计示例：

<div class="search-container">
  <form action="/search">
    <input type="text" placeholder="搜索...">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

你可以添加自己的CSS样式来美化这个搜索栏。例如，可以通过添加以下CSS使其看起来更漂亮：

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

.search-container input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  width: 300px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.search-container button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-left: 5px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.search-container button[type="submit"]:hover {
  background-color: #3e8e41;
}

这里使用了Flexbox布局来居中搜索栏，并使用了一些基本的CSS样式来使其看起来更漂亮。你也可以根据自己的需求修改这些样式。