制作简单的音乐排行榜

发布时间：2025-09-13 09:52

排行榜书籍往往有作者的简介和推荐语 #生活乐趣# #阅读乐趣# #阅读排行榜#

通过此例子顺便介绍一下相对路径和绝对路径。

在计算机查找文件的时候，需要明确文件所在的位置。网页中的路径通常分为绝对路径和相对路径两种。

具体介绍如下：

1.绝对路径

绝对路径就是网页上的文件或目录在硬盘上的真正路径，如"D:\案例代码\chapter03\images\banner1.jpg"，或完整的网络地址，如"http://www.zcool.com.cn/images/logo.gif"。

2.相对路径

相对路径就是相对于当前文件的路径。相对路径没有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

总的来说，相对路径的设置分为以下3种：

● 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名车即可，如<img src = "logo.gif" />。

● 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src = "img/img01/logo.gif" />。

● 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../”，如果是上两级，则需要使用“../../”，以此类推，如<img src = "../logo.gif" />。

值得一提的是，网页中并不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，此时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在A文件夹，也有可能在B文件夹，因此很有可能不存在“D:\网页制作与设计（HTML+CSS）\案例源码\chapter03\images\banner1.jpg”这样一个很精准的路径，这样就会造成图片路径错误，网页没办法正常显示设置的图片。

运行代码：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>音乐排行榜</title> <link rel="stylesheet" type="text/css" href="style05.css"> <style> /*清除浏览器默认样式*/ *{margin:0;padding:0;} /*整体控制歌曲排行榜模块*/ .bg{ width:600px; height:550px; background-image:repeating-radial-gradient(circle at 50% 50%,#333,#000 1%); margin:50px auto; padding:40px; border-radius:50%; padding-top:50px; border:10px solid #ccc; } /*歌曲排名部分*/ .sheet{ width:372px; height:530px; background:#fff; border-radius:30px; box-shadow:15px 15px 12px #000; margin:0 auto; } .sheet p{ width:372px; height:55px; background:#504d58 url(yinfu.png) no-repeat 50px 8px; margin-bottom:2px; font-size:18px; color:#d6d6d6; line-height:55px; text-align:center; font-family:"微软雅黑"; } /*需要单独控制的列表项*/ .sheet .tp{ width:372px; height:247px; background:#fff; background-image:url(yinyue.jpg),url(wenzi.jpg); background-repeat:no-repeat; background-position:87px 16px,99px 192px; border-radius:30px 30px 0 0; } .sheet .yj{border-radius:0 0 30px 30px;} </style> </head> <body> <div class="bg"> <div class="sheet"> <p class="tp"></p> <p>vnessa——constance</p> <p>dogffedrd——seeirtit</p> <p>dsieirif——constance</p> <p>wytuu——qeyounted</p> <p class="yj">qurested——conoted</p> </div> </div> </body> </html>

效果图：

网址：制作简单的音乐排行榜 https://klqsh.com/news/view/238780

⬅️上一篇：QQ音乐听歌排行榜在哪里查看?Q

➡️下一篇：10首必听的车载音乐最经典的车

制作简单的音乐排行榜

相关内容

随便看看

最新乐趣

热点乐趣

专题

推荐乐趣