使用HTML开发商业网站
案例-制作音乐排行榜
阶段案例——制作音乐排行榜
制作音乐排行榜
如果把个元素都看成盒子,则页面由多个盒子构成。整个模块由唱片背景和歌曲排名两部分构成。其中唱片背景由一个div进行整体控制,歌曲排名部分结构清晰,可由无序列表
进行定义。
结构图如右所示。
div
ul
li
li
li
li
li
li
分析效果图
控制效果图5-51的样式主要分为以下几个部分:
(1)通过最外层的大盒子对页面的整体控制,需要对其设置宽度、高度、圆角、边框、渐变及内边距等样式,实现唱片背景效果。
(2)整体控制列表内容(ul),需要对其设置宽度、高度、圆角、阴影等样式。
(3)设置5个列表项(li)的宽高、背景样式属性。其中第一个li需要添加多重背景图像,最后一个li底部要圆角化,需要对它们单独进行控制。
分析效果图
音乐排行榜
-
2022-07-10 14:07:14
487KB
HTML