今天完成的：

        初步阅读完一遍bootstrap文档，了解了bootstrap所包含的样式及各种组件插件的功能。

        做完了任务一的深度思考，又扩展了一点html的基础知识。

明天计划的：

        完成任务2~6的深度思考，加深对html&css的理解。

        利用bootstrap完成任务6！

遇到的问题：

        在阅读bootstrap文档组件部分的时候，出现了许多带data、aria等前缀的属性，不明其意，通过百度搜索大概了解了一部分属性的意思。

        在bootstrap文档中组件及插件部分出现部分JavaScript（jQuery?）代码，不太理解。

        在进行任务一的深度思考的时候，尝试用其他方法做了任务一，ul、li与div、css的原理基本相同；用table制作时，由于对table的属性不太了解，查了下属性，最后做下来还是有几个问题，格子宽度不受 td 控制，格子间距无法使用百分比自适应，整体自适应拉伸时，宽高会有1~2px的误差。

今日收获：

        今天的主要收获就是初步了解了bootstrap。

        了解了bootstrap各种样式跟原生样式的差别，及基本样式的使用方法。

        在做任务一的深度思考的时候，遇到了inline-block，就延伸着看了下inline-block的相关文章。其中有一篇讲到了inline-block的兼容写法，及其原因。（参考：https://www.520ued.com/article/5387e93e2b9517b003fc37a3）

        了解到了inline-block属性是由IE最先在IE5.5上实现的（不过跟W3C后来的inline-block不太一样），inline元素可以支持inline-block，block不支持inline-block，需要display：inline；zoom：1；转换成inline-block。所以在兼容IE6/7的时候需要：

        {display：inline-block；    *display：inline；    *zoom：1；}

还有inline-block元素之间会有空隙，是因为空白符导致的，可以通过各种方法来消除间隙，如 font-size：0 或者结构上删掉空白符（详见上方链接）。