1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQlogin</title>
<style type="text/css">
#myImg01 {
margin-top: 20px;
width: 100px;
height: 100px;
float: left;
background-color: #0190ba;
border-radius: 100px;
}
#myImg02 {
margin-top: 20px;
width: 150px;
height: 120px;
float: left;
}
#myImg03{
margin-top: 30px;
margin-left: 40px;
width: 124px;
height: 182px;
float: left;
text-align: right;
}
#myA{
color: #0190ba;
font-size: 14px;
text-decoration: underline;
}
#loginTop {
margin-top: 150px;
width: 424px;
height: 182px;
margin-left: auto;
margin-right: auto;
}
#loginBot {
width: 424px;
height: 182px;
margin: auto;
}
#myInput {
width: 150px;
height: 20px;
margin-top: 10px;
}
#myButton {
margin-top: 20px;
width: 200px;
height: 40px;
color: #ffffff;
background-color: #0190ba;
border: 0px;
}
/*ID选择器*/
#myform {
background-color: #ffffff;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div id="loginTop">
<img src="../img/QQloginTop.jpg" width="424" height="182"></div>
</div>
<div id="loginBot">
<div id="myImg01">
<img src="../img/qq.jpg" />
</div>
<div id="myImg02">
<form method="get" action="#" id="myform">
账号:<input type="text" value="295134705" id="myInput"/>
<!-- value表示默认值 -->
<br/>
<br/>
密码:<input type="password" placeholder="请输入密码" id="myInput"/>
<!-- placeholder隐藏提示-->
<input type="submit" id="myButton" value="登陆"/>
</form>
</div>
<div id="myImg03">
<a id="myA" href="#">忘记密码</a>
<br/>
<br/>
<br/>
<a id="myA" href="#">注册新用户</a>
</div>
</div>
</body>
</html>
2.用到的图片
3.具体的效果
更多推荐
css3实现qq制作QQ登陆界面
发布评论