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

雪碧圖出不來，求指教，看看問題在哪？

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標題文檔</title>

<style>
*{
????margin:0;
????padding:0;
}

form{
????width:200px;
????padding:5px?10px;
????background-color:lightblue;
}

.block?{
????width:190px;
????height:38px;
????display:block;
????margin:10px?0;
????font-size:15px;
????text-indent:2em;
}

label,a{
????font-size:80%;
	text-decoration:none;
}

label{
????margin-right:25px;
}

.button{
????border:none;
????background-image:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);
}

#signup{
	background:url(sp.png)0?-38px;
	display:inline;
}
</style>
</head>

<body>

<form>
????<input?class="block"?placeholder="郵箱/手機號/用戶名">
????<input?class="block"?placeholder="請輸入密碼">
????<input?type="checkbox"?id="remember">
????<label?for="remember">下次自動登錄</label>
????<a?href="#">忘記密碼?</a>
????<!--<button?class="block"?id="login"></button>
????<button?class="block"?id="signup"></button>-->
????<div?class="block"><input??class="button"?type="button"></div>
????<div?class="block"><input??class="button"?type="button"?id="signup"></div>
????
????
</form>


</body>
</html>

邢旭叔叔

2015-10-20

源自：CSS Sprite雪碧圖應用 4-1

關注問題我要回答

1230

操作

收起

2 回答

躺平的momo 回答被采納 +3 積分
2015-10-20

你div里面的input沒有設寬高

.button{
??? width:100%;
??? height:100%;
????border:none;
??? background-image:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);
}
#signup{
??? background:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg)0 -38px;
?? ?
}