今天完成的：

        完成了任务6，不过因为没看到要求要用bootstrap....

        解决了昨天遇见的几个问题；初步了解了一下bootstrap；了解了几种用CSS模拟下拉框的方法。

        关于列表主体flex布局无法两端对齐：经过查找原因，发现在 li 里多了一个after空元素，导致占掉了一个位置，两端对齐就会让第二个元素居中。

        关于文字打断出现省略号：需要文字到达包含文字的盒子的边界之后，才会多余部分隐藏显示省略号；其中关键问题就是为文本找到合适的边界。

（在完成这部分内容的时候，一个被我忽略的问题被师兄提及，就是你的好几个元素宽度设为100%也会强行在一行展示，所以可以通过百分比来调整边界，做到自适应。）

        做列表头下拉框的时候，取消了表头的flex布局，完成了下拉框的制作。

        关于bootstrap：了解了一部分bootstrap包含的样式，浏览了一遍代码。

        用CSS实现下拉框的方法：

一、display：none； --> display：block；

    缺点：下拉菜单会在处于文档流内，影响布局；可通过定位来脱离文档流。

二、overflow：hidden； --> overflow：visible；

    缺点：下拉菜单下层的文字会透出来，且鼠标碰到文字下拉菜单会缩回去；可通过定位解决，也可以给下层文字设置相对定位和 z-index：-1 来解决。

三、opacity：0； --> opacity：1；

    缺点：跟上一个一样。

四、给下拉菜单的ul设置绝对定位，left：-999px，移动到屏幕外；hover的时候 left：0 回到原来位置。

    这个跟display的原理类似。

    下面这种方法支持动画，用户体验比较好

五、height：0； --> height：150px；（在ul上加 transition：all 1s ease; 在hover的时候就会在一秒钟时间内height从0到150。）

    缺点：跟第二个方法一样。

参考：https://www.cnblogs.com/yewenxiang/p/6064117.html

明天计划的：

        学习Bootstrap，回顾前几个任务，及深度思考的东西。用Bootstrap实现下任务6。

遇到的问题：

        在进行文字打断的时候，文字过长会破坏布局，限制死宽度会不能自适应；解决办法就是通过用百分比来控制显示的宽度，在窄到一定程度会出现省略号，且不会对布局有影响，拉宽的时候能展示完整信息。

        列表头布局问题，一开始使用的flex布局来控制表头的3个 li 标签；之后加入下拉菜单的时候会跟整个 li 结构垂直居中对齐，影响布局，改为了float加position进行布局。

        未使用bootstrap完成任务。

今日收获：

        加深了对HTML结构的了解，以及对CSS样式的理解。

        了解了下拉列表的多种实现方法。

        了解了部分Bootstrap样式。