css中怎样加搜索框

在网页设计中，搜索框是一个非常重要的元素，可以为用户提供方便快捷的搜索功能。在使用CSS时，我们可以通过以下步骤来添加一个简单的搜索框：
1. 创建 HTML 结构
首先，我们需要创建搜索框的 HTML 结构。将搜索框的容器放在一个适当的位置，使用“form”标签来包装搜索框，然后添加一个输入字段和一个提交按钮。如下所示：

 <div class="search">
    <form>
      <input type="text" placeholder="在此输入搜索内容">
      <button type="submit">搜索</button>
    </form>
  </div> 

2. 创建 CSS 样式
接下来，我们需要创建 CSS 样式来美化搜索框。我们可以使用“position”属性来定位搜索框的位置，并设置其宽度、高度、背景颜色、边框等样式。例如：

 .search {
    position: relative;
    width: 300px;
  }
  
  .search form input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #CCC;
    border-radius: 5px;
    background-color: #F6F6F6;
    font-size: 16px;
    color: #222;
    outline: none;
  }
  
  .search form button[type="submit"] {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 100%;
    border: none;
    border-radius: 5px;
    background-color: #1E90FF;
    color: #FFF;
    font-size: 16px;
    cursor: pointer;
  } 

3. 添加交互功能
最后，我们可以使用 JavaScript 为搜索框添加交互功能。例如，我们可以在用户提交搜索请求时执行某些操作。这个过程超出了本文的范围，但我们可以通过下面的代码为按钮添加一个点击事件：

 var btn = document.querySelector(".search form button[type='submit']");
  
  btn.addEventListener("click", function(e) {
    e.preventDefault();
  
    // 执行搜索操作
  }); 

通过上述步骤，我们可以很容易地在网页中添加一个简单的搜索框，提供便捷的搜索功能以及美观的设计效果。