写一个黑白风格的登录页面, 登录表单有账号、密码、验证码、是否为管理员。
时间: 2023-08-31 18:34:03 浏览: 66
### 回答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:
黑白风格的登录页面可以简洁而有力地呈现出专业与严谨的氛围。主要基调以黑色和白色为主,以突显对比和凸显重要的内容。以下是一个基于黑白风格的登录页面设计:
页面上方是一个白色的标题栏,标题栏中居中显示“登录”字样,使用黑色粗体字体以增强视觉效果。整个页面背景色为纯黑色,突出页面的简洁与专注。
登录表单位于页面中央,包含四个输入框和一个登录按钮。账号输入框和密码输入框上方标注有“账号”和“密码”字样,并使用细体黑色字体,输入框的边框使用白色线条勾勒。验证码输入框位于账号输入框和密码输入框的下方,用于输入动态生成的验证码。验证码输入框的样式与账号密码输入框相同。
在验证码输入框的下方,有一个复选框用于选择是否为管理员登录。复选框左边标有“管理员登录”字样,使用细体黑色字体,复选框选中状态使用白色勾选框表示。
在登录按钮下方,有一个小字体的提示文字,用浅灰色字体显示“点击登录即表示您同意我们的使用条款和隐私策略”。
整个登录表单为响应式设计,适配不同屏幕尺寸,并能应对不同设备上的触控操作。
整体布局简洁明了,黑白单调的风格立即给人以专业与正式的感觉。加上适当的色彩处理,可以提高用户对页面的注意力和舒适感。登录表单中的账号、密码、验证码和管理员登录选项清晰明了,便于用户操作,同时通过提示文字提醒用户保护个人隐私和了解条款。