制作一个页面，含有导航栏，搜索栏

好的，制作一个包含导航栏和搜索栏的页面可以采用以下步骤：

1. 在 HTML 中创建一个导航栏和搜索栏的容器，可以使用 `<div>` 标签。

<div class="navbar">
  <!-- 导航栏内容 -->
</div>

<div class="searchbar">
  <!-- 搜索栏内容 -->
</div>

2. 在 CSS 中设置容器的样式，包括宽度、高度、背景颜色等。

.navbar {
  width: 100%;
  height: 50px;
  background-color: #333;
}

.searchbar {
  width: 100%;
  height: 30px;
  background-color: #f2f2f2;
}

3. 在导航栏中添加菜单项，可以使用 `<ul>` 和 `<li>` 标签。

<div class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</div>

4. 在搜索栏中添加搜索框和搜索按钮，可以使用 `<input>` 和 `<button>` 标签。

<div class="searchbar">
  <form>
    <input type="text" placeholder="搜索...">
    <button type="submit">搜索</button>
  </form>
</div>

5. 最后，将 CSS 样式应用到菜单项、搜索框和搜索按钮等元素上。

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #111;
}

.searchbar input[type=text] {
  width: 70%;
  padding: 6px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
}

.searchbar button[type=submit] {
  width: 20%;
  background-color: #4CAF50;
  color: white;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.searchbar button[type=submit]:hover {
  background-color: #45a049;
}

这样就完成了一个包含导航栏和搜索栏的页面。