今天完成的事情：

1、用position的absolute完成了header头部的编码。

今天开始任务的代码编写，还是第一步完成header头部的内容，头部左边有一个箭头的标志，在查资料的时候有两种方法。

一种通过ps切图把箭头单独切出来。

第二种是通过用css样式来写。

我查资料重点选择的是用css来写。单独建一个div盒子用class来写，我这里用的是以边框border为主体设置的，通过设置border-buttom底部和left左边的px值，然后再设置div盒子的width和height的px值，来做出这个箭头的基本样子，效果如下：

这个是网页上调试显示的效果，通过设置盒子边框的大小和宽高来写出来，因为我只写了border的底部bottom和左边left，所以就能呈现出类似箭头的样子，但是怎么才能把这个border转换方向呢，这里就有一个新的知识点新的css属性。

transform属性定义为应用于元素之间的转换。这个属性允许元素旋转，移动，缩放和倾斜。这里运用的值是rotate（angle）旋转角度，应用这个属性你可以把如上图的箭头旋转成像右，代码的写法：transform：rotate（45deg），网页效果如下：

旋转了45度，样子写出来了，然后要做成和示例上一样，这里需要margin属性让箭头产生边距，完整代码如下：

这里我运用的position中的绝对定位absolute使箭头向父级元素header为基准，只允许让div在这个父级元素附近绝对定位。所以我在header头部标签里设置了relative相对定位，能让子元素以父级元素为标准且不会影响到其他的元素，能在网页上达到我的效果。效果如：

       第二步就要让<span>中的文字达到垂直居中的效果，在拉动屏幕像素值的时候能居中不受影响。

这次我用了绝对定位，所以打算用绝对定位来实现这个效果，因为<span>是行内元素，我给<span>里设置里position：absolute属性，span元素就变成了块级元素，可以设置宽高，但是位置不会发生改变，所以要让文字居中可以设置left，right，但是一个元素只设置left和right，元素会一直在设置的父级元素内左右移动，不会脱离正常的文档流，只是左右移动。设置top和bottom，也只是在正常文档流中上下移动，还是以父级元素为基准。

       后面我在浏览器中调试给<span>设置left：0，right：0，margin：atuo，top：12px值得时候，发现是可以让文字实现垂直居中的效果。

代码如下：

网页呈现的效果如下：

明天的计划：

争取明天完成任务五，并完成在浏览器中的调试。

问题：

虽然在调试中做出来效果，但是不能理解为什么设置left、right为0，margin为atuo这样的值就能让元素垂直居中，这些值是什么来的呢

收获：

1、今天学习运用了绝对定位的方法来解决文字居中。

2、了解到了用position的绝对定位absolute是通过把元素变成容器设置左右上下的值达到效果，而text-align：center的方法是让文字达到居中的效果。

3、学习了用position中的relative来决定父级元素，然后给子元素设置asbolute，就会以父级元素为基准，不会影响到其他属性，但是如果不给父级元素设置relative属性的话，absolute就会以html根目录为基准，例如上面的箭头这个div，如果不给header头部设置相对定位，后面你要添加其他属性，这个箭头就会和html根目录对齐。