PS:该源码非原创，原文章来自(2条消息) HTML+CSS登录界面_桐艾的博客-CSDN博客_登录页面
这里只做源码讲解
页面效果如下： 
首先是login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title> <link rel="stylesheet" href="./login.css"/>
</head>
<body><div id="login-box"><h1>Login</h1><div class="form"><div class="item"><i class="fa fa-github-alt" style="font-size:24px"></i><input type="text" placeholder="Username"> </div><div class="item"><i class="fa fa-search" style="font-size:24px"></i><input type="text" placeholder="Password"> </div></div><button>Login</button></div></body>
</html>
login.html效果如下
源码剖析如下：
<h1>Login</h1>#一级标题
<link rel="stylesheet" href="./login.css"/> #link标签在head部分，用于链接两个文档，rel属性必须，表示要导入的样式表的URL,href后面就接着css文件的路径，可以是相对也可以是绝对路径。
<div class="item"> #选择器class=item的盒子
<i class="fa fa-github-alt" style="font-size:24px"></i> # 字体24px的一个图标
<input type="text" placeholder="Username"> #输入框，默认值为Username
</div>
<div class="item"> #选择器class=item的盒子
<i class="fa fa-search" style="font-size:24px"></i> #字体24px的图标
<input type="text" placeholder="Password"> #输入框，默认值为Password
</div>
<div class="form"> # 选择器class=form的盒子，将前面两个盒子装入
<div class="item">
<i class="fa fa-github-alt" style="font-size:24px"></i>
<input type="text" placeholder="Username">
</div>
<div class="item">
<i class="fa fa-search" style="font-size:24px"></i>
<input type="text" placeholder="Password">
</div>
</div>
<button>Login</button>#按钮
以下是login.css的内容：
body{background:url('./1.jpg');background-repeat:no-repeat;background-size:100% auto;
}
#login-box{width:30%;height:auto;margin:0 auto ;margin-top:13%;text-align:center;background:#00000060;padding:20px 50px;
}
#login-box h1{color:#fff;
}
#login-box .form .item{margin-top:15px;
}
#login-box .form .item i{font-size:18px;color:#fff;
}
#login-box .form .item input{width:180px;font-size:18px;border:0;border-bottom:2px solid #fff;padding:5px 10px;background:#ffffff00;color:#fff;
}
#login-box button{margin-top:20px;width:190px;height:30px;font-size:20px;font-weight:700;color:#fff;background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);border:0;border-radius:15px;
}
源码剖析如下：
body{ #对html文件中的全体进行设置
background:url('./1.jpg'); #背景图片，文件路径自己选择
background-repeat:no-repeat; #背景图片不重复
background-size:100% auto; # 背景的尺寸为100%
}
#login-box{ #对标签为login-box的盒子做处理
width:30%; #设置区域宽度为30%
height:auto; #默认，浏览器计算出实际高度
margin:0 auto ; #让盒子页面居中
margin-top:13%; # 上外边距13%
text-align:center;#设置盒子内部元素居中
background:#00000060; #设置背景色
padding:20px 50px;# 上下填充，左右填充
}
#login-box h1{ #设置选择器login-box的盒子中的h1标题颜色
color:#fff;
}
#login-box .form .item{ # 设置选择器login-box的盒子的form和item盒子的上边距15px
margin-top:15px;
}
#login-box .form .item i{ #对选择器login-box盒子的form，item盒子的两个图标设置大小和颜色
font-size:18px;
color:#fff;
}
#login-box .form .item input{ #设置选择器标签为login-box中的输入框属性
width:180px;# 输入框宽度
font-size:18px; #输入字体大小
border:0; #无边框
border-bottom:2px solid #fff; # 底部边框宽度，实线边框，边框颜色
padding:5px 10px; #上下边距，左右边距
background:#ffffff00; #背景色，即透明
color:#fff; #输入文字颜色
}
#login-box button{ #设置选择器login-box盒子中的按钮
margin-top:20px; #上边距
width:190px; #宽度
height:30px; #高度
font-size:20px; # 字体大小
font-weight:700; # 字体宽度
color:#fff; # 字体颜色
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);#线性渐变，从左侧到右侧，颜色渐变，渐变从按钮的0%到100%
border:0; #无边框
border-radius:15px;# 设置边框均等圆角
}
