今天完成的事情：

1、修改任务7中的一些小问题。比如链接下划线，去除切图中的背景色，

2、完成了任务8页面1的70%左右。整体上采用bootstrap框架的栅格系统来进行。

3、对bootstrap轮播的默认样式进行了修改使得和设计图相同。

• 明天计划的事情：

• 1、完成任务8的页面1。

• 2、学习bootstrap的其他插件及组件。

• 
  

• 遇到的问题：
  

• 1、开始span元素无法垂直居中，因为父元素高度不定，所以最终使用绝对定位及transform来实现垂直居中。（具体已写在收货中）。

• 2.由于使用bootstrap栅格系统导致相同的class名过多，在设置css样式的时候导致相冲突，最终查看了css的权重相关，进行相应的选择，使得能得到正确的样式。

• 
  

• 收获：
  

• 1、可以在栅格系统中的列元素同时设置.xs.sm.md.lg来实现响应式。

• 2、对于span元素有些属性需要利用（display：block）将其转换为块级元素之后才能起作用。

• 3、学会了bootstrap的栅格系统中container和container-fluid的区别，container容器除了会有一个固定的padding外，还会有一个随视口变化的margin。而container-fluid不会有这个margin。

  container 类用于固定宽度并支持响应式布局的容器。container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

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

• • 4、学会了对高度不定的span元素设置垂直居中。

  • position: absolute;top:50%;transform: translatey(-50%);

    对其父元素进行相对定位，对其进行绝对定位，离顶部50%，再让其相对于自身在y轴方向平移-50%，得到垂直居中。由于bootstrap已经对class="carousel slide"设置了相对定位，所以无需在本地css中再次说明。

  • 5、对于字体使用vw单位使得随着窗口大小变化。

  • 6、‍‍权重等级

    每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。

    （行内样式，指的是html文档中定义的style）

    行内样式包含在你的html中 对你的元素产生直接作用，比如:

    <h1 style="color: #fff;">header</h1>

    （ID选择器）

    Id也是元素的一种标识，比如#div

    （类，属性选择器和伪类选择器）

    这一类包括各种class，属性选择器，伪类选择器比如 :hover,:focus等等。

    （元素和伪元素）

    元素跟伪元素选择器，比如:before 与 :after.‍‍

    权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.最终得到的值越大，权重越高，优先级也越高。

  更多权重的相关知识点可参阅http://www.w3cplus.com/css/css-specificity-things-you-should-know.html