效果如圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用者登入</title>
<style type="text/css">
*{margin: 0;
padding: 0;
}/*去掉頁面樣式，通用選擇器*/
body{color:white}/*标簽選擇器*/
.context{background: #50A3A2;
position: absolute;
left: 0;
top:50%;
width: 100%;
height: 400px;
margin-top: -200px;
overflow: hidden;/*隐藏滾動條*/
}/*定位浏覽器邊距位置 左 上 */
.container{/*類選擇器*/
max-width: 600px;
height: 400px;/*左右*/
padding: 80px 0;/*上下*/
text-align: center;
margin: 0 auto;/*居中顯示*/
}
.container h1{/*派生*/
font-size: 40px;
font-weight: 300;}
form{padding: 20px 0;}
form input{border: 1px solid #FFF;
width: 220px;
padding: 10px 15px;
display: block;
margin: 0 auto 10px auto;
border-radius: 30px;/*圓角*/
font-size: 18px;
font-weight: 300;
text-align: center;
}
form button{
background: white;
border: 0;
padding: 10px 15px;
color: green;
border-radius: 8px;
width: 250px;
font-size: 16px;
}
form button:hover{
background:#CCC; /*滑鼠移動上去按鈕顔色變灰色*/
}
</style>
</head>
<body>
<div class="context">
<div class="container">
<h1>Welcome</h1>
<form action="" method="get">
<input type="text" name="userid" placeholder="請輸入賬号"/>
<input type="password" name="userpw" placeholder="請輸入密碼"/>
<button type="submit">登 陸</button>
</form>
</div>
</div>
</body>
</html>
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)