今天完成的事情：

   任务六完善  任务七首页完成 任务七投票页完成基本布局 

明天计划的事情：

   任务七完成

遇到的问题：

   1.任务六使用container时，当大于768px时margin会随屏幕大小变化而变化，而container-fluid则不会出现这种问题。

   2.在对任务七首页进行布局时，有一个三角形的定位不能用固定宽度来定位，使用calc这个单位就很好的解决了流体布局自适应宽度问题。

   3.在进行定位时，总是用margin：x y ;x y 都是自己手动计算出来的。但是不利于后期维护和改动，要慢慢改掉这个习惯。

收获：

  1.container与container-fluid的区别

/*0-768px以上宽度container为100%*/

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

/*768-992px以上宽度container为750px*/

@media (min-width: 768px) {

  .container {

    width: 750px;

  }

}

/*992-1200px以上宽度container为970px*/

@media (min-width: 992px) {

  .container {

    width: 970px;

  }

}

/*1200px以上宽度container为1170px*/

@media (min-width: 1200px) {

  .container {

    width: 1170px;

  }

}

/*container-fluid为100%*/

.container-fluid {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

2.calc单位的使用方法

calc()给元素的border、margin、pading、font-size和width等属性设置动态值。使用表达式来得到的值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。calc()使用通用的数学运算规则：

使用“+”、“-”、“” 和 “/”四则运算；

可以使用百分比、px、em、rem等单位；

可以混合使用各种单位进行计算；

表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；

表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。