首页 > 代码库 > 缺少HTML Doctype造成的样式问题
缺少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>
缺少HTML Doctype造成的样式问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。