自己在學習過程中跟着學習的簡單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>
注：紅色背景的元素是在同一檔案夾下的一張圖檔，因為無法上傳檔案夾，是以隻上傳了源碼，圖檔放在了下面。
