制作简单的音乐排行榜
通过此例子顺便介绍一下相对路径和绝对路径。
在计算机查找文件的时候，需要明确文件所在的位置。网页中的路径通常分为绝对路径和相对路径两种。
具体介绍如下：
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>
效果图：
作者：cszcoder
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文链接，否则保留追究法律责任的权利。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具