今天完成的事情： 

基本完成任务8（9）

明天计划的事情：

处理任务8细节，优化代码，提交审核。

遇到的问题：

1，在调整第一个页面 合作企业 的时候


给一个父级div元素(class=main5-2)设置五个一毛一样的子元素(main5-21,main5-22,main5-23,main5-24,main5-25)div会这样




只能给父级元素main5-2设置成flex，这个空隙就没有了。一开始以为是基线的问题，研究了下相关资料


虽然这个资料说的很有道理，也学习了vertical-aglin：center的正确用法
难怪以前用vertical-aglin：center没效果，原来是用错了
咨询师兄之后发现我这个问题跟基线没有任何关系，最后归结于这是css代码莫名其妙的问题。就很僵硬。


2，第一个页面跟第二个页面都使用了栅格布局，然后配合媒体查询来实现响应式。
在第一个页面最开始用栅格的时候没有严格按照格式来，也就是container里面要套row，row里面在设置每一行的栅格。这样导致了一点小问题，在之前的日报提到过。后面修改bootstrap栅格样式的时候也很麻烦，各种要覆盖bootstrap库的默认样式，总之就是很麻烦。
顿悟到了栅格就是媒体查询之后第三个页面就自己设媒体查询，无非就是断点多设置几个，但是是自己写出来的东西非常熟悉，想改就改于是栅格就抛弃了。




3，修改第二个页面header插入的1920*348大图片，一开始是这样写的

由于给他设置了固定的高度，再插入背景图，这样视口变小之后图片跟着变小，但是设置的高度不会变，会导致多出来空间，研究了半天怎么实现这个的响应式，试了很多办法。比如修改background-size的属性，比如在一篇文章看到的高度设置为图片宽高比的vw。跟师兄讨论之后修改代码如下

一，1200px以上这里取了个巧，我把图片重新切了，原图片是1920的宽度，我切成了1200的宽度，所以额外设置了一个视口在1200px以下的媒体查询。这样视口在1200px以上图片本身不会变小，挤压的只是图片所在盒子的空白（背景色为一样的黄色）处，相当于一个视觉欺骗。
二，1200px以下设置的媒体查询这才是实现响应式的关键，width：100%没什么好说的，height：**vw这是宽高比，之前用过的一种方法但是没有用完整，所以之前没有达到想要的效果（但是思路没错）。
主要收获还是把background-image background-size background-position等属性整合到了background： 里面，现在是第一次使用暂时不太熟悉，这个标签的属性先后顺序有严格要求，一定要注意。


4，

.container 类和.container-fluid 类是用于支持响应式布局的容器。它们有什么区别呢？

1）.container类出现内边距和外边距，.container-fluid类没有。

（2）.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

5，给第二个页面这部分设置居中的时候

一开始打算用margin padding 设置成百分比之类的来实现居中，后来想到在视口在不同宽度下百分比不一样，无法实现目标。
当时也不知道怎么想的，给图中所示的父元素设置flex属性justify-content来实现居中。子元素1，子元素2是两个div，尝试了多种属性都不行。给图中父元素的父元素设置flex  justify-content：center能达到预期效果。此时才理解了图中子元素1子元素2要作为一个整体，给这个整体赋予居中属性，他们才能完美居中

6，提交代码到github，打开之后




                                                                                                                                                       


我什么时候才能像师兄一样强



收获：
任务8还是有难度的，响应式从刚上手到一定程度的熟练，收获满满。