请为<div class="search-box"> <input type="text" id="search-input" placeholder="请输入搜索内容"> <button id="search-button">搜索</button> </div>写一个好看居中的css样式

可以使用以下 CSS 样式来实现居中效果：

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 调整高度为适当的值 */
}

#search-input {
  margin-right: 10px; /* 调整输入框右侧间距为适当的值 */
}

#search-button {
  /* 可以根据需要设置按钮样式 */
}

以上样式使用了 flex 布局，将搜索框容器 `.search-box` 的子元素水平和垂直居中对齐。输入框 `#search-input` 右侧有一定的间距，你可以根据需要进行调整。按钮 `#search-button` 的样式可以根据具体需求进行设置。

相关问题

<div class="container"> <div class="form-box"> <!-- 注册 --> <div class="register-box hidden"> <h1>register</h1> <input type="text" placeholder="用户名"> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <input type="password" placeholder="确认密码"> <button id="registerButton">注册</button> </div> <!-- 登录 --> <div class="login-box"> <h1>login</h1> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button id="loginButton">登录</button> </div> </div> <div class="con-box left"> <h1>欢迎来到<span>原神</span></h1> <p>你将在游戏中探索一个被称作「提瓦特」的<span>幻想世界。</span></p> <img src="images/paimeng_logo.jpg" alt=""> <p>已有账号</p> <button id="login">去登录</button> </div> <div class="con-box right"> <h1>欢迎来到<span>原神</span></h1> <p>你将在游戏中探索一个被称作「提瓦特」的<span>幻想世界。</span></p> <img src="images/paimeng_logo.jpg" alt=""> <p>没有账号？</p> <button id="register">去注册</button> </div> </div> 根据这段代码写一个登陆系统登陆成功在此网页打开新的html文件

为了实现一个登陆系统并在登陆成功后打开新的 HTML 文件，需要做以下几个步骤：

1. 在 HTML 文件中添加一个表单，包含用户名和密码输入框以及一个提交按钮。可以参考下面的示例代码：

<div class="login-box">
  <h1>登录</h1>
  <form id="loginForm">
    <input type="text" placeholder="用户名" name="username">
    <input type="password" placeholder="密码" name="password">
    <button type="submit" id="loginButton">登录</button>
  </form>
</div>

2. 在 JavaScript 文件中为提交按钮添加一个点击事件监听器，当用户点击按钮时，获取表单数据并通过 AJAX 发送请求。可以参考下面的示例代码：

const loginForm = document.getElementById('loginForm');
const loginButton = document.getElementById('loginButton');

loginButton.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止表单默认的提交行为

  const formData = new FormData(loginForm); // 获取表单数据
  const username = formData.get('username'); // 获取用户名
  const password = formData.get('password'); // 获取密码

  // 发送 AJAX 请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/login');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.success) {
        // 登录成功，打开新的 HTML 文件
        window.location.href = '/dashboard.html';
      } else {
        // 登录失败，提示错误信息
        alert(response.message);
      }
    } else {
      // 请求失败，提示错误信息
      alert('请求失败，请稍后重试！');
    }
  };
  xhr.send(JSON.stringify({ username, password }));
});

3. 在服务器端实现一个 `/login` 路由，接收表单数据并验证用户名和密码是否正确。如果验证通过，返回一个 JSON 格式的成功响应；否则返回一个失败响应并包含错误信息。可以参考下面的示例代码：

app.post('/login', function(req, res) {
  const { username, password } = req.body;
  // 根据用户名和密码进行验证，验证通过返回成功响应，否则返回失败响应
  if (username === 'admin' && password === '123456') {
    res.json({ success: true });
  } else {
    res.status(401).json({ success: false, message: '用户名或密码错误！' });
  }
});

在这个例子中，服务器端使用 Express 框架实现了一个 `/login` 路由，接收 POST 请求并从请求体中获取用户名和密码。服务器端对用户名和密码进行验证，如果验证通过，返回一个 JSON 格式的成功响应，否则返回一个失败响应并包含错误信息。

