1 HTML部分：
2: CSS部分
<div id="avatar">
</div>
<div id="account">
<div class="input-box"><input type="text" placeholder="Please input username"></div>
<div class="input-box"><input type="password" placeholder="Please input password"></div>
</div>
<button class="login-btn">Sign In</button>
<div id="footer">
<a href="#">Forget Password?</a>
</div>
</div>
CSS代码部分：
@charset “utf-8”;
/统一设置/
*{
margin: 0;
padding: 0;
}
/网页背景图片/
body{
background: url(“background.jpg”) no-repeat ;
background-size: cover;
}
/登陆区主体/
#main{
width: 350px;
height: 600px;
background: rgba(0,0,0,0.5);
margin: 40px auto;
border-top: 8px solid #ffc5d1;
position: relative;
}
/头像区/
#avatar{
width: 184px;
height: 184px;
background: url(“avatar.jpg”) no-repeat;
background-size: cover;
margin: 50px auto;
border-radius: 50%;
}
/账号密码区/
#account{
width: 75%;
/height: 200px;/
/background: #ffd1e4;/
margin: 0 auto;
}
#account .input-box{
height: 50px;
/background: #ffbcdd;/
}
#account .input-box input{
height: 40px;
width: calc(100% - 10px);
border: none;
outline: none;
padding: 0 5px;
background: rgba(0,0,0,0.5);
color: #ffcae5;
font-size: 16px;
}
/登录按钮/
.login-btn{
width: 75%;
height: 40px;
display: block;
margin: 30px auto;
background:#ffc5d1 ;
border: none;
outline: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
/按下按钮/
.login-btn:active{
position: relative;
top:2px;
}
/登陆区底部/
#footer{
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #ccc;
}
#footer a{
color: #ccc;
text-decoration: none;
}
#footer a:hover{
color: red;
}
3： 实际代码
4： 实际生成页面
