当前位置：首页 > CSS

css制作网页登录

2026-03-12 03:16:58CSS

CSS 制作网页登录页面

基本结构设计

登录页面通常需要包含用户名输入框、密码输入框、登录按钮以及可能的注册链接。HTML 结构可以设计为：

<div class="login-container">
  <h1>用户登录</h1>
  <form class="login-form">
    <input type="text" placeholder="用户名" required>
    <input type="password" placeholder="密码" required>
    <button type="submit">登录</button>
    <p>没有账号？<a href="#">立即注册</a></p>
  </form>
</div>

基础样式设置

为登录容器设置居中布局和基础样式：

css制作网页登录

.login-container {
  width: 300px;
  margin: 100px auto;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background-color: #fff;
}

表单元素样式

美化输入框和按钮：

.login-form input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.login-form button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.login-form button:hover {
  background-color: #45a049;
}

响应式设计

添加媒体查询适应不同屏幕尺寸：

css制作网页登录

@media (max-width: 400px) {
  .login-container {
    width: 90%;
    margin: 50px auto;
  }
}

动画效果

为交互添加简单的过渡效果：

.login-form input:focus {
  border-color: #4CAF50;
  transition: border-color 0.3s;
}

.login-form button {
  transition: background-color 0.3s;
}

完整示例代码

结合HTML和CSS的完整实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }

    .login-container {
      width: 300px;
      margin: 100px auto;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      background-color: #fff;
    }

    .login-form input {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 3px;
    }

    .login-form button {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    .login-form button:hover {
      background-color: #45a049;
    }

    @media (max-width: 400px) {
      .login-container {
        width: 90%;
        margin: 50px auto;
      }
    }
  </style>
</head>
<body>
  <div class="login-container">
    <h1>用户登录</h1>
    <form class="login-form">
      <input type="text" placeholder="用户名" required>
      <input type="password" placeholder="密码" required>
      <button type="submit">登录</button>
      <p>没有账号？<a href="#">立即注册</a></p>
    </form>
  </div>
</body>
</html>

这些CSS技巧可以帮助创建美观实用的登录页面，可根据实际需求调整颜色、间距和效果。