今天完成的事情：

1.继续css任务12

2.用sass来优化css写法，优化代码

3.学习JavaScript

明天计划的事情：

1.完成css任务12

2.开始css任务十三

2.继续学习JavaScript

3.CSS基础知识查漏补缺

遇到的问题：

1.纯css实现下拉框效果

    纯粹用CSS实现的下拉菜单主要有两种思路：一种是通过visibility属性的切换，另一种是基于display属性的切换。二者在大体的结构上是一致的，只是对于二级子菜单的隐藏和显示的实现策略上有所不同。

    共同点在于：

           1）必须将最外层的ul元素的padding属性设为0，以保证整个下拉菜单中的没有无序列表中的自动缩进。同时，将list-style-type设为none，以去除列表项前的标记。

           2） 如果主菜单需要横向，则需要把li元素设置为浮动元素，即float: left。

            3）使二级子菜单呈一列的方法是将二级列表的ul元素和li元素设置为相同的宽度。

           4）必须把二级列表的ul元素的position属性为absolute，以保证将该元素及其子元素从文件流中去除，这样一来当二级菜单显示的时候不会影响下面的其它元素。

           5）下拉菜单后面的页面元素，需要把clear属性设置为left或者both。这是因为下拉菜单被设为了浮动元素，如果不这样做的话后面的页面元素的位置将会不恰当。

           6）需要通过伪类:link、:visited以及:hover来设置元素有焦点和没有焦点时的颜色状态等。

    不同点如前所述，即是：当一级菜单项没有焦点的时候，方法一会把二级菜单的ul元素的visibility属性设为hidden，使整个二级菜单不可见；当有焦点的时候，需要把相应的二级菜单的visibility属性改为visible，使其可见。而方法二则将需要不可见的二级菜单ul元素的display元素设为none，当需要可见的时候改为block。

    上述状态的切换均通过伪类来完成而不调用JavaScript。

收获：

1.~选择器和+选择器的差别：

   ~选择器是选中某个标签后面的所有此类，同级的标签。

   例：下面在一个p下面选择了span   p ~span{ color：red}，所有的span都变成了红色

        +选择器是选中某个标签后面的一个此类标签元素

        例：下面我在一个p下面选择了span   p +span{ color：red}，后面第一个span变成了红色