用户登录界面怎么写
时间: 2023-07-26 15:24:21 浏览: 26
用户登录界面通常包含以下几个元素:
1. 用户名或邮箱输入框
2. 密码输入框
3. 登录按钮
4. 注册链接或按钮
5. 忘记密码链接或按钮
以下是一个基本的HTML/CSS代码示例,用于创建一个简单的用户登录界面:
```
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<style>
body {
background-color: #f1f1f1;
}
form {
background-color: #fff;
max-width: 300px;
margin: 0 auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 5px;
text-align: center;
}
input[type=text], input[type=password] {
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
margin-bottom: 20px;
box-sizing: border-box;
font-size: 16px;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>用户登录</h2>
<label for="username"><b>用户名或邮箱</b></label>
<input type="text" placeholder="请输入用户名或邮箱" name="username" required>
<label for="password"><b>密码</b></label>
<input type="password" placeholder="请输入密码" name="password" required>
<button type="submit">登录</button>
<div>
<a href="#">注册</a>
<a href="#">忘记密码?</a>
</div>
</form>
</body>
</html>
```
注意:此代码示例仅作为参考,实际情况下需要根据具体需求进行修改和完善。