今天完成的任务

完成了任务8 9

推荐页面很简单 就不多说了

主要的是一个职业页面的一行三个的卡片展示

这个东西用用table布局很方便，一下是table的一些常用数据 都很容易理解

但是遇到了一个问题

以上第一行 左右俩列等宽 设置tdwidth：50%可以很好的解决 但是会影响下面的td也固定50% 跟效果图不符合

我的做法是在td中多套一层报个 好处是效果很贴近原图 坏处是要自己单独一个个设置border

然后师兄叫我了解了下锚点  也是非常的简单 

还有就是响应式布局时 屏幕缩小到一定比列不大不小的时候可以放俩个 此时可以设置俩个boot class类

如：

这样     xl.length> 屏幕   >lg.length  12/6=2 一行放俩个 小于lg.lenght的时候 一行放一个  这样子做实用性会有很大的提升！

附上任务8 9 总结：

官网脑图：

自己脑图：

任务总结：

 关于boot框架的阑珊布局

对于网格布局为啥要多套用一层container的理解：

当col中套cow时，col本身的padding加上row中col的padding就会多了一层padding 此时就会影响到布局,boot的做法是设

row的左右margin-15px，从而拉伸row的宽度与套着col的盒子宽度相同，这样就不会影响布局了。

但在第一层row套col的时候，row的margin-15px就会破坏row的宽度，boot此时就设计出来了container设置左右padding15px

用于抵消掉row的-15px，这样row的宽度就不会受到影响了！

同时也解释了boot为啥要用ie盒子模型

关于媒体查询

很简单 相当于 if语句 前面写条件 条件成立后执行相应语句

这样导航栏的问题就很容易解决了