hbuilderx搜索框设计代码

以下是HBuilderX中实现搜索框的HTML和CSS代码：

<div class="search-container">
  <input type="text" placeholder="请输入搜索内容">
  <button>搜索</button>
</div>

.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background-color: #f2f2f2;
  padding: 10px;
}

.search-container input[type="text"] {
  border: none;
  outline: none;
  padding: 10px;
  font-size: 16px;
  width: 80%;
}

.search-container button {
  border: none;
  outline: none;
  padding: 10px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #3e8e41;
}

以上代码实现了一个简单的搜索框，包括输入框和搜索按钮，并且使用了CSS样式进行美化。其中，`border-radius`属性用于设置边框的圆角，`background-color`属性用于设置背景颜色，`padding`属性用于设置内边距，`cursor`属性用于设置鼠标悬停时的样式。同时，使用了`flex`布局使得输入框和按钮水平居中对齐。