今天完成的事情：

1、完成了任务四的html和css代码，显示出了同样的示范资料的效果。

学习过程如下：

       昨天任务四做到了input标签这里，了解了下input标签的作用，然后实际操作了下代码，在浏览器上看出显示效果。

       因为任务四中需要切图，需要用img标签把图片显示出来，然后加上input标签做出输入框，因为切得图片px像素值比较大，这个时候就要设置img的像素值大小，我还是比较喜欢用类名class来设置，跟在任务三中的方法是一样的，因为ps软件切出来的图片都是二倍图，所以要给它转换成实际web应用的应该虽小两倍。

       接下来需要设置input元素，在<input type="text"  placeholder="请输入手机号”>，input在浏览器中会显示成一个输入框，在框内要显示出文字，就需要添加placeholder：“占位符”，placeholder这个元素是html5中<input>其中一个属性，它会提示在输入框中没有字的时候显示，当你打字的时候会消失。设置好placeholder后输入框中的字体会显示出来，但是字体颜色比较明显，这个时候可以设置框内字体的颜色，查资料有好几种方法，我选择了下面这种：

虽然不能理解它的意思，但是能在浏览器中起到调试placeholder字体颜色的作用。

       在input里添加placeholder属性，这样才能在框内显示出想要的文字。这个时候需要让它们在一起平行，需  要用到div，使img和input能在一个盒子里。我的html代码如下：

这时我就需要给其中一个div设置margin，让两个盒子之间产生边距。在第一个div盒子里用class类名中加入margin：10px；的像素值，这样就能让两个div产生边距。代码如下：

效果如下：

最后的登录显示因为不需要让它能点击，现在只是把它的样式写出来，所以涉及到一个新元素button标签定义为一个按钮，和input元素不一样，在button元素中可以放置内容，例如文本和图像。所以我用的是<p>标签来写它的框架，用class来写它的框架背景字体颜色和让文字居中显示的效果。

     最后的"忘记密码"我用内联style样式写的，整体的移动端的页面大致出来了。

最后总结：我的代码都是通过class类选择器写的，也就是通过css样式来写，感觉这样自己写着比较顺手，可能是自己最开始接触的是这个所以还是比较熟悉，后面还是要要尝试用html来写样式。

明天的计划：

接着按照任务五的提示，复习前面学习的知识点，然后开始任务五的步骤。

遇到的问题：

1、img和input怎么在一起显示。解决方法如上所诉，用div盒子把图像和输入框放在一个盒子里，然后用class去写它的样式。

2、怎么让input的border无效化，还有怎么让装有img和input的盒子div和示范资料一样显示边距和改变颜色背景的效果，还有让placeholder字体颜色改变。解决方法如上诉。

3、今天任务四完成后，在chrome中用f12调试，发现在用移动端设备看效果的时候，发现<header>头部标签内<span>“注册”的元素被挤出框外了，因为我之前的写法是把关闭、登录、注册三组文字各用class写类名，分别在类名里加上text-align：left；center；right；还有margin和padding的值。

我写的css代码如下：

每一个类名里都加了text-align：的属性，然后想通过设置margin和padding的值使文字居左，居中，居右。页面做出来的效果在网页上是正常的，但是在用f12移动端调试的时候出现了元素被挤出框外，

网页效果如下：

        所以再调试网页效果的时候<span>登录<span>元素就不能一直居中显示，会被左右影响。后来发现我的这种写法在调试过程中<span class="gb">关闭<span>中css样式float：left向左浮动加上去是多余的，然后不管怎么调试margin的值和padding的值，用%或者px都会有偏差，元素总是会挤下去。

        现在的问题，不懂这些单位之间是什么换算的，还有用百分比或者px需要怎么设置margin和padding的值才能达到效果，这是我的一个疑惑。

        最后问了师兄，师兄的方法是直接在<p>元素这一个框里加text-align：center，然后通过float浮动控制第一组文字和第三组文字的左右调控三组文字间的距离，就能达到用移动端查看文本居中的效果。

下面正确的html代码如下：

css样式代码如下：

    这样写出来的代码比我之前写出来还要简洁点，少写了一个class类名。不需要通过设置margin和padding的百分比就可以通过float的效果做出来。

收获：

今天学到了怎么使用input标签，还有怎么让img和input并行。还有botton标签的属性作用的认识。最重要的是重新理解了margin和padding元素的定义和是使用的效果，对于用chrome浏览器中的F12键调试看移动端的页面效果有了一点理解，例如加了margin和padding的值，网页上是怎么显示输入的效果的。还有position中的absolutet的绝对定位也试着加入到代码中呈现了效果。