七月8日

今天完成了任务一九宫格，当这个任务开启的时候，查了很多资料，翻了很多教程，打开编辑器的时候却完全不知道要怎么下手，最后是跟着师兄的思路成功的弄出了九个小格子，

开始我的想法是找个框把这个九个小格子套在一起，把小格子大小设成30%这样就挤不下第四个格子了。

但是万万没有想到，会遇到九宫格缩小到一定的格局就不在成型，思来想去都找不到解决的方法，换了很多种思路都不能完美的解决这个问题。最后再师兄的指导下发现我在不经意间设置了一个为1XP的外间距，当缩小到一定的比例的时候1XP也是一个比较大的数值。所以一开始设置的九宫格百分之三十会显得有些大，在边框单位为固定值时候容纳不下三个小格子，最后删除这个代码，完成这个任务

这教会了我在需要自适应的时候XP固定值会造成很大的阻碍。并成功开启任务三。

这大概是我理解中最简洁的九宫格CSS代码了。

结论：代码是越简洁越好，不仅是自己敲打还是别人翻阅都省事。

明天计划攻略任务三最大的难点，如何让文字和图片一起移动，目前的思路是图片设置一个格子，文字设置一个格子，最后再这只一个大DIV圈在一起，做到一起移动。

今天收获的非常多，可以说是正式开启了CSS生涯，在基础不是很牢固的时候，代码是真的记不住，不妨准备一个笔记本，把需要用到的，经常见到的代码都记下来，背下来，遇到的问题，难题，灵光一闪的思路都记下来，这样对以后的CSS生涯非常有帮助，在思路方面有些时候钻牛角尖真的很恐怖。不妨试着换一个解决方式。