模块化开发

页面不改，我们还是只引用那一个样式，style.css，但是文件内容改成如下样式：

/*xxx页面入口样式文件style.css*/

@import './css/base.css';/*页面基础样式*/

@import './css/index.css';

@import './css/header.css';

@import './css/footer.css';链接：https://www.zhihu.com/question/20187618/answer/84388137

任务15不用bs，那就自己制作一个栅格布局

栅格系统的组成

如上图，是一个基本的栅格布局，它包含了：

• container: 包裹整个栅格系统的容器
• rows: 行
• columns: 列
• gutters: 各列的间的空隙

容器 (The Container)

为了给整个栅格系统设置宽度，我们需要一个容器。容器的宽度通常为100%，但你可能希望为更大的显示器设置最大宽度max-width。

.grid-container {
width : 100%;
max-width : 1200px;
}

行 (The Row)

行元素用于防止里面的列（ column ）溢出到其他的行。通常会使用clearfix来清除浮动，因为我们是通过浮动来制作栅格系统的。

/*-- 清除浮动 -- */
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}

列 (The Column)

列元素是栅格系统的核心，也是最复杂的一部分。因为列的定位可以有很多实现方式，同时还需要考虑它的宽度以及响应式设计等因素。

列的位置

Floats, inline-blocks, display-table, display-flex. 他们都可以实现栅格布局中，列的定位。我个人推荐使用“float”，如果我们的列都是空的，我们浮动的列都会贴在彼此的顶部。为了避免这种情况：

[class*='col-'] {
float: left;
min-height: 1px;
}

列的宽度

由于容器总宽度是100%，我们想要6列，所以每列宽度为：100 / 6 = 16.66

[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
}

这里我们把一行分成六列，通过简单的计算，还可以定义列的多种宽度。

.col-1{
width: 16.66%;
}
.col-2{
width: 33.33%;
}
.col-3{
width: 50%;
}
.col-4{
width: 66.664%;
}
.col-5{
width: 83.33%;
}
.col-6{
width: 100%;
}

列的间隙 (Column Gutters)

由于列的宽度单位是响应式的 % ，我们给列元素的间距是固定单位的padding（px），为了避免复杂的计算，我们规定所有的盒子模型为 border-box 类型。

/*-- 将栅格系统里的所有元素设为 border box --*/
.grid-container *{
box-sizing: border-box;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
/*-- 设置间隙 --*/
padding: 12px;
}

全局设置 border-box 很好，它可以省去一次又一次的加减，它还可以让有边框的盒子正常使用百分比宽度。但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突，不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决。

一个基本的栅格布局完成啦

响应式栅格系统

为了适配移动设备的布局，我们只需改变列的宽度。比如当屏幕宽度小于800px时，为了布局更简洁，我们使用两倍列的宽度，一行六列变为了一行三列

@media all and (max-width:800px){
.col-1{ width: 33.33%;    }
.col-2{ width: 50%;        }
.col-3{ width: 83.33%;    }
.col-4{ width: 100%;    }
.col-5{ width: 100%;    }
.col-6{ width: 100%;      }
.row .col-2:last-of-type{
width: 100%;
}
.row .col-5 ~ .col-1{
width: 100%;
}
}