缺少HTML Doctype造成的样式问题
很简单的一个登陆界面:
代码：
<html> <head> <style type="text/css"> form span { display: block; font-size: 1em; color: #787878; padding-bottom: 5px; font-weight: 600; font-family: 'Open Sans', sans-serif; } body{ background-color: #86B4CC; } .main{ margin: 7em auto 0; width: 30%; position: relative; } .user{ text-align: right; margin-right: 5.2em; } .login{ background-color: #fff; position: relative; padding: 2em 2em; } form span{ display: block; color: #787878; padding-bottom: 5px; font-weight: 600; font-family: 'Open Sans', sans-serif; } input[type="text"],input[type="Password"]{ padding:9px; width: 90%; border:2px solid #609EC3; margin-left: 5px; } .sign{ padding: 10px 0; } .submit{ padding: 2px 2px; float: left; margin-right: 11px; } .forget-pass{ float: right; } .submit input[type="submit"]{ background: #F06B37; border:none; padding: 0.55em 1.3em 0.6em; cursor: pointer; color: #FFF; border-radius: 1.3em; } </style> </head> <body> <div class="main"> <div class="user"> <img src="user.png"> </div> <div class="login"> <div class="inset"> <form> <div> <span> <label>Username</label> </span> <span> <input type="text" class="textbox" id="active"> </span> </div> <div> <span> <label>Password</label> </span> <span> <input type="password" class="textbox" id="active"> </span> </div> <div class="sign"> <div class="submit"> <input type="submit" value="LOGIN"> </div> <div class="forget-pass"> <a href="#">Forget Password</a> </div> </div> </form> </div> </div> </div> </body> </html>
如果加上<!DOCTYPE html>
什么代码都没有改，就是加上了<!DOCTYPE html>
<!DOCTYPE html> <html> <head> <style type="text/css"> form span { display: block; font-size: 1em; color: #787878; padding-bottom: 5px; font-weight: 600; font-family: 'Open Sans', sans-serif; } body{ background-color: #86B4CC; } .main{ margin: 7em auto 0; width: 30%; position: relative; } .user{ text-align: right; margin-right: 5.2em; } .login{ background-color: #fff; position: relative; padding: 2em 2em; } form span{ display: block; color: #787878; padding-bottom: 5px; font-weight: 600; font-family: 'Open Sans', sans-serif; } input[type="text"],input[type="Password"]{ padding:9px; width: 90%; border:2px solid #609EC3; margin-left: 5px; } .sign{ padding: 10px 0; } .submit{ padding: 2px 2px; float: left; margin-right: 11px; } .forget-pass{ float: right; } .submit input[type="submit"]{ background: #F06B37; border:none; padding: 0.55em 1.3em 0.6em; cursor: pointer; color: #FFF; border-radius: 1.3em; } </style> </head> <body> <div class="main"> <div class="user"> <img src="user.png"> </div> <div class="login"> <div class="inset"> <form> <div> <span> <label>Username</label> </span> <span> <input type="text" class="textbox" id="active"> </span> </div> <div> <span> <label>Password</label> </span> <span> <input type="password" class="textbox" id="active"> </span> </div> <div class="sign"> <div class="submit"> <input type="submit" value="LOGIN"> </div> <div class="forget-pass"> <a href="#">Forget Password</a> </div> </div> </form> </div> </div> </div> </body> </html>
