1.代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>0806exm_QQlogin</title><style>/*初始化样式*/html,body,dl,dd,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{margin:0;padding:0;}body,button,input,textarea,select{font-size:12px;font-co:fff;}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;}a{text-decoration:none;}img{border:none;vertical-align:top;}/*最外面的大盒子*/#mydiv{width: 430px;height: 332px;margin: 10% 40%;}/*下部分盒子*/#bodydiv{background-color: #ebf2fa;padding-bottom: 10px;}/*头像以及输入框*/#touxiangdiv,#mesgdiv{display: inline-block;height: 10px;}#touxiangdiv img{margin-top: -70px;}#mesgdiv{margin-top: 30px;}/*登录按钮*/#logindiv button,#logindiv input{width: 170px;height: 30px;margin-left: 85px;margin-top: -20px;color: white;background-color: deepskyblue;border: 0px;border-radius: 5px;}#logindiv{margin-top: 20px;}/*输入框*/#userinput,#userselect,#wordinput{width: 170px;height: 20px;border: 1px lightgray solid;}#userinput,#userselect{width: 172px;border-top-left-radius: 5px;border-top-right-radius: 5px;}#wordinput{border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}#autologin{margin-left: 135px;}.box1{margin-left: 50px;}.left{float: left;}</style></head><body><!--大盒子--><div id="mydiv"><!-- 上部分盒子--><div><img src="../img/0806exam02.png"/></div><!-- 下部分盒子即主体盒子--><div id="bodydiv"><!-- form表单--><form name="login" method="post" action="#"><!-- 除开登录按钮以外的盒子--><div class="box1"><!--头像盒子--><div id="touxiangdiv"><img src="../img/0806exam01.png"/></div><!--输入框盒子--><div id="mesgdiv"><div><!-- 下方的select标签和input标签使用其中一个就行，区别为select有下拉框，但没有提示且不能输入，input有提示且可以输入，但没有下拉框，属性placeholder的值即为提示--><select id="userselect" type="text" name="username"><option value="">2365241246</option><option value="0">1729381727</option></select> <a href="#">注册账号</a><!-- <input id="userinput" type="text" name="username" placeholder="账号"> <a href="#">注册账号</a>--><br><input id="wordinput" type="password" name="pwd" placeholder="密码"> <a href="#">找回密码</a></div><br><div><div class="left"><input type="checkbox" name="rempwd"> 记住密码</div><div id="autologin"><input type="checkbox" name="autologin"> 自动登录</div></div></div></div></form><!-- 登录按钮那一行的盒子--><div id="logindiv"><img style="margin-left: 20px;" src="../img/0806exam03.png"/><!-- 下方的button标签和input标签使用其中一个就行，二者在展现上没有太大区别--><!-- <button type="submit">登 录</button>--><input type="submit" value="登 录"><img style="margin-left: 70px" src="../img/0806exam04.png"/></div></div></div></body></html>
