今天完成的事情：

1.做出了任务8首页的一些模块，给模块套用了栅格布局，并增加了响应式，打算任务8和任务9一起做。

明天计划的事情：

1.继续完成任务8首页，开始做任务8其他两个页面

遇到的问题：

1.昨天轮播图那里出现的问题今天解决了，是因为引用的bootstrap版本太低导致的，去cdn找了最新的bootstrap就解决了。

2.在做“优秀学员展示”的模块时，需要加另外一个轮播图，直接套用bootstrap的轮播图模板，这样一个页面就出现了两个轮播图，最后发现第二个轮播图不起效果了，百度了一下，发现一个页面用两个bootstrap的轮播图模板的话，需要修改id，这个问题的出现原因在bootstrap的Carousel：

两个轮播图中的id不能相同，修改了myCarousel后还需相应地修改#myCarousel，这样就解决了。

收获：

1.vertical-align属性的使用

所有浏览器都支持 vertical-align 属性，vertical-align 属性设置元素的垂直对齐方式，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，该属性可能的值有：

baseline 默认。元素放置在父元素的基线上。

sub 垂直对齐文本的下标。

super 垂直对齐文本的上标

top 把元素的顶端与行中最高元素的顶端对齐

text-top 把元素的顶端与父元素字体的顶端对齐

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

text-bottom 把元素的底端与父元素字体的底端对齐。

length  

% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit 规定应该从父元素继承 vertical-align 属性的值。

在实际使用中，需要实现元素垂直居中会使用到vertical-align:middle，但是vertical-align:middle直接使用是无效的，比如这样的代码就不能实现垂直居中：

vertical-align:middle属于行内垂直居中，要搭配display: inline-block一起使用，比如：

2.bootstrap中container和container-fluid的区别

container容器不止有15px的padding，还有一个会随着浏览器宽度变化而变化的margin，如图：

而container-fluid随着视口宽度的变化margin始终是零，如图：

这是因为bootstrap里对container加了媒体查询的原因。

container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。 

container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

进度：css任务8

任务开始时间：2018.6.4

预计demo时间：2018.6.8

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-719.html