feat(web.test6): 新增 web 前端实验 6

This commit is contained in:
2025-11-25 10:10:36 +08:00
parent 8996daa6aa
commit 6a08063952
5 changed files with 151 additions and 1 deletions

View File

@@ -16,5 +16,6 @@
├── test2 # 实验2
├── test3 # 实验3
├── test4 # 实验4
── test5 # 实验5
── test5 # 实验5
└── test6 # 实验6
```

BIN
Web/images/bg1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

67
Web/test6/login.css Normal file
View File

@@ -0,0 +1,67 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-image: url("../images/bg1.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.form-container {
width: 400px;
background-color: rgba(255, 255, 255, 0.6);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #892be231;
border-radius: 5px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form div {
margin-bottom: 15px;
}
input[type="text"],
input[type="password"],
input[type="password-2"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.user-type-label {
margin-right: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
a {
text-decoration: none;
color: inherit;
font-size: inherit;
}

39
Web/test6/login.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="login.css">
<title>登录</title>
</head>
<body>
<div class="form-container">
<h2>欢迎登录</h2>
<form class="form">
<div>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入密码" required>
</div>
<div>
<label class="user-type-label">用户类型:</label>
<input type="radio" id="user" name="user-type" value="普通用户" checked>
<label for="user">普通用户</label>
<input type="radio" id="admin" name="user-type" value="管理员">
<label for="admin">管理员</label>
</div>
<div>
<label for="remember-me">记住我</label>
<input type="checkbox" name="remember" id="remember-me" value="记住我">
</div>
<button type="submit"><a href="../test5/index.html">登录</a></button>
</form>
</div>
</body>
</html>

43
Web/test6/register.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="login.css">
<title>注册</title>
</head>
<body>
<div class="form-container">
<h2>注册界面</h2>
<form class="form">
<div>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入密码" required>
</div>
<div>
<label for="password-2">二次密码:</label>
<input type="password" name="password-2" id="password-2" placeholder="请再次输入密码" required>
</div>
<div>
<label class="user-type-label">用户类型:</label>
<input type="radio" id="user" name="user-type" value="普通用户" checked>
<label for="user">普通用户</label>
<input type="radio" id="admin" name="user-type" value="管理员">
<label for="admin">管理员</label>
</div>
<div>
<label for="remember-me">记住我</label>
<input type="checkbox" name="remember" id="remember-me" value="记住我">
</div>
<button type="submit"><a href="login.html">注册</a></button>
</form>
</div>
</body>
</html>