注：这三个登录页面涉及到的图片素材可自行寻找，字体图标素材可以在阿里字体图标库获取（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2），如需原版素材可联系作者QQ（3416252112）

废话不多说

先上图为敬！！

在这里插入图片描述

文件目录结构

FIRST

请添加图片描述

1、html源码（index.html）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一次考核_题目一</title><link rel="stylesheet" href="./css/style.css"><link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body><div class="outer_box"><div class="back_one"></div><div class="back_two"></div><div class="login_box"><h3 class="title">注册页面</h3><p><i class="iconfont">&#xe773;</i><input type="text" value="Username"></p><p><i class="iconfont">&#xe774;</i><input type="text" value="Password"></p><p class="logIn_btn"><span class="left_line"></span><span class="iconfont">&#xe600;</span><span class="right_line"></span></p><p class="login"><span>注册</span></p></div></div>
</body>
</html>

2、css源码（style.css）

* {margin: 0px;padding: 0px;
}body {background-color: wheat;
}
input {border: none;border-bottom: 1px solid #dfdfdf;padding: 0px 0px 5px 15px;margin-left: 15px;font-size: 15px;color: #dfdfdf;
}
.outer_box {position: relative;height: calc(100vh);
}/* 背景颜色 */
.back_one {position: absolute;width: 50%;height: 100%;left: 0px;background-color: #7BB6B6;
}
.back_two {position: absolute;width: 50%;height: 100%;right: 0px;background-color: #E3D0AD;
}/* 登录窗口 */
.login_box {width: 300px;height: 350px;background-color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);box-shadow: 10px 10px #80808079;
}/* 标题 */
.login_box .title {width: 100%;text-align: center;margin: 35px 0px 35px 0px;font-size: 30px;color: #52565B;
}/* p标签的公共样式 */
.login_box p {width: 100%;height: 40px;margin-top: 15px;text-align: center;justify-content: center;
}/* iconfont */
.login_box p i {color: #52565B;font-size: 25px;
}/* 登录按钮的样式 */
.login_box .logIn_btn {width: 100px;height: 40px;line-height: 40px;margin-left: 100px;background-color: #EBF7F3;color: #7BB6B6;border-radius: 5px;box-shadow: 0px 0px 3px #e6e5e5;font-weight: bold;display: flex;
}
.login_box .logIn_btn span {display: block;width: 33%;/* height: 100%; */
}
.login_box .logIn_btn .left_line {height: 20px;margin-top: 20px;border-left: 2px solid #7BB6B6;
}
.login_box .logIn_btn .right_line {height: 20px;border-right: 2px solid #7BB6B6;
}/* 注册按钮 */
.login_box .login {width: 100px;height: 40px;margin: 20px 0px 0px 100px;color: #E3D0AD;font-weight: bold;line-height: 40px;
}

SECOND

请添加图片描述

1、html源码（index.html）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一次考核_题目二</title><link rel="stylesheet" href="./css/style.css"><link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body><div class="outer_box"><div class="filterImg"></div><div class="login_box"><h1><img src="./img/user.png" alt=""></h1><p><i class="iconfont">&#xe74f;</i><input type="text" value="邮箱"></p><p><i class="iconfont">&#xe774;</i><input type="text" value="登录密码"></p><p class="logIn_btn">登录</p><div><span>立即注册</span><span>忘记密码</span></div></div></div>
</body>
</html>

2、css源码（style.css）

