今日完成的事情：

       1.flex布局：首先是对header的布局；因为导航栏不会变化所以用fixed进行最上方固定定位。然后用flex对容器进行布局， 用转义符代替“<”图片，利用justify-content: space-between;/*X轴对齐方式-两端对齐，项目之间的间隔都相等*/      所以多做了一个div 。 align-items: center直接让“个人主页”在中间则不需写“home”的样式。背景图片：1.主要是利用  ustify-content: flex-start（从起点开始）；2.  align-items: center   弹性盒子元素在该行的侧轴（纵轴）上居中放置 ，  让背景里的元素全部居中。

这里忽略了flex的特性： 整个背景框是个容器。 姓名、地址则成了“项目”那么所有在背景框的“项目”都执行（从起点开始）（与主轴居中）。为了不让“姓名”“地址”执行背景的命令，最后想到了重新找一个容器定义它们，让他们执行（从头开始）因为没有（与主轴居中）所以它们就在左边对齐了。

main部分：

1.设置完大小高度样式后加border-right: 1px solid #A9A9A9;就能打出蓝色的框边样式不必插入图片。

2.住家则需要插入图片然后定义类了。

3.直接内链style=color:red写出红色字体。

main部分布局较少，就是内容多点。

foot部分：和header差不多现在foot写好宽度、高度、距离。然后写两个div直接写个颜色就可以了。

明天计划的事情：

          继续任务5

遇到的问题：

      1.align-items: center导致背景栏全部居中，又因为flex-start让姓名和地址不能成两行 ，

这里头疼了半天尝试了使用position：absolute和position:fixed。好不容易定位好了，在上下移动的时候它们都不随着页面的移动而移动，但横向的可以。我认为横向是一个放大与缩小的过程没有发生位置变化所以不会变化。

收获：

   1.flex的应用。弹性布局感觉比较适合各种适中的banner页面而且不容易变形，能够很好的定位。

   2.position则更适合首部导航栏底部导航这类的不会移动，或者说就是固定的页面。有很好的布局效果。