用html css js设计一个简单的头部导航栏其中包括包含网站Logo、搜索框、登录/注册按钮和主要导航菜单

好的，让我给你一个简单的示例，用 HTML、CSS 和 JavaScript 设计一个头部导航栏，其中包括网站 Logo、搜索框、登录/注册按钮和主要导航菜单。

HTML 代码如下：

<header>
  <div class="logo">
    <a href="#"><img src="logo.png" alt="网站 Logo"></a>
  </div>
  <div class="search">
    <form>
      <input type="text" placeholder="搜索...">
      <button type="submit">搜索</button>
    </form>
  </div>
  <div class="user">
    <a href="#">登录</a>
    <a href="#">注册</a>
  </div>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</header>

CSS 代码如下：

header {
  height: 80px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo img {
  height: 60px;
}

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

.search input {
  height: 30px;
  border: none;
  border-radius: 15px;
  padding: 0 10px;
}

.search button {
  height: 30px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 15px;
  padding: 0 20px;
  margin-left: 10px;
  cursor: pointer;
}

.user a {
  color: #007bff;
  margin-left: 20px;
}

nav ul {
  display: flex;
  list-style: none;
}

nav li {
  margin-left: 20px;
}

nav a {
  color: #333;
  text-decoration: none;
}

JavaScript 代码如下：

// 鼠标进入导航菜单时添加 active 类名，鼠标离开时移除 active 类名
var navItems = document.querySelectorAll('nav li');
for (var i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener('mouseenter', function() {
    this.classList.add('active');
  });
  navItems[i].addEventListener('mouseleave', function() {
    this.classList.remove('active');
  });
}

这个示例中的代码比较简单，但是可以根据实际需求进行修改和扩展，以满足不同的设计和功能要求。