今日完成工作：

推进到了任务四，内容是制作一个移动端的登录页面。页面包括了两个部分，一个是置顶的蓝色区域，之后便是一份表单。

在置顶的蓝色区域内部，最开始先要确定它的位置，在此任务中我使用了相对位置，让他顶到左边和上边，而右边则是用的margin负距离给他填满空白。之后需要确定三个文本。开始想法是用盒子的浮动先让三个块水平排布，左边float left 右边float right，然后通过padding和margin的方式让三个块自适应在顶部的蓝色区域中，但师兄的推荐让我了解了弹性盒子的存在，在父元素中使用display:flex使用体验极佳，值得推荐。

   <div class="header">

        <div class="text1">注册</div>

        <div class="text2">登录</div>

        <div class="text3">关闭</div>

    </div>

表单中需要我们用到两个资料中的切图，将class直接写在input中去用background：url引用图标并确定大小。把input中的值写进去用padding确定文字在这个行中的位置，下一个同上。只是这个当中需要把用div把input包裹住应为背景色在这里是白色的。

最后在登录处，设置button并描述格式。

    <form>

        <div class="form1">        

            <input class="content1" type="text"  placeholder="请输入手机号">

        </div>    

        <br>

        <div class="form1">           

             <input class="content2" type="password" placeholder="请输入密码">

        </div>

        <input class="text4" type="button"  value="登录">

    </form> 

明日要完成的工作：

对任务五进行攻克，锻炼最近用的知识。

遇到的问题：

今天遇到的问题其实比较多的，首先一开始并不知道除了顶部的区域下面是使用表单的形式，第二是在input中的padding导致了右边空出来了一大截，询问师兄后才知道可以使用box-sizing属性可以把padding包括进去。