今天完成的事情：

1、第二个页面完善了一下，布局基本上正常了（音频还没放上去，滚动条的样式还没做，并且第四排的三个盒子不知道为什么滚动条拖不下去所以显示不出来）

明日计划：

1、完成第二个页面：

2、开始第三个页面

遇到的困难：

1、一开始“水民”盒子的高度总是不够，后来发现因为border-sizing是border-box,所以height把border也算进去了，后来把border的高度也加进去了（当然了改box-sizing也行）

2、hover后“水民”盒子下面的四个图片之间老是有间距，发现是display:inline-block的问题，但那个间距总是去不掉，尝试用了一些方法都不行，包括把标签之间的间距去掉，把font-size改成0这两种方法，最后用改用浮动让四个li(四个图片)并排，问题才得到解决，但display:inline-block的间距问题明天要自己写个小demo测试一下。

3、那个向下的小三角形自己是用border做的，但是border-top总是显示不出来，调试代码时这一行代码被划掉了，不知道为什么

收获：1、width的百分比是根据父级的content算的，不包含padding和border

2、相邻设置了display：inline-block的div之间会有间距（左右上下相邻都会有），解决办法明天试验后再总结下吧

3、display：none;不会保留原来位置，后来换成了visibility：hidden/visible可以保留原来位置