‍‍‍‍‍‍今日完成的任务：

1.基本完成了任务7-2的大致结构，剩下一些细节方面需要修改一下

2.把任务6中的footer部分用flex布局方法解决了垂直居中的问题

3.学习了css中的content属性

content属性与：before以及：after伪元素配合使用，来生成内容，设置文本或图像出现（浮动）在另一个元素中的什么地方。

h2:before{
      content:"我是额外文字"

}

‍‍:after伪类+content 还可以清除浮动的影响‍‍

可以实现图片的垂直居中

.pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}

.pic_box img{vertical-align:middle;}

.pic_box:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}

<div class="pic_box">

    <img data-src="image/jpg" />

</div>

明日计划完成的任务：完成任务7，学习一些框架知识，看一些开发布局案例

遇到的问题：7-2中的主要部分正方形的长宽设置成px，用媒体查询来改变大小看上去有些笨拙，但是暂时没想到更好的办法，用百分比设置的时候拉伸宽度的时候正方形会变形

收获：学会了一些常用的快捷键，加快coding速度，学会了更多的垂直居中方法