注：这三个登录页面涉及到的图片素材可自行寻找，字体图标素材可以在阿里字体图标库获取（https://www.iconfont/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"></i><input type="text" value="Username"></p>
<p><i class="iconfont"></i><input type="text" value="Password"></p>
<p class="logIn_btn">
<span class="left_line"></span>
<span class="iconfont"></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"></i><input type="text" value="邮箱"></p>
<p><i class="iconfont"></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 i g n I n F o r 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);
}
END
靓仔/靓妹、大哥/大姐, 给个赞再 say拜拜，行不行？？？
更多推荐
三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTML&CSS
发布评论