                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS Sprite雪碧圖應用

checkbox的css樣式

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
</head>
<style>
*{margin:?0;padding:?0;}????
.login{
????width:200px;
????margin:10px;
????padding:1px?8px?8px?8px;
????background-color:#EBF3FA;
????position:relative;
}
.ipt{
????border:solid?1px?#999;
????border-radius:3px;
????width:180px;
????height:28px;
????margin:10px?auto;
????display:block;
????padding:3px?0?3px?10px;
}
::-webkit-input-placeholder,:-ms-input-placeholder?{?/*?WebKit?browsers?*/
????color:#888;
????font-size:14px;
}
:-moz-placeholder,::-moz-placeholder??{?/*?Mozilla?Firefox?4?to?18?*/
???color:#888;
???opacity:1;
???font-size:14px;
}
.ckb{
????margin:0?0?0?4px;
????border:#f00?solid?1px;
????border-radius:2px;
????background-color:#eee;
}
.lb{
????display:inline-block;
????font-size:12px;
????line-height:1;
????height:14px;
????vertical-align:middle;
}
.a{
????text-decoration:none;
????color:#0A64AF;
????font-size:12px;
????position:absolute;
????right:5px;
}
.btn{
????display:block;
????width:190px;
????height:38px;
????margin:12px?auto;
????background-image:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);
????background-repeat:no-repeat;
????border:none;
????outline:none;
}
.btn2{
????background-position:0?-38px;
}
hr{
????border-left:none;
????border-right:none;
????border-bottom:solid?1px?#fff;
????border-top:solid?1px?#ddd;
????width:190px;
????margin:0?auto;
}
</style>
<body>

<div>
????<input?type="text"?placeholder="郵箱/手機號/用戶名">
????<input?type="password"?placeholder="請輸入密碼">
????<input?type="checkbox"?id="dl">
????<label?for="dl">下次自動登錄</label>
????<a?href="#">忘記密碼？</a>
????<button?type="submit"?value="登錄"></button>
????<hr?/>
????<button?class="btn?btn2"?type="button"?value="注冊"></button>
</div>

</body>
</html>

checkbox的css樣式修改以后貌似沒什么作用，還是沒法做到和圖上一模一樣。

placeholder的對齊部分也有一點問題，希望有人能解答一下謝謝。