今天完成的事情：

今天主要完成了任务4，任务4主要内容是简单的自适应布局，加上input表单的应用。

1.      html结构

        刚开始做html布局的时候，有一定思维惯性，搭建的结构如图，除了两个input表单应用，其他的结构都由div实现。

     后经师兄提醒，input前的两个背景图可以靠input的背景定位实现，可以省略复杂的盒子嵌套。结构如图。   

2.  header部分布局

3个盒子的左中右垂直居中排布。任务要求扩展里多一条“去掉header的三块文字的任意一两个，剩下的一两个都还在原位置上不会受到影响。”

2.1垂直居中

       本次垂直居中使用了line-height属性，方便快速。

    百度发现有人提出使用line-height垂直居中时，要注意border的设置。将border设置粗值后能看到border的影响，解决办法为将border的设置放置在此对象的外层。

2.2 水平居中

      Header部分中间“登录”文本的水平居中，初始考虑了两端左右浮动的布局方式，“登录”文本使用text-align完成。可以完成要求效果，但不符合扩展的要求“去掉header的三块文字的任意一两个，剩下的一两个都还在原位置上不会受到影响。”

       因此转而选择两端左右元素绝对定位的布局方式。

3. 表单

    表单的图标最终采用background解决，运用昨天学习的简写方式完成。输入内容位置由padding值调整。

    表单的提示内容用placeholder属性，因项目效果里placeholder值的色彩问题，百度后找到改变文字颜色方法。

4.  表单和button的点击效果

Input和button默认有个点击效果，添加outline:none后可取消。

明天计划的事情：

    根据任务五完成较复杂的自适应布局，局部过程多尝试不同布局方式，包括尝试过的float、position，还没有研究过的flex布局等。

另外百度发现完成垂直居中的方式除了用过的还有table-cell、after伪元素等等。如果除了做任务五还有时间再研究一下。

遇到的问题：

Input在使用padding后，宽度设为100%，会有一个宽度不正确的状态，减去padding值之后正常显示。或者设置父元素overflow: hidden;后显示正常。

收获：

对自适应页面有了进一步了解，能够完成搭建简单页面。经过各种不同方式的试用（试错）过程，最终成功，也会有很大成就感。