今天完成的事情：

完成了小课堂的微信上传。

完成了task7第二页大部分代码的编码工作，尽量赶明天完成任务7。

明天计划的事情：

完成任务7.

遇到的问题：

看别的师兄的代码，单行文字直接设置line-height而不设置height就可以实现页面布局，并且实现了垂直居中的效果，很不理解，后来经过搜索、看文章搞明白了原理：

在默认状态下，如果没有其他因素的干扰，文本会被一个content area box包裹，它的大小有字体的大小决定，这个时候content area box的大小和line box是相同的，当设置line-height属性之后，会有如下处理:
1.获取半行间距：半行间距=（line-height - content area box(也就是字体的大小)）/2。
2.然后把半行间距分别放置于content area box上下两侧，这样就获取了line box的高度尺寸。于是只要设置行高就可以产生一个高度，并且使文字居中。

开始不能实现点击显示下面按钮的效果，后来经过查看其他师兄的代码，用

.vote:hover >.option-group button{}

.option-group button{}

进行了实现，第一次用，感觉很神奇，学习了。

收获：

通过晚上的小课堂，学习了RGBA与Opacity，Display与Visibility的作用与区别：

RGBA其实是一个属性值，而Opacity是一个属性。opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性；

display:none使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”；visibility:hidden使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件；visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。

学习了content的几种用法：

h2:before { content: "我是额外文字！"; }

a.content:after { content: attr(href); }

a:after { content: "(" attr(href) ")"; }等。