登录界面代码实现：手把手教你写一个简洁美观的登录页面

登录界面的基本结构

平时我们上网，不管是购物、看视频还是办公，第一步基本都是登录。一个清晰好用的登录界面能让用户快速进入状态。实现这样一个界面，其实并不复杂，核心就是 HTML 搭结构，CSS 美化样式，再用 JavaScript 处理简单的交互。

先从最基础的 HTML 开始。下面是一个包含用户名和密码输入框、登录按钮的简单表单：

<form id="loginForm">
  <div class="input-group">
    <label for="username">用户名</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名" required>
  </div>
  <div class="input-group">
    <label for="password">密码</label>
    <input type="password" id="password" name="password" placeholder="请输入密码" required>
  </div>
  <button type="submit">登录</button>
</form>

用 CSS 让界面更顺眼

光有结构太简陋了，加点样式让它看起来像那么回事。比如把表单居中，设置圆角输入框，调整按钮颜色。下面是一段实用的 CSS 示例：

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#loginForm {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  width: 300px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

加入一点交互行为

点击登录按钮时，可以加个简单的验证，防止用户空着框就提交。用几行 JavaScript 就能搞定：

document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交行为
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  if (!username || !password) {
    alert('请填写用户名和密码');
    return;
  }

  // 实际项目中这里会发送请求到服务器
  console.log('登录中...', username);
  // 可以跳转页面或显示加载状态
});

这样一套下来，一个能看又能用的登录界面就出来了。虽然还没连后台，但本地测试完全没问题。你可以在记事本里把这三部分代码存成 login.html，双击打开就能看到效果。

很多网站的登录页起点也就是这样，后续再慢慢加上记住密码、验证码、第三方登录这些功能。先把基础打牢，后面扩展起来也轻松。