前端实现标题栏带搜索框

可以使用HTML, CSS和JavaScript来实现带搜索框的标题栏。下面是一个简单的示例：

HTML代码：

<header>
  <h1>网站标题</h1>
  <form>
    <input type="text" placeholder="搜索...">
    <button type="submit">搜索</button>
  </form>
</header>

CSS代码：

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

h1 {
  margin: 0;
}

form {
  display: flex;
  align-items: center;
}

input[type="text"] {
  padding: 5px;
  border: none;
  border-radius: 3px;
  margin-right: 5px;
}

button[type="submit"] {
  padding: 5px 10px;
  background-color: #fff;
  color: #333;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

JavaScript代码（可选）：

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  const input = form.querySelector('input[type="text"]');
  const searchTerm = input.value;
  // 在这里处理搜索逻辑
});

这就是一个简单的带搜索框的标题栏，你可以根据需要进行修改和扩展。