今天完成的任务

a.任务8第一个页面的完成（还需要一点细微的调节）

b.任务8后面的环境配置和切图

c.拓展知识

明天的计划

a.任务8第一个页面的优化

b.任务8第二个页面的制作

c.拓展知识

遇到的问题

a.在做row第三列的图片时，图片的边框的厚重感没有体现出来，改用之阴影box-shadow后达到理想效果。

b.第四列row的时候，图片虽然设置号了height，而且没有超过div的height,但是图片切没有随着顶端对齐，而是乱排序的，可以添加display: flex;

just-content: flex-start;解决。但是为什么会导致这个原因并没有找到准确的说法，和师兄们讨论了下，确实有趣 ，有时间琢磨下

c.做footer的时候，是分3个row的，第一个我做到main里去了，不过并没有什么大影响，就没改动了，第二列和第三列中间有一个小间隔是比背景色浅一点，需要隔开设置2种背景色，不过我因为懒得那么吗麻烦，用的外边框-顶部（border-top)然后改颜色来代替这个效果的。

收获

a.栅格式的container的使用：并不用每一个列都需要加上，而直用在开始设定好框架，下方列使用row或者其他都不会影响已经设定好的padding间距。

b.box-shadow

向 div 元素设置阴影。

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊距离。

spread 可选。阴影的尺寸。

color 可选。阴影的颜色。请参阅 CSS 颜色值。

inset 可选。将外部阴影 (outset) 改为内部阴影。

c.text-shadow

text-shadow 属性向文本设置阴影。

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊的距离。 测试

color 可选。阴影的颜色。参阅 CSS 颜色值。

d.ps的切图小技巧，选取图层后直接智能转化，然后导出，省去很多时间（以前用的方法真的是又蠢又麻烦)。

e.复习了垂直水平居中技巧：

总结来说只需要明白需要的重要css属性就行了

1.table(table-cell):table基本不用，时代的眼泪。

2.display:flex(目前最好用的一个方法，不过有些情况不适合）

3.display: absolute（有2给方法：一个是利用定位和负边距；一个是用定位和0的数值，不过都是要用到absolute）

4.translate(移动的方法，把它移动到垂直居中的地方去)

5.display:inline-block(先转换形态，然后可以作用于text-align:center的水平居中，然后运用vertical-align进行垂直居中，不过vertiacal-align我用的比较少，不太熟悉）

6.display:-webkit-box（没用过，不是看的太明白，贴上来，慢慢琢磨)

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。content 清除浮动，并显示在中间。

demo:

<div class="floater"></div>  

<div class="content"> Content here </div>  

.floater {

    float:left; 

    height:50%; 

    margin-bottom:-120px;

}

.content {

    clear:both; 

    height:240px; 

    position:relative;

}

优点： 适用于所有浏览器 没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点： 唯一我能想到的就是需要额外的空元素了

代码已上传，师兄看看有什么需要优化