自己在学习过程中跟着学习的简单html页面，页面展示效果：
>>>源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>登录</title>
<style>
* {margin: 0px;
padding: 0px;
}
#bj {
background-image: url(
./ms01.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
#login_box {
width: 400px;
height: auto;
background: #00000060;
margin: auto;
margin-top: 13%;
text-align: center;
padding: 20px 50px;
color: #fff;
}
#login_box .form .name {
padding: 10px;
}
#login_box .form .name input {
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 3px #fff solid;
background: #ffffff00;
padding: 5px 10px;
color: #fff;
}
#login_box #tj {
margin-top: 20px;
width: 160px;
height: 20px;
}
#tj {
border: 0px;
border-radius: 15px;
background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
}
</style>
</head>
<body id="bj">
<div id="login_box">
<h1>Login</h1>
<div class="form">
<div class="name">
<i></i>
<input type="text" placeholder="username">
</div>
<div class="name">
<i></i>
<input type="text" placeholder="password">
</div>
</div>
<button id="tj">login</button>
</div>
</body>
</html>
注：红色背景的元素是在同一文件夹下的一张图片，因为无法上传文件夹，所以只上传了源码，图片放在了下面。
