<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標題文檔</title>
<style?type="text/css">
*{padding:0;
??margin:0;
??}
form{background:lightblue;
?????width:200px;
?????padding:5px;
?????text-align:center;}
.c{margin-bottom:10px;
???width:190px;
???padding:5px;
???text-indent:2em;}
label{font-size:12px;}
a{font-size:12px;
??margin-left:12px;}
p{background-image:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);
??width:190px;
??height:38px;
??margin:10px?auto;}
.c2{background-position:0?-38px;
????}
</style>
</head>
<body>
<div>
<form>
????<input?class="c"?type="text"?placeholder="郵箱/手機號/用戶名"?/>
????<input?class="c"?type="password"?placeholder="請輸入密碼"?/>
????<input?type="checkbox"?id="zd"?/>
????<label?for="zd">下次自動登錄</label>
????<a?href="#">忘記密碼？</a>
????<p>
????<botton?class="c1"></botton>
????<hr?/>
????<botton?class="c2"></botton>
????</p>
</form>
</div>
</body>
</html>
2015-12-11
首先你通過給<p>標簽設置樣式來達到這種按鈕效果就有所不妥。
你兩個按鈕實際上<p>標簽顯示出來的結(jié)果，與button標簽無關(guān)。（你這理button標簽還拼錯了，不是botton）
你可以去掉<p>標簽的樣式，然后分別定義c1,c2兩個按鈕的樣式，從而達到你想要的效果。
c1{background-image:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg); ??width:190px; ??height:38px; ??margin:10px?auto;} ?? ??<!--c2你可以改成注冊的背景圖--> c2{background-image:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg); ??width:190px; ??height:38px; ??margin:10px?auto;} ?? ??<button?class="c1"></button> ??<hr?/> ??<button?class="c2"></button>? ??