当前位置：首页 > CSS

css制作登录页

2026-03-12 12:10:39CSS

设计登录页布局

使用Flexbox或Grid布局实现响应式设计。Flexbox适合单列布局，Grid适合复杂布局。以下是一个Flexbox示例：

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

表单元素样式

为输入框和按钮添加现代样式。使用transition实现交互效果：

.input-field {
  width: 100%;
  padding: 12px 15px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s;
}

.input-field:focus {
  border-color: #4285f4;
  outline: none;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

添加视觉反馈

通过伪类和变换增强用户体验：

css制作登录页

.submit-btn:hover {
  background-color: #3367d6;
}

.submit-btn:active {
  transform: scale(0.98);
}

.input-field::placeholder {
  color: #999;
}

响应式调整

针对不同屏幕尺寸进行优化：

@media (min-width: 768px) {
  .login-container {
    max-width: 400px;
    margin: 0 auto;
  }
}

添加辅助元素样式

完善忘记密码和注册链接的样式：

css制作登录页

.helper-links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.helper-link {
  color: #4285f4;
  text-decoration: none;
  font-size: 0.9em;
}

.helper-link:hover {
  text-decoration: underline;
}

错误状态样式

为表单验证添加视觉提示：

.input-error {
  border-color: #dc3545;
}

.error-message {
  color: #dc3545;
  font-size: 0.8em;
  margin-top: -5px;
  margin-bottom: 10px;
}

加载状态

提交时显示加载指示器：

.submit-btn.loading {
  position: relative;
  color: transparent;
}

.submit-btn.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

标签: css