1、首先要完成的结构如下图所示：
一个大盒子被分为左右下三个部分，左边部分（紫颜色）用于存放一个动态图片；右边绿颜色部分用于显示歌手头像，歌曲名字，歌词；下边银白色用于控制歌曲的播放与暂停。这就是想要实现的大概结构。
2、难点
1）、结构的搭建
我们都知道，div是默认自带换行，如何让两个div并排对齐存放呢。用到的是float，浮动，让他们一个浮动到左侧，一个浮动到右侧，这样就能并排对齐了。因为浮动不占据原来的文档流，所以我们在处理银白色盒子时，如果不让他浮动，他的左上顶点就会和紫盒子的左上顶点重合。
2）、一些小细节
①让标题上下移动 用到line-height这个属性。
②让一个图片作为背景铺满整个盒子 background:url("路径");background-size:100%;
③去掉无序列表的小黑点 ul li{list-style:none;}
④图片圆角显示以及图片有光影效果 img{border-radius:px;box-shadow:0 0 10px #fff;}
⑤下划线 border-bottom:1px
⑥只控制无序列表中的一个标签 ul li:nth-child(2){} 表示只控制列表中的第二个标签。
⑦文字阴影效果——文字颜色如果和背景颜色接近的话，很容易看不见文字，这个时候如果给文字来点阴影效果就可以看见文字 text-shadow:0 0 5px #fff.
3）、歌词的滚动显示js控制