如何将搜索栏、登录按钮移至指定区域并实现功能？

一、布局调整：将搜索/登录元素放到指定区域 #

你的header当前仅包含logo模块，需要重构header的布局结构，通过Flexbox实现左右分栏，把搜索栏、功能按钮（心愿单、购物车）和登录按钮放到对应区域：

修改后的HTML（新增header右侧功能区） #

<header>
  <div class="wrapper">
    <div class="logo-container">
      <img src="TipToeSoles_Logo_colour.png" alt="TipToe Soles Logo" class="logo">
      <div class="logo-text">TipToe Soles</div>
    </div>
    <!-- 新增右侧功能区：对应图片的红色（搜索）、蓝色（登录）区域 -->
    <div class="header-right">
      <!-- 红色区域：搜索栏 -->
      <div class="search-bar">
        <input type="text" placeholder="搜索商品...">
        <button type="submit">🔍</button>
      </div>
      <!-- 蓝色区域：功能按钮+登录 -->
      <div class="action-buttons">
        <button class="wishlist-btn">❤️ 心愿单</button>
        <button class="cart-btn">🛒 购物车</button>
        <button class="login-btn">登录</button>
      </div>
    </div>
  </div>
</header>
<!-- 原有的nav、main、footer代码保持不变 -->

修改后的CSS（核心布局调整） #

/* Reset部分补充表单元素样式 */
body, ul, input, button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Header样式重构 */
header {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  /* 关键：用Flex实现左右分布 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px; /* 调整logo与文字的间距 */
}

.logo-text {
  font-size: 30px; /* 缩小字号避免header过高 */
}

.logo {
  width: 80px; /* 缩小logo适配布局 */
}

/* 右侧功能区样式 */
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-bar {
  display: flex;
  border: 1px solid #fff;
  border-radius: 4px;
}

.search-bar input {
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #fff;
}

.search-bar input::placeholder {
  color: #ccc;
}

.search-bar button {
  padding: 8px 15px;
  border: none;
  background: #fff;
  color: #333;
  cursor: pointer;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.action-buttons button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-btn {
  background: #007bff; /* 蓝色匹配标注区域 */
  color: #fff;
}

.wishlist-btn, .cart-btn {
  background: #f8f9fa;
  color: #333;
}

/* 原有样式保留，修复一处语法错误 */
.sidenav {
  height: 85%;
  width: 160px;
  position: fixed;
  left: 0;
  background-color: #111; /* 原代码错误：background: color #111 → 修正为background-color */
  overflow-x: hidden;
  font-family: sans-serif;
}

/* 以下省略原有重复样式 */
.featured { display: flex; }
.product1, .product2, .product3 { flex: 1; margin: 10px; }
.main { margin-left: 200px; padding: 150px; }
.sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #818181; display: block; }
.sidenav a:hover { color: #f1f1f1; }
.footer { margin-left: 800px; }
@media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } }

二、让搜索和登录功能生效 #

1. 搜索功能实现 #

• 基础表单提交：把搜索栏包裹在<form>标签中，指定提交地址（后端接口或搜索结果页）：

<form action="/search" method="GET" class="search-bar">
  <input type="text" name="query" placeholder="搜索商品...">
  <button type="submit">🔍</button>
</form>

• 前端即时搜索（无刷新）：添加JavaScript监听输入，动态过滤商品：

const searchInput = document.querySelector('.search-bar input');
const products = document.querySelectorAll('.featured > div');

searchInput.addEventListener('input', (e) => {
  const keyword = e.target.value.toLowerCase();
  products.forEach(product => {
    const title = product.querySelector('h2').textContent.toLowerCase();
    product.style.display = title.includes(keyword) ? 'block' : 'none';
  });
});

2. 登录功能实现 #

• 跳转登录页：直接将登录按钮改为链接，跳转到独立登录页面：

<a href="/login.html" class="login-btn">登录</a>

• 弹窗登录（模态框）：添加模态框HTML和控制逻辑：

<!-- 登录模态框 -->
<div class="login-modal" id="loginModal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3>登录</h3>
    <form>
      <input type="email" placeholder="邮箱" required>
      <input type="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
  </div>
</div>

/* 模态框样式 */
.login-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 300px;
  border-radius: 8px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: black;
}

// 模态框控制逻辑
const loginBtn = document.querySelector('.login-btn');
const loginModal = document.getElementById('loginModal');
const closeBtn = document.querySelector('.close');

loginBtn.addEventListener('click', () => {
  loginModal.style.display = 'block';
});

closeBtn.addEventListener('click', () => {
  loginModal.style.display = 'none';
});

window.addEventListener('click', (e) => {
  if (e.target === loginModal) {
    loginModal.style.display = 'none';
  }
});

内容的提问来源于stack exchange，提问作者Riley Callender