今天完成的事情：

昨天请假了，任务的进度又要延期一天，理解知识点好慢。。。

1、完成任务七第三个页面。

用的是flex弹性盒子来写的，玩了几个小游戏，对于flex中justify-content、align-items、flex-direction的几个属性值，有了一定的认识，虽然不是很理解它的定义，但是可以写出来看到效果，还有一起使用的时候会达成什么效果。所以今天的第三个页面就运用了学的几个知识点来写的，确实是比绝对定位简单。不需要用绝对定位去调margin和padding的值，很方便对代码也算是简化。

因为页面三要用到css透明化这里需要运用到css3中的属性 opacity 

我尝试了下用opacity来写，但是背景和图片都透明化了，如图：

如图：

  

2、第二个页面完成了雪碧图的制作。对雪碧图有了进一步的认识，制造成雪碧图，然后通过调坐标来让图片达到相应的位置。

师兄说雪碧图做成上图纵列的就只需要调一个轴的坐标就可以，很方便。

如图：

这里用的background插入背景图片的路径，所以就设了一个sky的类名来引入图片的链接，然后再通过雪碧图中的坐标调试成你要的位置。这里get到了一个新的用法，厉害哦，原来雪碧图还可以这么用。

明天的计划：

争取完成第二个页面的制作，然后提交任务评审。

问题：

1、在给main中插入background的图片，然后我是用div嵌套的，给div设的flex盒子，然后用justify-content：center让img居中，但是接着用<h4>标签放文字的时候，块级元素就把嵌套img的<a>标签，这里我给a设置了display-inline-block，然后<h4>块级元素就覆盖掉<a>标签的背景图片了，如图：

                        2、用div嵌套背景图片然后给div设flex，作用于图片的子级。h标签单独在一列。

2、页面2中用一个大div包裹着两个小的div，给大div设置了fiex，p标签的margin值都设为0，现在出现了下面的效果：

内容全显示在一起了，通过调padding值后就变形了，不知道怎么弄，调不好。

  我给“水民”p标签设置了padding值，把内容撑大挤出去，如图，padding超过20px就会把一号挤下去。如下图：

想知道怎么调试解决这个问题。

收获：

对于flex盒子有了新的认识，现在会用三个属性搭在一起使用。