css制作登录

基础HTML结构

创建登录表单的基础HTML结构，包含用户名、密码输入框和提交按钮。使用<form>标签包裹，并为每个输入字段添加<label>以提高可访问性。

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

基础CSS样式

为登录表单添加基础样式，包括居中布局、背景色和边框阴影。使用Flexbox实现垂直居中，并设置输入框和按钮的通用样式。

.login-form {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

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

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

响应式设计

通过媒体查询适配移动设备，缩小表单宽度并调整内边距。确保在小屏幕上输入框和按钮仍然易于操作。

@media (max-width: 600px) {
  .login-form {
    width: 90%;
    margin: 20px auto;
    padding: 15px;
  }
}

动画效果

添加简单的悬停和焦点动画增强交互体验。输入框获得焦点时改变边框颜色，按钮悬停时添加过渡效果。

input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

button {
  transition: background-color 0.3s ease;
}

验证状态样式

为表单验证状态添加视觉反馈。无效输入显示红色边框，有效输入显示绿色边框，帮助用户快速识别问题。

input:invalid {
  border-color: #dc3545;
}

input:valid {
  border-color: #28a745;
}