四、【技能锤炼】
2.任务1：音乐排行榜简单版
2.2、任务2：音乐排行榜优化版
1、页面增加具有质感的镭射唱片作为背景，增强视觉效果；
2、第一个li需要添加多重背景图像，最后一个li底部要圆角化。
分析效果图
1、结构分析
如果把各个元素都看成具体的盒子，则效果图所示的页面由多个盒子构成。音乐排行榜模块整体主要由唱片背景和歌曲排名两部分构成。其中，唱片背景可以通过一个大的div进行整体控制，歌曲排名部分结构清晰，排序不分先后，可以通过无序列表<ul>进行定义。
图1页面结构图
2、样式分析
控制效果图的样式主要分为以下几个部分：
（1）. 通过最外层的大盒子对页面的整体控制，需要对其设置宽度、高度、圆角、边框、渐变及内边距等样式，实现唱片背景效果。
（2）. 整体控制列表内容（ul），需要对其设置宽度、高度、圆角、阴影等样式。
（3）. 设置5个列表项（li）的宽高、背景样式属性。其中第一个li需要添加多重背景图像，最后一个li底部要圆角化，需要对它们单独进行控制。
5.1.2 制作页面结构
根据上面的分析，可以使用相应的HTML标记来搭建网页结构。
在所示的HTML结构代码中，最外层的div用于对音乐排行榜模块进行整体控制，其内部嵌套了一个<ul>无序列表，用于定义音乐排名。
图2HTML结构页面效果
5.1.3 定义CSS样式
搭建完页面的结构，接下来为页面添加CSS样式。本节采用从整体到局部的方式实现图5-51所示的效果，具体如下。
1、 定义基础样式
在定义CSS样式时，首先要清除浏览器默认样式，具体CSS代码如下：
*{margin:0; padding:0; list-style:none;outline:none;}
2、 整体控制歌曲排行榜模块
通过一个大的div对歌曲排行榜模块进行整体控制，根据效果图为其添加相应的样式代码，具体如下。
/*整体控制歌曲排行版模块*/
3、 设置歌曲排名部分样式
歌曲排名部分整体可以看做是一个无序列表，需要为其添加圆角和阴影等样式，具体代码如下。
/*歌曲排名部分*/
4、 设置需要单独控制的列表项样式
在控制歌曲排名部分的无序列表中，第1个用于显示图片的列表项（li）和最后一个需要圆角化的列表项（li），需要单独控制，具体代码如下。
/*需要单独控制的列表项*/
至此，完成了效果图歌曲排行榜模块的CSS样式部分。将该样式应用于网页后，效果如图所示。
图3添加CSS样式后的页面效果
