任务总结：我是分三部分完成的，因为在任务五中运用到了绝对定位和相对定位的知识点不是很熟悉，所以耽误了很多时间。第一天做的header头部，第二天做的背景图，第三天做的ui无序列表和底部footer页脚的制作，最后一天在移动端上调试问题和调整一些小细节。每个部分都遇到了一些问题。

header头部的制作

在做头部的时候在返回键那里查资料弄了很久，勉勉强强写出来，当时在运用相对定位和绝对定位有点懵，也不是很理解为什么要这样用。但是在后面做的时候能看到写出来会有怎样的效果稍稍有点理解，我是在header里设宽高和背景颜色，然后返回键是用div包裹写border边框效果的，这里也运用了盒子模型中的外边距margin和一个新的属性transform：rotate通过这个改变方向达到我要的角度效果。然后个人主页是通过absolute定位来做的，通过调整top值来达到居中的效果，但是后面师兄审核任务的时候发现并没有垂直居中，后面用的是师兄说的calc（）这个函数计算值达到了居中，就是这个值要计算出来。

background-image的制作

去了解了background的几个属性值：size、image（url插入图片链接）、no-repeat（让背景图不重复显示）背景图做好后，在背景上要覆盖肖像图和文字的时候还不知道怎么去写，把肖像图也写成了url背景的样式，后来发现不对，其实就用到任务三中img（src）插入图片路径就行了，用的是div里嵌套div让每个样式都分开写css，这样方便在自己写代码中看出写的代码能起到什么作用，缺点就是类名多自己看着有点晕。也是在给父级设相对定位后，给子级设绝对定位的位置折腾了很久，在这里算是清楚相对定位一般都是给父级设置，然后在这个范围内给子级设绝对定位让其脱离文档流通过设置宽高值来达到想要的定位。还有那个背景图的覆盖原来可以通过ps切图两个图一起切出来。

下半部分ul无序列表和新标签li的使用

当时写的时候是打算用<li>标签来包<span>写列表，但是发现不知道怎么设下面的那个border底部边框的效果，然后就还是用div盒子的嵌套，真的是嵌套到底，笑cry。然后每一个li标签都套上div，用div来写border-bottom的效果，这里写的还蛮顺利的，然后通过padding值和margin值还有绝对定位来写，就是在最后个人介绍哪里卡了一个小时 ，介绍的文字比较多不知道怎么居中，就是同一列两者不能都居中，要么就是 有一个会对不齐，后来自己在调试的过程中用margin-top值把上面填充后把文字给挤下来效果看上去才解决。我当时还设了width，导致我的网页在320px值下边距超宽显示出白色间距，找问题找了半天，还是经过师兄的提醒才发现是我为了让个人介绍的文字有足够的空间不会排版很拥挤加的width，我是用<span>定义inline-block属性加了过多的width的百分比，后来减少width，才解决了这个问题。

footer页脚固定

最后这个也还好不是很难，通过button按钮属性给其设置border：1px solid值就可以了，再加上用boeder-radius这个来样边框的圆角看上去有弧度，还有通过给footer设置text-align：center的属性，让子级能达到垂直居中的效果，最后一点就是要让页脚固定在底部，这里就用了position：fiexd固定定位来达到效果，注意：这里要给其设置bottom：0不然你会在网页上看不到你的footer。

header头部的固定设置是一样的用fiexd，但是涉及到z-index这个属性，大概了解了下基本的。