以下是一个简单的前端登陆页面的代码示例:
<!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文件链接起来。
这些样式将为页面添加一个白色的背景、圆角边框和阴影。表单和标签的颜色也将被修改为更柔和的色调。登录按钮将被着重强调,并在悬停时更改背景颜色。