问答详情
源自：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">

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>

<!------为什么雪碧图样式没有用----->


提问者：杨小宁 2015-08-13 12:25

个回答

  • Annguowenhua
    2015-08-13 13:16:43
    已采纳

    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
  • Annguowenhua
    2015-08-13 14:58:16

    <!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
  • Annguowenhua
    2015-08-13 14:52:40

    e,可能因为浏览器的兼容问题，所以最好还是用英文名开头，把所有的$替换为英文字母看看~用sublime，"ctrl+f", find all 就可以直接替换啦

    0
  • 杨小宁
    2015-08-13 14:47:55

    <!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
  • Annguowenhua
    2015-08-13 14:43:25

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

    http://img.mukewang.com/55cc3c600001c7f203090347.jpg

    还有，就是你的代码还有其他一些小问题，比如雪碧图的样式没有显示，推荐你看对课程的“同学代码”

    0
  • Annguowenhua
    2015-08-13 13:24:43

    关于命名，因为浏览器的兼容性问题，最好还是用英文字母命名

    0
  • Annguowenhua
    2015-08-13 13:19:25

    雪碧图样式没用有是因为没有设置按钮背景为雪碧图，可以给下面两个按钮加上class，然后.class{background:url(href);}来添加

    0