這樣寫可以不
<!DOCTYPE?html> <html> <head> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ????<title>無標(biāo)題文檔</title> ????<style> ????????*?{ ????????????margin:?0; ????????????padding:?0; ????????????font-size:?12px; ????????} ????????div?{ ????????????width:?200px; ????????????height:?350px; ????????????background-color:?#fff; ????????????padding:?10px; ????????????border:?1px?solid?#000; ????????????margin-top:?20px; ????????} ????????form?{ ????????????width:?100%; ????????????height:?100%; ????????????background-color:?#ebf3fa; ????????????padding:?20px; ????????????box-sizing:?border-box; ????????} ????????input?{ ????????????width:?100%; ????????????height:?10%; ????????????box-sizing:?border-box; ????????????border:?2px?solid?#eee; ????????????text-align:?center; ????????????margin-bottom:?20px; ????????} ????????input[type=checkbox]?{ ????????????width:?15px; ????????????height:?15px; ????????????margin-right:?5px; ????????} ????????label?{ ????????????display:?inline-block; ????????????line-height:?30px; ????????} ???????? ????????.login?{ ????????????background:?url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg)?no-repeat; ????????????background-size:?120%?460%; ????????} ???????? ????????.reg?{ ????????????background:?url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg)?no-repeat; ????????????background-position:?0?-105px; ????????????background-size:?110%?500%; ????????} ????</style> </head> <body> <div> ????<form> ????????<input?type="text"?placeholder="郵箱/手機(jī)號/用戶名"?/> ????????<input?type="password"?placeholder="請輸入密碼"?/> ????????<label><input?type="checkbox"?/>下次自動登錄</label> ????????<input?type="button"?class="login"/> ????????<hr?/> ????????<br> ????????<input?type="button"?class="reg"/> ????</form> </div> </body> </html>
感覺好像把圖片拉變形了……
2018-02-01
可以的