html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QQ登录界面</title> <link rel="stylesheet" type="text/css" href="css/index4.css"> </head> <body> <div id="container"> <div class="input"> 用户名：<input type="text" id="user"> </div> <div class="input"> 密 码：<input type="password" id="password"> </div> <div class="button"> <input type="button" class="btn" value="登录"> <input type="button" class="btn" value="注册"> </div> </div> </body> </html>
css代码：
#container{
height: 300px;
width: 400px;
border: 1px solid;
margin-top: 300px;
margin-left: 40%;
background-image: url("../img/qq.jpg");
background-repeat: no-repeat;
background-position: center center;
}
.input{
height: 40px;
width: 280px;
margin-top: 50px;
margin-left: 50px;
}
.button{
margin-top: 10px;
margin-left: 100px;
}
.btn{
margin-left: 30px;
}
#user{
background-image: url("../img/head.png");
background-repeat: no-repeat;/*图片背景取消平铺*/
padding-left: 30px;
}
#password{
background-image: url("../img/key.jpg");
background-repeat: no-repeat;
padding-left: 30px;
}
图片：
