源代码：
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk;gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!--当前页面三要素-->
<title>音乐播放插件</title>
<meta name="keywords" content="关键词">
<meta name="description" content="seo描述">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
body{background:url("img/bg.jpg") no-repeat top center;}
.bt{color:#fff;text-align:center;}
.music{width:960px;height:250px;margin:50px auto;background:url("img/banner_bg.jpg") no-repeat;position:relative;}
.music ul li{list-style:none;position:absolute;}
.music ul .kg1{top:160px;left:97px;}
.music ul .kg1 a img{border-radius:100%;}
.music ul .kg2{top:30px;left:165px;}
.music ul .kg2 a img{border-radius:100%;}
.music ul .kg3{top:65px;left:306px;}
.music ul .kg3 a img{border-radius:100%;}
.music ul .kg4{top:160px;right:320px;}
.music ul .kg4 a img{border-radius:100%;}
</style>
<!--给当前页页面插入一个外部引入js文件-->
<script type="text/javascript" src="相对路径">
</script>
</head>
<body >
<h1 class="bt">dubijerry网页播放音乐</h1>
<div class="music">
<ul>
<li class="kg1">
<a>
<img src="img/1.jpg" alt="孙露" width="60px" height="60px"/>
</a>
</li>
<li class="kg2">
<a>
<img src="img/2.jpg" alt="抒情流行" width="90px" height="90px"/>
</a>
</li>
<li class="kg3">
<a>
<img src="img/3.jpg" alt="华语流行" width="124px" height="124px"/>
</a>
</li>
<li class="kg4">
<a>
<img src="img/4.jpg" alt="周华健" width="60px" height="60px"/>
</a>
</li>
</ul>
</div>
</body>
</html>