一.登陆界面
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<title></title>
</head>
<body>
<div id="login_box">
<form action="#" method="POST" id="login_form">
<label>
<img src="img/user.png"/>
<input type="text" id="username" name="username" placeholder="请输入用户名"/>
</label>
<label>
<img src="img/pass.png"/>
<input type="password" id="userpassword" name="userpassword" placeholder="请输入密码"/>
</label>
<p>
<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
</p>
</form>
</div>
</body>
</html>
/*通用设置*/
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type:none ;
}
a{
color: #000;
text-decoration: none;
}
/*登陆样式*/
#login_box{
width: 539px;
height: 416px;
background: url(../img/bg.png) no-repeat left center ;
margin: 0 auto;
position: relative;
}
#login_box form{
position: absolute;
top:130px;
left: 135px;
}
#login_box form label{
display: inline-block;
width: 270px;
height: 38px;
background-color: #eae7e7;
margin-bottom: 30px;
}
#login_box form label img{
display:inline-block;
width: 40px;
height: 38px;
vertical-align: middle;
}
#login_box form label input{
display: inline-block;
width: 223px;
height: 36px;
border: 1px solid #eae7e7;
}
#login_box form p input{
display: inline-block;
width: 80px;
height: 35px;
margin-left: 40px;
border-radius: 15px;
background-color: #fed475;
}
二.QQ登陆界面
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/QQ.css"/>
<title></title>
</head>
<body>
<div id="bigfirst">
<form>
<div id="second1">
<img src="img/QQsmall1.png"/>
</div>
<div id="second2">
<div id="third1">
<img src="img/head.png"/>
</div>
<div id="third2">
<p><label>账号:<input type="text"></label></p >
<p><label>密码:<input type="text"></label></p >
</div>
<div id="third3">
<input type="button" value="安全登录" />
</div>
</div>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
}
a{
text-decoration: none;
}
#bigfirst{
width: 400px;
height: 350px;
margin: auto;
margin-top: 30px;
}
#second1{
width: 400px;
height: 130px;
background-color: #2ab0f7;
background-size: cover;
}
#second1 img{
margin-left: 115px;
margin-top: 22px;
}
#second2{
width: 400px;
height: 210px;
background-color: #ebf2f9;
}
#third1{
width: 150px;
height: 120px;
background-size: cover;
float: left;
}
#third1 img{
margin-left: 30px;
margin-top: 30px;
}
#third2{
width: 250px;
height: 120px;
float: right;
margin-top: 30px;
line-height: 40px;
}
#third2 input{
width: 150px;
height: 21px;
margin-left: 10px;
background-color: #ffffff;
}
#third3{
width: 400px;
height: 40px;
}
#third3 input{
background-color: #2ab0f7;
border: none;
color: white;
width: 220px;
height: 34px;
margin-left: 150px;
border-radius: 5px;
}