                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /CSS Sprite雪碧圖應用

這樣寫可以不

<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<title>無標題文檔</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="郵箱/手機號/用戶名"?/>
????????<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>

感覺好像把圖片拉變形了……