* {margin: 0px;padding: 0px;color: #fff;
}input {border: none;
}
.filterImg {width: 100%;height: 100%;background-image: url('../img/backimg.jpg');background-size: 100% 100%;
}
.outer_box {width: 100%;position: relative;height: calc(100vh);
}/* 登录窗口 */
.login_box {width: 320px;height: 400px;border: 1px solid #fff;background-color: rgba(189, 156, 156, 0.233);border-radius: 10px;position: absolute;left: 75%;top: 50%;transform: translate(-50%, -50%);
}/* 用户头像 */
.login_box h1 {width: 100%;height: 112px;margin: 34px 0px;text-align: center;
}
.login_box h1 img{width: 90px;height: 90px;border-radius: 55px;padding: 10px;box-shadow: 0px 0px 5px #fff;border: 1px solid #fff;
}/* p标签公共样式 */
.login_box p {/* width: 100%; */width: 260px;height: 35px;margin: 20px 30px;line-height: 35px;text-align: center;border: 1px solid #fff;border-radius: 27px;
}
/* 邮箱与登录密码 */
.login_box i {font-size: 20px;padding-left: 5px;
}
input {width: 200px;height: 35px;padding-left: 20px;border: none;background: none;
}/* 登录按钮 */
.logIn_btn {color: rgb(255, 166, 181);background-color: rgba(255, 255, 255, 0.863);
}/* 注册与忘记密码 */
.login_box div {width: 260px;font-size: 12px;margin: 0px 30px;display: flex;justify-content: space-between;
}

THIRD

请添加图片描述

1、html源码（index.html）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一次考核_题目三</title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="outer_box"><div class="inner_box"><div class="left_label"></div><div class="center_form"><p class="title"><span>S&nbsp;i&nbsp;g&nbsp;n&nbsp;I&nbsp;n&nbsp;&nbsp;&nbsp;&nbsp;F&nbsp;o&nbsp;r&nbsp;m</span></p><p><input type="text" value="User Name"></p><p><input type="text" value="Password"></p><div class="chk"><span><input type="checkbox" id="dd">Remember me?</span><span>Forgot password?</span></div></div><div class="right_label"></div><div class="signIn_btn"><span>SIGN IN</span></div></div></div>
</body>
</html>

2、css源码（style.css）

* {padding: 0px;margin: 0px;color: #fff;
}/* 外部容器 */
.outer_box {position: relative;width: 100%;height: 100vh;background-image: url('../img/backimg.jpg');background-size: 100% 100%;
}/* 内部登录窗口 */
.inner_box {position: absolute;width: 450px;height: 350px;/* background-color: rgba(127, 255, 212, 0.5); */left: 25%;top: 50%;transform: translate(-50%, -50%);/* display: flex; */
}
.inner_box div {float: left;
}
/* 登录表单 */
.inner_box .center_form {width: 410px;height: 300px;background-color: rgba(134, 221, 221, 0.219);box-shadow: 0px 0px 3px rgb(76, 219, 219);
}
.inner_box .center_form p {height: 60px;width: 410px;text-align: center;
}
.title {height: 50px !important;line-height: 50px;background-color: rgba(82, 202, 182, 0.575);margin-bottom: 40px;
}input {width: 310px;margin: 10px 50px 0px 40px;height: 35px;padding-left: 20px;background: none;border: none;border-bottom: 1px solid #fff;font-size: 15px;
}
/* remember me */
.center_form .chk{width: 330px;height: 60px;line-height: 60px;margin: 10px 40px 0px 40px;display: flex;justify-content:space-between;font-size: 14px;
}
.chk span input {width: 15px;height: 15px;margin: 10px;
}/*两侧小三角形 */
.inner_box .left_label,.right_label {width: 0px;height: 0px;margin-top: 280px;
}
.inner_box .left_label {border-top: solid 10px rgba(255, 255, 255, 0);border-right: solid 10px rgb(255, 255, 255);border-bottom: solid 10px rgb(255, 255, 255);border-left: solid 10px rgba(255, 255, 255, 0);
}
.inner_box .right_label {border-top: solid 10px rgba(255, 255, 255, 0);border-right: solid 10px rgba(255, 255, 255, 0);border-bottom: solid 10px rgb(255, 255, 255);border-left: solid 10px rgb(255, 255, 255);
}
/* 登录按钮 */
.signIn_btn {height: 50px;width: 450px;line-height: 50px;background-color: #fff;text-align: center;
}
.signIn_btn span {font-size: 20px;color:rgb(93, 182, 204);
}