‍‍今天完成的事情：

完成了任务8、9。对bootstrap框架有了更深入的认识。

bootstrap的栅格系统非常好用，对于懒得写媒体查询的人十分方便，但是也存在几个短板。

比如:

1、一列的宽度只能是1/12，因此当需要将行宽度平均分成4份以上时就不具有可操作性了，还是得回归到原始的方法并使用，媒体查询的方法解决，自适应布局。因此做首页下方公司logo展示时，在container容器内价格row以后就直接开始用原始的方法width：20%，保证每一个logo框大小一致。再使用媒体查询，使屏幕缩小后的logo竖直排列

2、栅格结构自带padding，但有时候我们并不需要这个padding，就需要额外写一个专门用来去掉padding的类。

3、栅格结构内自带float，所以在col-*内要做垂直布局只能再次引入row，此时又会有padding，margin的问题，这是需要绝对注意的。

4、栅格结构的container容器外部有margin，但task8头部导航栏需要占满全屏宽度，因此并不适合在container内制作header的背景，我的解决方法是，在container外先制作出背景色，再使用栅格系统制作内部logo和nav并使用绝对定位保证两者的相对位置。并且当屏幕宽度缩小时，头部导航栏变成下拉菜单。下拉菜单也需要写在container外部使用绝对定位下拉菜单的按钮使之移动到所希望的位置

bootstrap内比较好用的类有text-center，几乎是水平居中必备。但子元素display需要设为inline-block。

轮播图直接使用了插件，js还没有学，其原理也不甚清除，作为日后学习js时首要需要弄清除的东西。

nav我没有使用插件，而是选择手写，最开始其实是想用插件的，但是样式改的头大，索性放弃了直接自己上手写了。下拉菜单不算复杂，但是按钮和下拉菜单的内容要同属于一个父元素，并且hover的时候，用.父元素类名：hover .下拉菜单内容类名{display：block}一般就能解决问题了。

在做职业介绍那一页时，row的运用特别多，那个表格几乎每一行都用了row，再在row内使用col定位。也可以直接用媒体查询写，但代码量就会比较多

除了bootstrap，box-shadow rgba z-index是最近刚学的属性名。

box-shadow( x偏移量 y偏移量 模糊量 内阴影/外阴影 颜色)

本任务中x，y偏移量都为0，模糊量设2px-3px就差不多，默认外部阴影，没什么好说的，记住就ok了

rgba，（xxx，xxx，xxx，x）最后一位是透明度，opacity也可以设，但是使用rgba不会导致子元素也透明。

z-index调整显示层数，这个需要格外注意的是，对象的position不能是默认值！！！只能是relative、absoulate等对象才会有用，这一点在做首页五个公司的外阴影右部被遮挡时需要格外注意。并不是box-shadow的锅也不是z-index的，是position的！！！

明天计划的事情：

对于垂直居中的认识还不够深刻，虽然知道比较多的垂直居中属性了，但并不十分清楚他们各自的特点，大多数情况下都是靠试，看哪一个管用，要是都不管用那就用绝对定位，这个习惯不是很好。所以明天首要需要解决这个问题

除此之外，任务10需要完成切图和基本布局以及了解表单的使用。

遇到的问题：

‍‍切图的时候有一些并不需要的装饰没有去掉，因为找起来实在太麻烦了，后来我发现用树形图的方法查找是最快的，先把组的显示一个个关下去，如果关掉某一个组时，目标消失了，那么目标就一定在这个组里，再从这个组里一个个往下找，找到目标将其删除再进行切图，就能切出没有无关项干扰的图了

雪碧图制作，用ps制作雪碧图比较费力费时间，我找了一个在线制作雪碧图的网站，只需要上传需要制作雪碧图的图片，就能直接生成雪碧图https://www.toptal.com/developers/css/sprite-generator

还有一个比较难受的问题就是类的命名，有一些类不好描述，直译成英文时又可能单词长度太长不适合做类名，只有一些常规的，header main footer navbar logo等能比较舒服的使用。这个问题目前还没有比较好的解决方法，查看其他网页的源码，在类的命名上似乎也有点魔幻，我甚至不懂有一些类名有什么意义。

收获：‍‍

代码能力提高了一个水准，之前一天只能敲两三百行，现在一天一千行不是梦，在布局上更加成熟，对于css和html的特性理解更加深刻，标签运用上更加熟练。能快速反应问题所在并找到最合适的处理方法，对于bug的修改更加有针对性。