今天完成的事

1.根据师兄的提示 给每个版本选择界面设为相对定位 三角形按钮设置为绝对定位 

做出以下改动

设置版本选择页面都是相对定位

设置三角按钮绝对定位

得到效果

2.调整版本选择按钮宽度

3.调整三角按钮定位并精简代码

4.缩短版本按钮的宽度至合适 使其在移动端达到较好的效果

width: 80%;

效果

5.画一个箭头向左的三角形

6.在后三个版本选择页面中插入向左三角按钮  设置跳转达到跳转到前一页的效果

7.将取消移动端点击效果设置为全局设置

8.开始游戏界面 

为了方面修改与管理避免BUG还是使用不同的HTML文件

9.创建游戏页面

10.设置header样式

11.寻找资料学习怎么用CSS画X 

12.用CSS画出X按钮并在header上定位

13.给X按钮设置跳转回版本选择界面

14.给版本“简化版”版本选择按钮设置跳转并调整样式

display: inline-block;

15.构思并画出播放按钮

首先画一个橙色的圆，然后用伪类插入一个三角形到上方，形成播放按钮。

先画橙圆

然后使用伪元素插入三角形

效果如下

先调整父元素定位方式

position: relative;

然后调整伪元素样式

16.设置好div和播放按钮的样式与定位

今天完成的界面效果

明天计划的事

1.学习html5 audio标签的相关知识

2.为投票页面添加音频播放功能（2小时）

3.架构各个玩家方块的大体架构

4.完善版本选择与游戏界面的跳转部分

问题

今天比较顺利 没有遇到什么问题

收获

1.单个HTML文件引用多个CSS文件需并列引用

<link rel="stylesheet" href="zhuoyoujingling.css">
<link rel="stylesheet" href="game.css">

2.对伪元素的理解和使用进一步加深

3.学习了圆角的原理和一些特性

一、CSS3圆角的优点

传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：

　　* 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。

　　* 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。

　　* 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。

二、border-radius属性

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

比如，下面是一个div方框：

现在设置它的圆角半径为15px：

　　border-radius: 15px;

这条语句同时将每个圆角的"水平半径"（horizontal radius）和"垂直半径"（vertical radius）都设置为15px。

border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

学习的资料来源

CSS3圆角详解

http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html

2.学习了如何使用截图工具获取图片里颜色参数的方法

使用QQ或者微信的截图工具 

当箭头指向任何区域时箭头右下方都会有rgb（xxx  xxx  xxx） 的颜色代码 直接记下来就可以了

不需要PS