課程
/前端開發
/HTML/CSS
/CSS Sprite雪碧圖應用
希望相互交流，看到不同的布局思路。
2015-08-19
源自：CSS Sprite雪碧圖應用 4-1
正在回答
<!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 type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 220px;
height: 400px;
background: #ebf2fa;
.login-form {
padding: 15px;
.login-input {
display: block;
width: 188px;
height: 32px;
border: 1px solid #abd6c9;
border-radius: 3px;
text-indent: 30px;
margin-top: 15px;
font-size: 15px;
p {
height: 13px;
p a {
font-size: 13px;
text-decoration: none;
float: right;
p lable {
vertical-align: top;
.btn {
width: 190px;
height: 38px;
border: 0;
background: url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg) no-repeat;
text-indent: -999em;
cursor: pointer;
.btn2 {
background-position: 0 -38px;
hr {
margin-top: 20px;
color:#CCC;
</style>
</head>
<body>
<div class="box">
? <form class="login-form">
? ? <input class="login-input" type="text" placeholder="郵箱/手機號/用戶名"/>
? ? <input class="login-input" type="password" placeholder="請輸入密碼"/>
? ? <p>
? ? ? <input id="autologin" type="checkbox" />
? ? ? <label for="autologin">下次自動登錄</label>
? ? ? <a href="#">忘記密碼？</a> </p>
? ? <input type="submit" class="btn" value="登錄"/>
? ? <hr />
? ? <input type="button" class="btn btn2" value="注冊"/>
? </form>
</div>
</body>
</html>
舉報
必學的大型網站實用技術，讓你快速掌握CSS Sprite雪碧圖技術
3 回答求大神來優化下代碼，讓我們學習學習。
1 回答查看網頁元代碼
8 回答求大神看看我的代碼~~
10 回答那位大神指點一下？基本和例題一樣,為什么圖片顯示不出來呢？萬分感謝
1 回答提議一個建議，編程挑戰的代碼能在線保存就好了
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
<fieldset id="uhsjq"><rp id="uhsjq"></rp></fieldset>
2015-12-15
<!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 type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 220px;
height: 400px;
background: #ebf2fa;
}
.login-form {
padding: 15px;
}
.login-input {
display: block;
width: 188px;
height: 32px;
border: 1px solid #abd6c9;
border-radius: 3px;
text-indent: 30px;
margin-top: 15px;
font-size: 15px;
}
p {
height: 13px;
margin-top: 15px;
}
p a {
font-size: 13px;
text-decoration: none;
float: right;
}
p lable {
font-size: 13px;
vertical-align: top;
}
.btn {
width: 190px;
height: 38px;
margin-top: 15px;
border: 0;
background: url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg) no-repeat;
text-indent: -999em;
cursor: pointer;
}
.btn2 {
background-position: 0 -38px;
}
hr {
margin-top: 20px;
color:#CCC;
}
</style>
</head>
<body>
<div class="box">
? <form class="login-form">
? ? <input class="login-input" type="text" placeholder="郵箱/手機號/用戶名"/>
? ? <input class="login-input" type="password" placeholder="請輸入密碼"/>
? ? <p>
? ? ? <input id="autologin" type="checkbox" />
? ? ? <label for="autologin">下次自動登錄</label>
? ? ? <a href="#">忘記密碼？</a> </p>
? ? <input type="submit" class="btn" value="登錄"/>
? ? <hr />
? ? <input type="button" class="btn btn2" value="注冊"/>
? </form>
</div>
</body>
</html>