299 lines
8.7 KiB
Markdown
299 lines
8.7 KiB
Markdown
# 登录注册页面
|
||
|
||
## 需求
|
||
|
||
- 开发一个可以点击登录和注册的网页
|
||
|
||
## 参考代码
|
||
|
||
- login.html
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>欢迎使用</title>
|
||
<style>
|
||
body {
|
||
/* 修改背景 */
|
||
background: url(https://www.loliapi.com/acg/);
|
||
/* 背景图 */
|
||
background-position: center 0;
|
||
/* 背景水平居中，后面的0表示上下不动 */
|
||
background-repeat: no-repeat;
|
||
/* 背景图不要重复 */
|
||
background-size: cover;
|
||
/* 背景图大小自动铺满屏幕 */
|
||
}
|
||
|
||
#login_btn {
|
||
color: white;
|
||
background: linear-gradient(90deg, red, green, blue, white, orange, yellow);
|
||
/* 生成渐变色 */
|
||
background-size: 400%;
|
||
/* 背景放大 */
|
||
border: none;
|
||
/* 边框2px宽，实线，橙色 */
|
||
border-radius: 10px;
|
||
/* 边角圆度10px */
|
||
padding: 10px 20px;
|
||
/* 内边距，可以看到背景被撑大 */
|
||
text-shadow: 1px 1px 2px black;
|
||
/* 文字的阴影效果，上下1px 左右1px 模糊程度2px 颜色gold */
|
||
transition: 0.5s;
|
||
animation: move infinite linear 8s;
|
||
}
|
||
|
||
#login_btn:hover {
|
||
animation: zhuan infinite linear 2s;
|
||
box-shadow: 0px 0px 20px white;
|
||
cursor: pointer;
|
||
padding: 25px 40px;
|
||
font-size: 28px;
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
@keyframes move {
|
||
0% {
|
||
background-position: 0px;
|
||
}
|
||
|
||
100% {
|
||
background-position: -400%;
|
||
}
|
||
}
|
||
|
||
@keyframes zhuan {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
background-position: -400%;
|
||
}
|
||
}
|
||
|
||
.input_text {
|
||
background: none;
|
||
/* 去除背景 */
|
||
border: 2px solid orange;
|
||
padding: 15px 20px;
|
||
margin: 10px auto;
|
||
/* 外边距，上下10px，左右居中自动调整 */
|
||
width: 180px;
|
||
/* 宽度 */
|
||
text-align: center;
|
||
/* 文字居中 */
|
||
outline: none;
|
||
/* 外部的线，只有文本框被选择的时候出现 */
|
||
color: white;
|
||
font-size: 22px;
|
||
/* 字体大小 */
|
||
display: block;
|
||
/* block显示模式，是一个占据一整行，inline是不占据一整行 */
|
||
border-radius: 10px;
|
||
transition: 0.5s;
|
||
/* 当属性值发生变化的时候，需要经历的时间 */
|
||
}
|
||
|
||
.input_text:focus {
|
||
width: 220px;
|
||
border-radius: 30px;
|
||
border-color: blue;
|
||
}
|
||
|
||
.input_text::placeholder {
|
||
color: white;
|
||
}
|
||
|
||
.box {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
position: absolute;
|
||
/* 绝对定位，基于浏览器窗口定位 */
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
/* 基于元素本身的大小，往左上移动50% */
|
||
border: none;
|
||
color: aliceblue;
|
||
text-align: center;
|
||
padding: 10px 50px;
|
||
border-radius: 20px;
|
||
width: 280px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="box">
|
||
<form action="" method="post">
|
||
<h1>欢迎登录</h1>
|
||
<input class="input_text" name="username" type="text" placeholder="用户名">
|
||
<!-- placeholder属性用于文本框的提示 -->
|
||
<input class="input_text" name="password" type="password" placeholder="密码">
|
||
<input id="login_btn" name="login" type="submit" value="登录">
|
||
<input id="login_btn" type="button" onclick="window.location.href='register.html'" value="注册">
|
||
</form>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html>
|
||
```
|
||
|
||
- register.html
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>欢迎使用</title>
|
||
<style>
|
||
body {
|
||
/* 修改背景 */
|
||
background: url(https://www.loliapi.com/acg/);
|
||
/* 背景图 */
|
||
background-position: center 0;
|
||
/* 背景水平居中，后面的0表示上下不动 */
|
||
background-repeat: no-repeat;
|
||
/* 背景图不要重复 */
|
||
background-size: cover;
|
||
/* 背景图大小自动铺满屏幕 */
|
||
}
|
||
|
||
#login_btn {
|
||
color: white;
|
||
background: linear-gradient(90deg, red, green, blue, white, orange, yellow);
|
||
/* 生成渐变色 */
|
||
background-size: 400%;
|
||
/* 背景放大 */
|
||
border: none;
|
||
/* 边框2px宽，实线，橙色 */
|
||
border-radius: 10px;
|
||
/* 边角圆度10px */
|
||
padding: 10px 20px;
|
||
/* 内边距，可以看到背景被撑大 */
|
||
text-shadow: 1px 1px 2px black;
|
||
/* 文字的阴影效果，上下1px 左右1px 模糊程度2px 颜色gold */
|
||
transition: 0.5s;
|
||
animation: move infinite linear 8s;
|
||
}
|
||
|
||
#login_btn:hover {
|
||
animation: zhuan infinite linear 2s;
|
||
box-shadow: 0px 0px 20px white;
|
||
cursor: pointer;
|
||
padding: 25px 40px;
|
||
font-size: 28px;
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
@keyframes move {
|
||
0% {
|
||
background-position: 0px;
|
||
}
|
||
|
||
100% {
|
||
background-position: -400%;
|
||
}
|
||
}
|
||
|
||
@keyframes zhuan {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
background-position: -400%;
|
||
}
|
||
}
|
||
|
||
.input_text {
|
||
background: none;
|
||
/* 去除背景 */
|
||
border: 2px solid orange;
|
||
padding: 15px 20px;
|
||
margin: 10px auto;
|
||
/* 外边距，上下10px，左右居中自动调整 */
|
||
width: 180px;
|
||
/* 宽度 */
|
||
text-align: center;
|
||
/* 文字居中 */
|
||
outline: none;
|
||
/* 外部的线，只有文本框被选择的时候出现 */
|
||
color: white;
|
||
font-size: 22px;
|
||
/* 字体大小 */
|
||
display: block;
|
||
/* block显示模式，是一个占据一整行，inline是不占据一整行 */
|
||
border-radius: 10px;
|
||
transition: 0.5s;
|
||
/* 当属性值发生变化的时候，需要经历的时间 */
|
||
}
|
||
|
||
.input_text:focus {
|
||
width: 220px;
|
||
border-radius: 30px;
|
||
border-color: blue;
|
||
}
|
||
|
||
.input_text::placeholder {
|
||
color: white;
|
||
}
|
||
|
||
.box {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
position: absolute;
|
||
/* 绝对定位，基于浏览器窗口定位 */
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
/* 基于元素本身的大小，往左上移动50% */
|
||
border: none;
|
||
color: aliceblue;
|
||
text-align: center;
|
||
padding: 10px 50px;
|
||
border-radius: 20px;
|
||
width: 280px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="box">
|
||
<form action="" method="post">
|
||
<h1>欢迎注册</h1>
|
||
<input class="input_text" name="username" type="text" placeholder="用户名">
|
||
<!-- placeholder属性用于文本框的提示 -->
|
||
<input class="input_text" name="password" type="text" placeholder="密码">
|
||
<input class="input_text" name="confirmPassword" type="text" placeholder="确认密码">
|
||
<input id="login_btn" name="register" type="submit" value="注册">
|
||
<input id="login_btn" type="button" onclick="window.location.href='login.html'" value="登录">
|
||
</form>
|
||
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|
||
```
|
||
|
||
效果展示
|
||
|
||
<video src="https://static.eagleslab.com/python-c73d2e01-83a8-17ef-e0b9-59b3ab5fc599/project13/效果展示.mp4" width="100%" controls>
|
||
您的浏览器不支持 Video 标签。
|
||
</video>
|
||
|
||
><span style="color: red; background: yellow; padding: 2px 5px; font-size: 22px;">作业13.1提交的内容</span>
|
||
>
|
||
>- 理解程序的运行逻辑
|
||
>- 程序运行成功的截图，单独发送给组长
|