制作全屏背景图片：播放页面的背景图片使用了高斯模糊，由于到css的一样样式不太了解，制作起来耗费了一些事件。背景图片的高斯模糊使用了filter样式：filter:blur(20px)。在查阅资料的时候，发现了filter还有一些强大的功能，就是我们国家公祭日的时候，有些网站就会变成了灰色，就是用了filter这个样式：filter: grayscale(100%);。有兴趣的可以去了解一下。制作中间区域：因为中间区域是需要了装两个div的，一个是歌曲的图片，另一个是歌词。刚开始的时候准备用定位来实现的，发现不行，苦于没法子，就看了源码，才知道是通过inline-block和no-wrap来实现的。制作顶部和底部过渡效果：使用transition标签来制作过渡效果的时候，发现加了样式却没有过渡效果。研究了一下才发现，你不仅要对目标元素添加trasition样式，还要为v-enter-active和v-leave-active添加transition样式，否则没有过渡效果。收获的成果：
原因： 项目页面上本身的样式影响到了视频的样式。解决：当你换一个页面，或者将视频独立放在最外面的标签，样式就不会有问题。也就是说，将视频与其他部分独立开，不受其他标签样式的影响。
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发负值：元素过渡效果会从该时间点开始显示，之前的动作被截断0：默认值，元素过渡效果立即执行过渡的触发机制伪类触发：hover：active：focus：checked媒体查询：通过@media属性判断设备的尺寸，方向等JavaScript触发：用JavaScript脚本触发使用transition实现过渡动画的使用步骤在默认样式中声明元素的初始状态样式声明过渡元素最终状态样式，如悬浮状态在默认样式中通过添加过渡函数，添加一些不同的样式。
层(div)和块(span)层：
将内容放到层中，就是将这些内容当成一个整体进行处理，类似于WinForm的Panel.span：div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体进行操作，但不影响布局和显示CSS计量单位：px(像素)、30%(百分比)、em(相对单位)。如：width:50Pxborder-style边框风格；border-color边框颜色；border-width边框宽度(默认是0)display：元素是否显示。可选none(不显示)、block(显示为块级元素，元素前后带有换行符)、inline(显示为内联元素，元素前后没有换行符)等等cursor：鼠标在元素上时显示的光标图标，可选值：cursor(默认光标)、pointer(超链接上的手)、text(输入bean)、wait(沙漏)、help(帮助)等li不显示圆点：list-style-type:none;一般设在li或者ul上样式选择器：有三种分别是标签选择器、class选择器、id选择器标签选择器input{border-color:red;color:blue;}对于指定的标签采用统一的样式class选择器：定义一个命名的样式，然后在用到它的时候设定元素class属性为样式的名称，还可以同时设定多个class，名称之间加空格；样式名称开头加”.”.warning{backgroundcolor:red;}.highlight{font-size:xx-large;cursor:help;}
| aaa | bb | ccc |
