亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

求大神看看我的代碼~~

<!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">

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="first">

?<div id="back">

<div class="1"> ? ? ? ? ? ? ?<!--1模塊為什么沒有垂直居中，magin:0 auto好像沒起作用啊。。。-->

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

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

? ? ? ? <input type="text" value="請輸入密碼" 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>下次自動登錄</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"/> ? <!-----button里面怎么設置reset1??？不是重置嘛？-------->

? ? ? </form>

</div>

? ? </div>

?</div>

</div>

</body>

</html>

<!------為什么雪碧圖樣式沒有用----->


正在回答

7 回答

  1. class和id的命名不能以數字開頭，只能以$，英文字母，下劃線開頭，否則不起作用，將所有class和id的命名改過來

  2. <input?type="text"?value="手機/郵箱/用戶名"?name="登錄框"??style="height:35px;?width:150px;?margin:5px?15px;????????????????background-color:#EDEDED;?text-align:center"?/>
????????<input?type="text"?value="請輸入密碼"?name="密碼"?style="height:35px;?width:150px;?margin:?5px?15px;????????????????background-color:#EDEDED;?text-align:center"?/>
    最好不要用value=" "來設置輸入框里的默認值，用<input type="text" placeholder="手機/郵箱/用戶名">，因為placeholder顯示的字體是灰色的，并且如果你的輸入框要輸入字，它會自動消失，而用value就要人手動將“手機/郵箱/用戶名”刪除后才能輸入，并且如果你再輸入框輸入字符再全部刪除后，用placeholder會再次顯示默認值，而value就不會了。你試一下就一清二楚了。

  3. 最下面的兩個按鈕用value設置值



1 回復 有任何疑惑可以回復我~
#1

楊小寧 提問者

謝謝了~~太感謝啦。我都不知道這些。。
2015-08-13 回復 有任何疑惑可以回復我~
#2

楊小寧 提問者

非常感謝！好人一生平安?。?/div>
2015-08-13 回復 有任何疑惑可以回復我~
#3

楊小寧 提問者

你好，我想問下對文本框設置margin:0 auto;讓它垂直居中不行嗎？
2015-08-13 回復 有任何疑惑可以回復我~
#4

Annguowenhua 回復 楊小寧 提問者

可以啊，只要你把class的命名改成以英文命名的就可以啦，注意要改兩個地方，一個市body里的，一個是<style>里的
2015-08-13 回復 有任何疑惑可以回復我~
#5

楊小寧 提問者

我覺得我分的三個div塊，都沒有成功設置垂直居中呢，這是怎么回事??？求解
2015-08-13 回復 有任何疑惑可以回復我~
查看2條回復
<!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">
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="手機/郵箱/用戶名"?name="登錄框"??style="height:35px;?width:150px;?margin:5px?15px;????????????????background-color:#EDEDED;?text-align:center"?/>
????????<input?type="text"?value="請輸入密碼"?name="密碼"?style="height:35px;?width:150px;?margin:?5px?15px;????????????????background-color:#EDEDED;?text-align:center"?/>
??????</form>?????????????????????????<!---在表單里面為什么不能設置文本框垂直居中---->
????</div>
????<div?class="div2">
????<div?class="div2-1">
????????<ul?class="div2-1-1">
????????????<li>
????????????????<i?class="ic1"></i>
????????????????????<span>下次自動登錄</span>????<!--為什么這里的字會移到下面去了-->
????????????????????<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里面怎么設置reset1??？不是重置嘛？-------->
??????</form>
</div>
????</div>
?</div>
</div>
</body>
</html>
<!------為什么雪碧圖樣式沒有用----->

這個是我在你最原始的代碼基礎上改了class,id名字的，你運行下

0 回復 有任何疑惑可以回復我~

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

0 回復 有任何疑惑可以回復我~
#1

楊小寧 提問者

好的。謝謝大神了。感動~~
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>登錄框應用</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;

}

.$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="first">

?<div id="back">

<div class="$1"> ? ? ? ? ? ? ?<!--1模塊為什么沒有垂直居中，magin:0 auto好像沒起作用啊。。。-->

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

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

? ? ? ? <input type="text" placeholder="請輸入密碼" 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>下次自動登錄</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="注冊" style="width:150px; height:30px; margin:5px 15px 5px 15px"/> ? <!-----button里面怎么設置reset1啊？不是重置嘛？-------->

? ? ? </form>

</div>

? ? </div>

?</div>

</div>

</body>

</html>

<!------為什么雪碧圖樣式沒有用----->


0 回復 有任何疑惑可以回復我~

可以居中啊，我改了class和id的命名后

http://img1.sycdn.imooc.com//55cc3c600001c7f203090347.jpg

還有，就是你的代碼還有其他一些小問題，比如雪碧圖的樣式沒有顯示，推薦你看對課程的“同學代碼”

0 回復 有任何疑惑可以回復我~
#1

楊小寧 提問者

謝謝了，我改了，但是還是不行了，麻煩在看看我的代碼吧。這是我修改過的。謝謝思密達~~
2015-08-13 回復 有任何疑惑可以回復我~
#2

楊小寧 提問者

我截圖不行額~~~
2015-08-13 回復 有任何疑惑可以回復我~

關于命名，因為瀏覽器的兼容性問題，最好還是用英文字母命名

0 回復 有任何疑惑可以回復我~

雪碧圖樣式沒用有是因為沒有設置按鈕背景為雪碧圖，可以給下面兩個按鈕加上class，然后.class{background:url(href);}來添加

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

求大神看看我的代碼~~

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號