很简单的一个登陆界面:
代码：
<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>