当登录成功后，客户端会调用 `window.location.href` 方法来打开一个新的 HTML 文件。在这个例子中，我们假设登录成功后要跳转到 `/dashboard.html` 文件。你需要将其替换为你自己的 HTML 文件的路径。

<div class="container"> <div class="form-box"> <!-- 注册 --> <div class="register-box hidden"> <h1>register</h1> <input type="text" placeholder="用户名"> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <input type="password" placeholder="确认密码"> <button>注册</button> </div> <!-- 登录 --> <div class="login-box"> <h1>login</h1> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button>登录</button> </div> </div> <div class="con-box left"> <h1>欢迎来到<span>原神</span></h1> <p>你将在游戏中探索一个被称作「提瓦特」的<span>幻想世界。</span></p> <img src="images/paimeng_logo.jpg" alt=""> <p>已有账号</p> <button id="login">去登录</button> </div> <div class="con-box right"> <h1>欢迎来到<span>原神</span></h1> <p>你将在游戏中探索一个被称作「提瓦特」的<span>幻想世界。</span></p> <img src="images/paimeng_logo.jpg" alt=""> <p>没有账号？</p> <button id="register">去注册</button> </div> </div> 在此代码中用js设计登陆系统 不需要链接服务器

这段 HTML 代码包含了一个注册表单和一个登录表单，以及两个欢迎页面。为了在不链接服务器的情况下设计登录系统，我们可以使用 JavaScript 来模拟登录和注册过程，并在客户端存储用户信息。

以下是一个简单的 JavaScript 代码示例，用于处理登录和注册表单的提交，并将用户信息存储在本地存储中：

// 获取注册和登录表单元素
const registerForm = document.querySelector('.register-box');
const loginForm = document.querySelector('.login-box');

// 获取注册表单中的输入元素
const registerUsernameInput = registerForm.querySelector('input[type="text"]');
const registerEmailInput = registerForm.querySelector('input[type="email"]');
const registerPasswordInput = registerForm.querySelector('input[type="password"]');
const registerConfirmPasswordInput = registerForm.querySelectorAll('input[type="password"]')[1];

// 获取登录表单中的输入元素
const loginUsernameInput = loginForm.querySelector('input[type="text"]');
const loginPasswordInput = loginForm.querySelector('input[type="password"]');

// 获取欢迎页面元素
const welcomePages = document.querySelectorAll('.con-box');

// 获取注册和登录按钮
const registerButton = registerForm.querySelector('button');
const loginButton = loginForm.querySelector('button');

// 设置本地存储中存储用户信息的键名
const userStorageKey = 'user';

// 注册表单提交事件处理程序
registerButton.addEventListener('click', function(event) {
  event.preventDefault();
  const username = registerUsernameInput.value;
  const email = registerEmailInput.value;
  const password = registerPasswordInput.value;
  const confirmPassword = registerConfirmPasswordInput.value;
  
  // 在此处进行表单验证，确保所有字段都已填写，并且密码和确认密码匹配
  
  // 将用户信息存储在本地存储中
  localStorage.setItem(userStorageKey, JSON.stringify({ username, email, password }));
  
  // 切换到欢迎页面
  welcomePages.forEach(page => page.classList.toggle('hidden'));
});

// 登录表单提交事件处理程序
loginButton.addEventListener('click', function(event) {
  event.preventDefault();
  const username = loginUsernameInput.value;
  const password = loginPasswordInput.value;
  
  // 从本地存储中获取用户信息
  const user = JSON.parse(localStorage.getItem(userStorageKey));
  
  // 在此处进行验证，确保用户名和密码匹配
  if(user && user.username === username && user.password === password) {
    // 切换到欢迎页面
    welcomePages.forEach(page => page.classList.toggle('hidden'));
  } else {
    alert('用户名或密码错误');
  }
});

需要注意的是，这只是一个简单的示例，没有进行表单验证和安全性检查。在实际应用中，您需要添加适当的验证和安全性措施，以确保用户信息的安全性。