今天完成的事情：

1、task8第一个页面写完并且改好。

2、task8第二个页面也已经写了一部分。
明天计划的事情：

1、task8剩下的页面写好。 
遇到的问题：

1、 关于bootstrap的栅格系统我们知道在container容器的包裹下有行（row）,行里面有列（column）,但是bootstrap框架中的网格系统就默认是将容器平分成12份。

那么在对于像task8第一个页面有的行中只有5列或者10列，这下遇到这个问题应该怎么办呢，列中的大小只能是整数，不可以出现小数？首先栅格系统对其中的列好像没有两端对齐，我查了下可以对列在重新定义其宽度，假如是5列，.col-md-3{width:20%;}，如果仅仅是在pc端这样写应该问题解决了，可是我们再做相应式设计的时候，在你缩小屏幕的这个col-md-3的宽度一直在为屏幕宽度的20%；那么里面的内容多受挤压，宽度不够就折行继续排列，这个问题怎么解决呢？ 我仔细查了下，在我们对栅格进行定义的时候我们尽量用2-3中形式的列。.col-md- .col-sm- -col-lg- 接下来我们就用@media 把.col-md-3{width:20%;}放入到@media  screey and(min-width:992px){

}中，此时在屏幕宽度大于992px后每行5列，宽度为屏幕的20%；当小于992px时，则按.col-sm-排序，再定义相应的样式就好。

下面为bootstrap中栅格分类的定义：

.col-xs-*超小屏幕 手机 (<768px),

.col-sm-*小屏幕 平板 (≥768px),

.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).

收获：

1、关于媒体查询@media：

定义：使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

          @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

          当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：‍‍@media mediatype and|not|only (media feature) {
        CSS-Code;
       }

‍‍mediatype：设备类型有，all——用于所有设备，print——用于打印机和打印预览，screen（最常用的媒体类型）——用于电脑屏幕，平板电脑，智能手机等。

‍‍speech——用于屏幕阅读器等发生设备。‍‍

‍‍and|not|only：‍‍

‍‍and操作符：用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真；‍‍[注意]：在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。如下：

满足横屏以及最小宽度为700px的条件应用样式表。

@media (min-width: 700px) and (orientation: landscape) { ... }

@media all and (min-width: 700px) and (orientation: landscape) { ... }

第一种是不使用and和媒体类型,第二种使用and且媒体类型为all。

or：

将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符

　满足最小宽度为700像素或是横屏的手持设备应用样式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not：

not操作符用来对一条媒体查询的结果进行取反

[注意]not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

@media not all and (monochrome) { ... }
//等价于
@media not (all and (monochrome)) { ... }

only：

　only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

　[注意]经测试，无论是否使用only操作符都对结果无影响

<style media="only screen and (max-width:1000px)">.box{width: 100px;height: 100px;background-color: pink;}</style><div class="box"></div>

实际上，only、not、and和or(用逗号表示)这四种逻辑中，只有and比较常用。

‍‍media feature：这个值比较多，就不一一列举了，举几个常见到例子就好，

多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于“、

媒体查询的功能比较多其中有：

添加断点：

在我们使用行和列来制作网页，它是响应式的，但在小屏幕上并不能友好的展示。

媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点，不同的断点有不同的效果。根据不同的media feature，写出相应的样式，例如根据屏幕的宽度device-width，设置不同的断点，来迎合我们的响应式网页。

ps：昨天晚上断网了，日报今天早上补上把。