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.具体的效果
