今天完成的事情：

    任务七三个页面基本布局好 

明天计划的事情：任务七其细节完善好  任务八开始  总结一下最两周学到的布局方式

遇到的问题：

   1.点击图片播放音频的JS或JQUARY方法自己搜索了以后在页面上测试，但是并不成功。还不知道原因。自己用HTML标签覆盖点击图标，将audio设置为

透明的，但是需要计算左右水平偏移。

   2.不太理解验收标准里面的一条要求。任务七——“版本选择页面注意右边的小三角是相对于整个白框存在，因为游戏版本可能还有更多可以翻到下一页，但小三角的位置不会改动。”

收获：

 1.学会用css了绘制三角形 

  .triangle-up {  /*选择器名*/

    width: 0;  

    height: 0;  

    border-left: 50px solid transparent;  

    border-right: 50px solid transparent;  

    border-bottom: 70px solid #00C3FF;  

    /* w=50+50,h=70 */  

}  同理  朝下的三角形绘制的是 border-left  border-right  border-top  

朝左的三角形绘制的是 border-bottom  border-right  border-top  朝右边的三角形绘制的是 border-left  border-bottom  border-top  

 2.了解使用 ：hover 伪类选择器  

  :hover 选择器用于选择鼠标指针浮动在上面的元素。

  :hover 选择器可用于所有元素，不只是链接。

  :link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

  在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

   :hover伪类可以任何伪元素上使用。

   用户的可视客户端比如Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标（鼠标指针）悬停在元素上时提供关联的样式。

   在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同。 可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。 触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

 3.透明设置

  opacity和RGBA都可以设置透明度。

   但是opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明，而rgba子元素不会随父元素的背景透明而透明。