今天完成的事情：

1.三个界面间的相互跳转已完成，设定是点击日服按钮会跳转界面2，点击投死按钮，会跳转界面3。其余可按的按钮埋藏了惊喜网站。

界面2播放器按钮点击可以放音乐，进入该界面会自动播放，点击可以暂停。

2.今天在处理几个在谷歌浏览器显示正常，但其它浏览器异常的地方。如图标出现了错位，白色边框不显示。这里钻牛角尖了，不知不觉时间就过去了，导致今天并没有做很多事情。

明天计划的事情：

1.回顾下代码和布局的逻辑，每次都有点忘记，回顾下看看自己当时是怎么想的，布局一多久容易乱。比如界面2的悬停，这个功能多加了几个盒子，把隐藏的四个小图标和平时显示的大图标分别做成两个盒子，再用一个父项大盒子包裹。

这里的N个投票框类似九宫格布局，不过我没有在这里用九宫格自适应的布局，而是做成了每行一个大盒子，再包裹3个小盒子，使用justify-content：space-between，，小盒子间设置一点右间距。不过做完再想做成自适应，每行3个，第三个右边取消浮动应该也可以。

2.有些深度思考的内容发现并没有用到过，比如vertical-align，后面尝试用一下。再推进任务。

遇到的问题：

1.就在这个地方钻牛角尖了

第一是图标错位的问题

谷歌浏览器模拟手机端时图标位置完美，显示正常，但切换成电脑端某些图标会出现异常，比如多一条白线。于是尝试用360极速浏览器打开，这次出现了更严重的图标错位，（360极速浏览器不是用的谷歌chorme的内核么，问题咋不一样呢）。

搞了很久，最后把雪碧图处的坐标单位改为rem，并给出雪碧图的尺寸，问题解决。但不是特别明白，应该是需要统一单位？

background: url("img.png")no-repeat -6rem 0;
background-size: 36.3rem 10.3rem;

第二是IE浏览器不显示白框的问题

投票框有一个3px的白边，其余浏览器能显示，但IE和手机端开始无法显示。框的布局是：一个大盒子包裹两个P标签。试了几个方法，取消大盒子的边框，改为用两个小盒子来实现，无果。重新给出盒子具体高度，无果。  啊不知道怎么办了，然后。。再打开的时候不知道为什么就能显示了，之前无论等多久都显示不出来，这个地方令我很迷惑。

收获：

1.雪碧图的各个单位要给出一样的rem，然后css里写出雪碧图的尺寸，这样到其它浏览器就不会出现图标错位了。嗯（不要被打脸）。

2.不要再钻牛角尖了、、、、

3.播放器的隐藏，我的想法的可以用透明度opacity做成0，尺寸大小做的和播放器图标大小类似。可以设置自动播放，指令是autoplay。

不过后面应该会有更好的方法。

audio {
   opacity: 0;
    height: 2.6rem;
}

4.按钮点击的跳转，可以用onclick指令，window.open()是可以在一个网站上打开另外的一个网站的地址 。

<button class="btn btn-1" type="button" onclick="window.open('https://www.bilibili.com')">
    <p class="word-2">国服</p>
</button>