前端登陆页面

以下是一个简单的前端登陆页面的代码示例：

<!DOCTYPE html>
<html>

<head>
    <title>登陆页面</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

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

</html>

该页面包含一个简单的表单，用户需要输入用户名和密码才能登录。表单包括用户名输入框、密码输入框和一个登录按钮。当用户点击登录按钮时，表单将被提交到服务器进行验证。

同时，我们还引用了一个CSS文件，该文件可以在同一目录下创建一个名为style.css的文本文件，以自定义页面的外观和样式。

如果你想要增加一些互动和动画效果，你可以考虑使用JavaScript。例如，你可以使用JavaScript为表单添加验证功能，或者使用CSS和JavaScript为页面添加一些动态效果，比如当用户输入错误时，用户名和密码输入框可能会出现红色边框。

以下是一个简单的JavaScript示例，它使用DOM操作来验证表单中的用户名和密码是否为空：

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  var username = document.getElementById('username');
  var password = document.getElementById('password');
  if (username.value === '' || password.value === '') {
    event.preventDefault();
    alert('用户名和密码不能为空！');
  }
});

当表单被提交时，该代码将检查用户名和密码输入框是否为空。如果是空的，它将阻止表单提交并显示警告消息。

希望这些代码能够帮助你开始编写自己的前端登陆页面。如果你有任何问题或需要进一步的帮助，请告诉我。

你可以使用以下CSS样式来为页面增加一些酷炫效果：

body {
  background-color: #f5f5f5;
}

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

h2 {
  color: #333;
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  color: #666;
  font-size: 18px;
  margin-bottom: 20px;
}

input[type="text"],
input[type="password"] {
  background-color: #f5f5f5;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  padding: 12px;
  margin-bottom: 20px;
}

button[type="submit"] {
  background-color: #333;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  padding: 14px;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #555;
}

你可以将这些CSS代码保存到一个名为style.css的文件中，并将其与HTML文件链接起来。

这些样式将为页面添加一个白色的背景、圆角边框和阴影。表单和标签的颜色也将被修改为更柔和的色调。登录按钮将被着重强调，并在悬停时更改背景颜色。

猜你喜欢