为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/CSS Sprite雪碧图应用

求大神看看我的代码~~

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

源自：CSS Sprite雪碧图应用  4-1

关注问题 我要回答
1737
操作
收起

正在回答

8 回答

Annguowenhua
2015-08-13

  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

杨小宁 提问者

非常感谢！好人一生平安！！
2015-08-13 回复 有任何疑惑可以回复我~
#3

杨小宁 提问者

你好，我想问下对文本框设置margin:0 auto;让它垂直居中不行吗？
2015-08-13 回复 有任何疑惑可以回复我~
#4

Annguowenhua 回复 杨小宁 提问者

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

杨小宁 提问者

我觉得我分的三个div块，都没有成功设置垂直居中呢，这是怎么回事啊？求解
2015-08-13 回复 有任何疑惑可以回复我~
查看2条回复
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>登录框应用</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

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

0 回复 有任何疑惑可以回复我~
收起回答
#1

杨小宁 提问者

好的。谢谢大神了。感动~~
2015-08-13 回复 有任何疑惑可以回复我~
杨小宁 提问者
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 回复 有任何疑惑可以回复我~
收起回答
Annguowenhua
2015-08-13

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

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

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

0 回复 有任何疑惑可以回复我~
收起回答
#1

杨小宁 提问者

谢谢了，我改了，但是还是不行了，麻烦在看看我的代码吧。这是我修改过的。谢谢思密达~~
2015-08-13 回复 有任何疑惑可以回复我~
#2

杨小宁 提问者

我截图不行额~~~
2015-08-13 回复 有任何疑惑可以回复我~
Annguowenhua
2015-08-13

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

0 回复 有任何疑惑可以回复我~
收起回答
Annguowenhua
2015-08-13

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

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
CSS Sprite雪碧图应用
  • 参与学习       47101    人
  • 解答问题       228    个

必学的大型网站实用技术，让你快速掌握CSS Sprite雪碧图技术

进入课程

本课相似问答

3 回答求大神来优化下代码，让我们学习学习。

2 回答求大神帮忙

1 回答查看网页元代码

2 回答那根红线，我是怎么都移不下来，求大神指导。

3 回答下面是我写好了的程序 我想请问各位大神我的代码还有哪些应该注意的问题？？？
搜索更多本课相关问答

求大神看看我的代码~~

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信