完成了任务三需要的4个切图

设置了 body 元素的margin---外边距和background-----背景颜色

        body {

            margin: 0;  

            background: #68CDD5; 

        }

用类元素定义了页面上图片的width--宽度、 height--高度、 position:absolute ---绝对定位属性。

          .arrowhead {

            width: 54px;         

            height: 54px;        

            position: absolute;  

            top: 18px;           

            left： 18PX;         

        }

 设置图片的时候，学会了在绝对定位距离顶部的位置114像素的同时，使用左右外边距属性设置元素块的水平居中.

明天计划的事情：

  调试任务3的代码，使之自适应功能实现，上传到服务器，并可以实现访问。查看—relative, absolute, fixed的资料，学习input——创造最新式表单.

遇到的问题：

  第一次使用绝对定位实现display: inline元素距离父元素顶部114px的时候，

position： absolute;

top:144px;

text-align: center; 

排列居中属性无效，无法实现居中效果，后面学会了使用绝对定位的方法来实现居中：

position: absolute;

            top: 114px;

            left: 50%;

            margin-left: -90.5px;

position: absolute绝对定位命令下，top属性定位距离顶部的距离 left属性定位距离左侧的距离.

在确定元素宽度的情况下，设置left：50%；距离左侧50%的距离，设置margin-left：-90.5px;(margin-top的值为自身宽度的值的一半的负值。 

收获：

今天学到了几种在绝对定位下实现垂直居中的效果，

display:flex; align-items: center;  justify-content: center;

  定位：固定；让元素水平居中；让元素垂直居中。  css3伸缩布局可以实现元素水平垂直居中.

position: absolute; top:...; right: ...; bottom: ...; left: ...;

  绝对定位让浏览器计算子元素的宽高并让其水平垂直居中

position: absolute; top: 50%; margin-top: ... 

绝对定位；上50%,外边框-值，margin-top的值为自身高度的值的一半的负值。