今天完成的事情：

第一天杀人出现问题，今天新增了一个数组用来存死亡人数

明天计划的事情：

争取开始第二天

收获：

1.如何使用bootstrap栅格系统？ 

1 行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

2 在行(.row)中可以添加列(.column)，最多分配12。

3 具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

4 类似 .row 和 .col-sm-4 这种预定义的类，可以用来快速创建栅格布局。

5 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔

2.媒体查询如何使用？

CSS3 Media写法，我们先来看下下面这段代码，估计很多人在响应式的网站CSS很经常看到类似下面的这段代码：

@media screen and (max-width: 768px){

body{

background: #000;

}

}

这个应该算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于768px的时候执行它下面的CSS。

然后就是当浏览器尺寸大于768px时候的代码了：
@media screen and (min-width:768px){

body{

background: #000;

}

}

我们还可以混合使用上面的用法：

@media screen and (min-width:768px) and (max-width:960px){

body{

background:yellow;

}

}

上面的这段代码的意思是当页面宽度大于768px小于960px的时候执行下面的CSS。

3.响应式的优点与缺点？

响应式的优点

1.响应式设计可以向用户提供友好的Web界面，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这也是基本的也是响应式实现的初衷。

2.响应式在开发维护和运营上，相对多个版本成本会降低很多。也无须花大量的时间在网站的维护上

3.方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

响应式的缺点

1.为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码,这导致了文件增大，影响了页面加载速度。

2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；

3.局限性，响应式不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，对设计样式不好控制，代码过多会影响运行速度。

脑图：

任务总结：完成任务九后学会了媒体查询的使用方法，bootstrap栅格系统的基本用法，深入了解了响应式的优点与缺点，比如优点有响应式设计可以向用户提供友好的Web界面，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这也是基本的也是响应式实现的初衷。响应式在开发维护和运营上，相对多个版本成本会降低很多。也无须花大量的时间在网站的维护上。方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。缺点有为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码,这导致了文件增大，影响了页面加载速度。在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度。局限性，响应式不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，对设计样式不好控制，代码过多会影响运行速度。