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

求大神看看我的代碼~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

div{

margin:0;

padding:0;

}

#first{

width:250px;

height:300px;

border: #CCC 1px solid;

background-color:#FFF;

}

#back{

width:90%;

height:90%;

background-color:#3CF;

margin:10px auto;

}

.1{

width:80%;

height:40%;

margin:0 auto;

}

.2{

width:80%;

height:10%;

margin:0 auto;

}

.3{

width:80%;

height:45%;

margin:10px auto;

}

.1-1{

margin:10px auto;

}

.3-1{

margin:10px auto;

}

.input{

height:100%;

margin-top:3px;

}

ul{

list-style:none;

}

span{

font-size:12px;

float:left;

}

li i{

background:url(%E6%8C%89%E9%92%AE.jpg);

}

.icon1{

background-position:0 -115px;

}

.icon2{

background-position:0 -30px;

}

.icon3{

background-position:0 -60px;

}

</style>

</head>

<body>

?<div id="back">

? ? ? <form class="1-1">

? ? ? <input type="text" value="手機(jī)/郵箱/用戶名" name="登錄框" ?style="height:35px; width:150px; margin:5px 15px; ? ? ? ? ? ? ? ?background-color:#EDEDED; text-align:center" />

? ? ? ? <input type="text" value="請(qǐng)輸入密碼" name="密碼" style="height:35px; width:150px; margin: 5px 15px; ? ? ? ? ? ? ? ?background-color:#EDEDED; text-align:center" />

? ? ? </form> ? ? ? ? ? ? ? ? ? ? ? ?

? ? </div>

? ? <div class="2">

? ? <div class="2-1">

? ? ? ? <ul class="2-1-1">

? ? ? ? ? ? <li>

? ? ? ? ? ? ? ? <i class="ic1"></i>

? ? ? ? ? ? ? ? ? ? <span>下次自動(dòng)登錄</span> ? ?

? ? ? ? ? ? ? ? ? ? <span>?忘記密碼</span>

? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? </ul>

? ? ? ? </div>

? ? </div>

? ? <div class="3">

? ? ?<div class="3-1">

? ? ? <form>

? ? <i class="ic2"></i>

? ? ? ? <input ?type="button" style="width:150px; height:30px; margin:5px 15px 5px 15px"/>

? ? ? ? <hr />

? ? ? ? <i class="ic3"></i> ?

? ? ? ? <input type="reset" value="" style="width:150px; height:30px; margin:5px 15px 5px 15px"/> ?

? ? ? </form>

</div>

? ? </div>

?</div>

</div>

</body>

</html>

楊小寧

2015-08-13

源自：CSS Sprite雪碧圖應(yīng)用 4-1

關(guān)注問(wèn)題我要回答

1803

操作

收起

7 回答

Annguowenhua
2015-08-13

class和id的命名不能以數(shù)字開頭，只能以$，英文字母，下劃線開頭，否則不起作用，將所有class和id的命名改過(guò)來(lái)
```
<input?type="text"?value="手機(jī)/郵箱/用戶名"?name="登錄框"??style="height:35px;?width:150px;?margin:5px?15px;????????????????background-color:#EDEDED;?text-align:center"?/>
????????<input?type="text"?value="請(qǐng)輸入密碼"?name="密碼"?style="height:35px;?width:150px;?margin:?5px?15px;????????????????background-color:#EDEDED;?text-align:center"?/>
```
最好不要用value=" "來(lái)設(shè)置輸入框里的默認(rèn)值，用<input type="text" placeholder="手機(jī)/郵箱/用戶名">，因?yàn)閜laceholder顯示的字體是灰色的，并且如果你的輸入框要輸入字，它會(huì)自動(dòng)消失，而用value就要人手動(dòng)將“手機(jī)/郵箱/用戶名”刪除后才能輸入，并且如果你再輸入框輸入字符再全部刪除后，用placeholder會(huì)再次顯示默認(rèn)值，而value就不會(huì)了。你試一下就一清二楚了。
最下面的兩個(gè)按鈕用value設(shè)置值

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

楊小寧提問(wèn)者

謝謝了~~太感謝啦。我都不知道這些。。

2015-08-13 回復(fù) 有任何疑惑可以回復(fù)我~

#2

楊小寧提問(wèn)者

非常感謝！好人一生平安！！

2015-08-13 回復(fù) 有任何疑惑可以回復(fù)我~

#3

楊小寧提問(wèn)者

你好，我想問(wèn)下對(duì)文本框設(shè)置margin:0 auto;讓它垂直居中不行嗎？

2015-08-13 回復(fù) 有任何疑惑可以回復(fù)我~

查看2條回復(fù)

Annguowenhua
2015-08-13

<!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>登錄框應(yīng)用</title>
<style?type="text/css">
div{
margin:0;
padding:0;
}
#first{
width:250px;
height:300px;
border:?#CCC?1px?solid;
background-color:#FFF;
}
#back{
width:90%;
height:90%;
background-color:#3CF;
margin:10px?auto;
}
.div1{
width:80%;
height:40%;
margin:0?auto;
}
.div2{
width:80%;
height:10%;
margin:0?auto;
}
.div3{
width:80%;
height:45%;
margin:10px?auto;
}
.div1-1{
margin:10px?auto;
}
.div3-1{
margin:10px?auto;
}
.input{
height:100%;
margin-top:3px;
}
ul{
list-style:none;
}
span{
font-size:12px;
float:left;
}
li?i{
background:url(%E6%8C%89%E9%92%AE.jpg);
}
.icon1{
background-position:0?-115px;
}
.icon2{
background-position:0?-30px;
}
.icon3{
background-position:0?-60px;
}
</style>
</head>


