【今天完成的事】

1. 刚刚提交了任务八，趁热打铁，简单的总结一下：

（1）三个页面的header（即客服热线和导航栏）与footer部分都是一样的，为了缩减代码，将这些部分的CSS代码单独抽离出来成为一个公用的CSS文件。

（2）在响应式的导航栏部分花了挺长时间，这里我用的是boostrap的导航组件。boostrap是个利器，尤其是布局方面，有很多顺手的工具，但是对于新手来说，这东西有点像是黑箱，往里面扔个栗子，不知道会输出什么玩意儿。一开始改导航栏样式改的心烦气躁，后来干脆就借助f12，查看每个预定义class的属性，然后一个一个的修改尝试，拆开之后发现都是熟悉的套路。手动渣了个示意图：

知道大概思路之后，用纯CSS借助媒体查询也可以写出可折叠的导航栏：

效果图：

3. 轮播图

依旧使用的是boostrap的carousel插件，用了几次，挺顺手的。本来想研究一下，奈何对jQuery比较呵呵，放弃。这里有一个坑，如果一个页面中用了一次以上的carousel插件，必须要改Id。

4. 首页main的总结：

（1）如何学习部分有两种实现方式：flex和position，但是这两种方法都有一个前提，父元素必须定高。否则当文字的高度超过左侧的圆形编码的高度时，不仅会推动下面的内容，右侧垂直居中的箭头图标回个其他图标不在一行；

（2）优秀学员展示部分：carousel插件使用熟练度+1；

（3）友情链接部分同样有两种实现方式：flex（万能？），用boostrap自定义10列的样式（推荐）；

5. 职业列表页面的重点是职位介绍小版块，有两种实现方式+1：普通版（padding+position）和grid布局，推荐前者，简单易成，兼容性好，后者兼容性太感人，用手机查看时有点小小的问题。

grid布局和flex布局有点相似，但它与flexbox的一维布局系统不同，grid布局是一个二维的基于网格的布局系统，这也就意味着它可以同时处理行和列。

基本概念

(1). 网格容器。

   要使用grid，就必须使用display: grid将容器定义成一个grid布局，此容器将是所有网格项（Grid Items）的直接父级元素。在如下代码中，元素container就是网格容器（Grid Container）。

   ``` html

   <div class="container">

   <div class="item item-1"></div>

   <div class="item item-2"></div>

   <div class="item item-3"></div>

   </div>

   ```

(2). 网各项（Grid Items）

   网格容器的直接子元素。

(3). 网格线（Grid Line）

   构成网格结构的分界线，既可以是水平的（行网格线）又可以是垂直的（列网格线）。

(4). 网格轨道（Grid Track）

   两条相邻网格线之间的空间(即列或者行)；

(5). 网格单元格（Grid Cell）

   两个相邻的行和两个相邻的列网格线之间的空间，是Grid系统中的一个单元

(6). 网格区域（Grid Area）

   4条网格线包围的总空间。一个网格区域可以由任意数量的网格单元格组成。

Grid Container 的全部属性

（1）display

display: grid将元素定义为网格容器，类似于flexbox的纵display: felx;

   display的属性值有以下几种：

   grid：生成一个块级网格

   inline-grid：生成一个内联网格

   subgrid：如果你需要的网格容器本身是另一个网格的网格项（即嵌套网格），可以使用这个属性值来表示你希望它的行列大小继承自它的父级网格容器，而不是自已指定的。

`注意：在网格容器上使用column，float，clear，vertical-align无效`

(2) grid-template-columns/grid-template-rows

grid-template-columns和grid-template-rows是用来定义行和列的宽高，如果使用被空格分隔的值列表，这些值就表示网格轨道（行或列）的宽或高，同时系统会自动为网格线分配数字名称； 当然也可以使用者自行指定网格线名称。

(3)grid-template-areas

grid-template-areas所定义的重复网格区域的名称会导致内容跨越这些单元格。点号(.)代表一个空的网格单元，这个语法本身可以视作网格的可视化结构。

(4)grid-template

gr(4)d-template-rows ，grid-template-columns ，grid-template-areas 缩写 (shorthand) 属性。

(5)grid-column-gap/grid-row-gap/grid-gap

指定网格线的大小（即行或列之间的宽度），只会在行或列之间创建宽度，网格外部边缘不会有这个宽度。

   grid-gap是grid-column-gap 和 grid-row-gap 的缩写语法。

(6)justify-items/align-items

看着熟悉的属性名，用过flex的都知道，grid里面也大同小异。它是网格项内容的对齐方式，沿着轴线( axis) 对齐网格项(grid items) 内的内容。该值适用于容器内的所有网格项。

(7)justify-content/align-content

和上面差不多，但这个是网格项的对齐方式。有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，在这种情况下，您可以设置网格容器内的网格的对齐方式。

Grid Items 的全部属性： 

详情略，会flex的一看就应该知道下面的属性是个什么状况了；

grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-column

grid-row

grid-area

justify-self

align-self

【明天计划的事】

继续写任务

【遇到的问题】

暂无

【收获】

如上。