今天完成的事情：

今天有点水了，做的事情很少，一天都在纠结那个音频怎么播放，并且自己给他设计样式，最后也没有实现，但我知道有俩种方法，

在页面中添加audio元素的方法主要是两种，一种是在html中加入audio代码，可以加入一些属性（autoplay,preload）等，这些在之前的文章已经说过了。另外一种是js动态加载进来的。代码如下：

var audio=document.creatElement(“audio”);
audio.src=”audio/source.ogg”;//路径
audio.play();

或者更简单一些
audio=new Audio(“audio/source.ogg”);//路径
audio.play();

但是js我并不会，而且js是以后要学到的，所以准备学完css后再做一遍。

hover效果

hover，指一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

今天还写了几个任务1的盒子，播放按钮我用的是一个三角，外面套一个盒子，然后调整三角位置，做到美观效果

  font-size: 20px;
   height: 80px;
    background-color: #b9e9f5;
display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 80px;
    margin-top: 100px;
}
.font span{
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left:  20px solid #ffffff;
    margin-left: 8px;

这是我的代码。

做玩家那些盒子，我先是用一个大的div包着，然后在做里面的，上面做一个盒子下面做一个盒子，把他们套在一起

 width: 200px;
line-height: 160px;
 text-align: center;
 margin: 0;

这里注意如果不加margin 0的话上面的盒子就会把下面盒子挤出去，因为他自带外边距。

明天计划的事情：

明天准备提交任务7.加油

遇到的问题：

音频的问题隐藏了样式但是播放不了了，没有解决

收获：

今天无收获