今天完成的事情：

1.把任务8的主页页面完成，

2.把任务8的职业推荐页面完成，对于栅格系统理解更深了，运用的更加熟练了。

3.对于hover和设置边框阴影有了了解并应用。

4.任务8和任务9基本完成，提交任务，师兄指出还有些小问题，明日再完善。

明天计划的事情：

1.修改任务8和9的一些小问题，完善页面。

2.开始任务10。表单知识之前有所了解，但很浅层次，明天开始着手练习。

遇到的问题：

见下面任务总结

收获：

1.对于做响应式布局有了一定的经验，但很多东西运用起来还不够熟练，需要再巩固提高。

任务总结

‍

‍‍‍‍进度：已完成任务1-9‍‍

‍‍任务总结：‍‍

‍‍    任务名称：CssTask8 And CssTask9‍‍

‍‍    成果链接：https://rumunanfeng.github.io/jnshu/task8/task8.html‍‍

‍‍    任务耗时：2018.4.27-2018.4.29‍‍

‍‍    技能脑图：‍‍

‍‍        官方脑图：‍‍‍‍

        个人脑图：

任务总结：

1.任务进度

任务进度完成的还是比较快的，多亏各位师兄的指点。但是可能完成的较快有时候东西没更加熟悉，知识沉淀的不够深，所以明天修改页面再重温下知识。

2.脑图对比

    任务需要了解的知识基本上都进行过了解应用，对于轮播图动画，只是引用了网上的插件，没有做深入了解。

    任务8是一个设计的非常好的任务，让我练习到了很多不同的布局。很多时候一种布局的方法有很多，这时候还需要考虑下如何布局最优。但是我现在还不能很好的判断出来哪种布局最优，还需要更多学习。需要更深入理解很多东西的含义。

    html页面是一个整体，可能有时候牵一发而动全身，所以写CSS需要有一种大局观，一步一步稳扎稳打，才能做的问题尽量少。

我现在做出来总是还容易出现很多小问题。原因就是有时候顾此失彼，还需要多勤加练习。

3.任务遇到的问题

1.因为col不能设置margin，设置margin之后就会被挤下去了，只能设置padding，而在正文页的左右两个部分是有间距且有边框半径的，所以不能通过设置col的边框半径来实现。

这时候我想到一个办法，通过在左右两个col下再设置一个div，就可以通过设置这个div的边框，来实现圆角以及左右两部分的间距，以及适应移动端时，保证上下两个页面的白框是一样宽。

2.

发现英文单词连着不空格，就不会自动换行

如下图

然后百度了一下解决办法，需要在css里设置

这样的话，长单词就会被强制性打断，从而实现换行。

如下图

这样就可以达到效果。