写一个黑白风格的登录页面, 登录表单有账号、密码、验证码、是否为管理员。
时间: 2023-09-15 19:05:30 浏览: 63
### 回答1:
这是一个简单的黑白风格的登录页面的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style>
/* 黑白主题 */
body {
background-color: black;
color: white;
}
/* 表单样式 */
form {
width: 300px;
margin: 0 auto;
text-align: center;
}
input {
display: block;
margin: 10px auto;
width: 60%;
height: 30px;
border: none;
border-radius: 5px;
background-color: #333333;
color: white;
padding: 0 10px;
}
input[type="submit"] {
background-color: #cccccc;
color: black;
}
/* 错误信息 */
.error {
color: red;
}
</style>
</head>
<body>
<form action="/login" method="post">
<h1>登录</h1>
<!-- 账号输入框 -->
<input type="text" name="username" placeholder="账号">
<!-- 密码输入框 -->
<input type="password" name="password" placeholder="密码">
<!-- 验证码输入框 -->
<input type="text" name="captcha" placeholder="验证码">
<!-- 验证码图片 -->
<img src="/captcha" alt="验证码">
<!-- 是否为管理员选择框 -->
<label>
<input type="checkbox" name="is_admin"> 是否为管理员
</label>
<!-- 提交按钮 -->
<input type="submit" value="登录">
<!-- 错误信息显示区域 -->
<div class="error"></div>
</form>
</body>
</html>
```
这个页面包含了一个表单,表单中包含了账号输入框、密码输入框、验证码输入框和是否为管理员选择框。当用户输入
### 回答2:
黑白风格的登录页面是一种简洁、大气的设计风格,以黑白为主色调,配合简洁的图标和文字,给人一种干净、清爽的感觉。
登录页面的顶部通常会有一个标题,如“用户登录”,标题使用黑色粗体字体,突显出页面的主题。
下方是登录表单,表单中包含四个输入框和一个登录按钮。
第一个输入框是账号输入框,使用白色背景色,黑色边框,黑色字体。输入框前面有一个账号图标,使用黑色矢量图标,突出显示。
第二个输入框是密码输入框,与账号输入框的设计风格相同,使用黑色矢量图标,黑色字体。
第三个输入框是验证码输入框,与前两个输入框的设计风格相同,使用黑色矢量图标,黑色字体。
最后一个是管理员选择框,使用黑色复选框样式,配合黑色文字说明,使用户可以选择是否登录为管理员。
登录按钮使用黑色底色,白色文字,按钮上方有一个登录图标,以示按钮作用。
在页面底部设有其他链接,如“忘记密码”、“注册账号”等,链接使用简洁的黑色文字,鼠标悬停时会有下划线效果。
整个登录页面的设计风格简洁大方,黑白搭配,突出功能元素,给用户带来舒适的登录体验。