css中搜索栏怎么写

搜索栏是网页中非常常见的一个元素，通常用于让用户输入搜索内容并进行相关主题的搜索。在CSS中，可以通过一些简单的代码来制作出一个漂亮的搜索栏。下面我们来看一下具体的实现过程。
首先需要考虑的是搜索栏的布局。通常情况下，我们会把搜索框和搜索按钮放在一行，因此可以使用一个div包裹这两个元素。代码如下：

<div><br>
  <input type="text" name="search" placeholder="请输入关键词"/><br>
  <input type="button" value="搜索"/><br>
</div>

其中，第一个input标签用于输入搜索内容，设置了name属性为“search”，并使用placeholder属性来给出输入框的提示。第二个input标签是一个按钮，用于触发搜索功能，设置了value属性为“搜索”。
接下来，我们需要对这两个元素进行样式调整以达到更好的显示效果。具体代码如下：

div {<br>
  margin: 0 auto;<br>
  width: 80%;<br>
  display: flex;<br>
  justify-content: center;<br>
}<br>
input[type="text"] {<br>
  width: 70%;<br>
  padding: 10px;<br>
  border: 1px solid #ccc;<br>
  border-radius: 5px 0 0 5px;<br>
}<br>
input[type="button"] {<br>
  width: 30%;<br>
  background-color: #4CAF50;<br>
  color: white;<br>
  border: none;<br>
  padding: 10px;<br>
  border-radius: 0 5px 5px 0;<br>
}

首先，我们使得div元素水平居中，并设置宽度为80%。接下来，我们使用flex布局使得子元素水平居中。在input[type="text"]样式中，我们设置了宽度为70%，内边距为10px，边框为1px的灰色，且上下左部分为圆角。在input[type="button"]中，我们设置了宽度为30%，背景色为绿色，字体颜色为白色，无边框，且上下右部分为圆角。
这样，一个简单而又漂亮的搜索栏就完成了。可以根据实际需求来调整样式或添加其他功能。