<body>
<div?id="first">
?<div?id="back">
<div?class="div1">??????????????<!--1模塊為什么沒有垂直居中，magin:0?auto好像沒起作用啊。。。-->
??????<form?class="div1-1">
??????<input?type="text"?value="手機(jī)/郵箱/用戶名"?name="登錄框"??style="height:35px;?width:150px;?margin:5px?15px;????????????????background-color:#EDEDED;?text-align:center"?/>
????????<input?type="text"?value="請(qǐng)輸入密碼"?name="密碼"?style="height:35px;?width:150px;?margin:?5px?15px;????????????????background-color:#EDEDED;?text-align:center"?/>
??????</form>?????????????????????????<!---在表單里面為什么不能設(shè)置文本框垂直居中---->
????</div>
????<div?class="div2">
????<div?class="div2-1">
????????<ul?class="div2-1-1">
????????????<li>
????????????????<i?class="ic1"></i>
????????????????????<span>下次自動(dòng)登錄</span>????<!--為什么這里的字會(huì)移到下面去了-->
????????????????????<span>?忘記密碼</span>
????????????????</li>
????????????</ul>
????????</div>

????</div>
????<div?class="div3">
?????<div?class="div3-1">
??????<form>
????<i?class="ic2"></i>
????????<input??type="button"?style="width:150px;?height:30px;?margin:5px?15px?5px?15px"/>
????????<hr?/>
????????<i?class="ic3"></i>??
????????<input?type="reset"?value=""?style="width:150px;?height:30px;?margin:5px?15px?5px?15px"/>???<!-----button里面怎么設(shè)置reset1?。坎皇侵刂寐?？-------->
??????</form>
</div>
????</div>
?</div>
</div>
</body>
</html>
<!------為什么雪碧圖樣式?jīng)]有用----->

這個(gè)是我在你最原始的代碼基礎(chǔ)上改了class,id名字的，你運(yùn)行下

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

Annguowenhua
2015-08-13

e,可能因?yàn)闉g覽器的兼容問(wèn)題，所以最好還是用英文名開頭，把所有的$替換為英文字母看看~用sublime，"ctrl+f", find all 就可以直接替換啦

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

楊小寧提問(wèn)者

好的。謝謝大神了。感動(dòng)~~

2015-08-13 回復(fù) 有任何疑惑可以回復(fù)我~

楊小寧提問(wèn)者
2015-08-13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

div{

margin:0;

padding:0;

}

#first{

width:250px;

height:300px;

border: #CCC 1px solid;

background-color:#FFF;

}

#back{

width:90%;

height:90%;

background-color:#3CF;

margin:10px auto;

}

.$1{

width:180px;

height:40%;

margin:0 auto;

}

.$2{

width:80%;

height:20%;

margin:0 auto;

}

.$3{

width:80%;

height:45%;

margin:10px auto;

}

.$1-1{

width:150px;

margin:10px auto;

}

.$3-1{

margin:10px auto;

width:200px;

}

.input{

height:100%;

margin-top:3px;

}

ul{

list-style:none;

}

span{

font-size:12px;

float:left;

margin:15px 0px 10px 5px;

}

li i{

background:url(%E6%8C%89%E9%92%AE.jpg);

}

.icon1{

background-image:url(%E6%8C%89%E9%92%AE.png);

background-position:0 -115px;

}

.icon2{

background-image:url(%E6%8C%89%E9%92%AE.png);

background-position:0 -30px;

}

.icon3{

background-image:url(%E6%8C%89%E9%92%AE.png);

background-position:0 -60px;

}

</style>

</head>

<body>

?<div id="back">

? ? ? <form class="$1-1">

? ? ? <input type="text" placeholder="手機(jī)/郵箱/用戶名" name="登錄框" ?style="height:35px; width:150px; margin:5px 15px;background-color:#EDEDED; text-align:center" />

? ? ? ? <input type="text" placeholder="請(qǐng)輸入密碼" name="密碼" style="height:35px; width:150px; margin: 5px 15px; background-color:#EDEDED; text-align:center" />

? ? ? </form> ? ? ? ? ? ? ? ? ? ? ? ?

? ? </div>

? ? <div class="$2">

? ? <form class="$2-1">

? ? ? ? ? <input type="checkbox" class="icon1" style="width:20px; height:20px; margin:10px; float:left" />

? ? ? ? ? ? ? ? <span>下次自動(dòng)登錄</span> ? ?

? ? ? ? ? ? ? ? <span>?忘記密碼</span>

? ? ? ? </form>

? ? </div>

? ? <div class="$3">

? ? ?<div class="$3-1">

? ? ? <form>

? ? ? ? <input ?type="button" class="icon2" value="登錄" style="width:150px; height:30px; margin:5px 15px 5px 15px"/>

? ? ? ? <hr style="width:100%"/> ?

? ? ? ? <input type="button" class="icon3" value="注冊(cè)" style="width:150px; height:30px; margin:5px 15px 5px 15px"/> ?

? ? ? </form>

</div>

? ? </div>

?</div>

</div>

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答