css怎么做i搜索框

CSS 是万能的样式语言，可以为我们的网站添加各种各样的样式和效果。其中，搜索框是网站经常使用到的一个元素，在这里我们一起学习如何使用 CSS 来制作一个漂亮的搜索框吧！

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

首先，我们要创建一个包含输入框和搜索按钮的 div ，并给它添加一个类名，以便于我们后续的样式控制。在 div 中，我们还需要添加一个文本输入框和一个按钮元素。

.search-Box {
  position: relative;
  display: inline-block;
}

.search-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  border: none;
  background-color: #ccc;
  padding: 3px 10px;
  color: #fff;
  cursor: pointer;
}

.search-input {
  width: 200px;
  height: 25px;
  border: 1px solid #ccc;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
}

对于样式的控制，我们通过 CSS 来控制元素的大小、颜色、位置、边框、字体、鼠标样式等属性。在这里，我们为包含搜索框的 div 添加一些样式，在样式中，我们设置 div 的 position 为 relative，以便让内部的输入框和按钮按照 div 的定位进行布局。

在内部，我们为按钮设置 position 为 absolute，让按钮脱离文档流，同时使用 top 和 right 属性将其从右上角对齐。并且为按钮设置了背景色、颜色和爆动框样式等。对于输入框，我们设置了宽度、高度、输入框边框、圆角、字体大小等样式属性。

最后，我们只需要把定义好的样式引入到 HTML 文件中即可完成美观的搜索框。