前端设计——音乐盒子

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控制

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　　　　

转载于:https://www.cnblogs.com/sylz/p/5659112.html