2.用表格布局页面，利用CSS技术，及添加多媒体，制作并美化“心灵之音”页面。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>心灵之音</title>
<style type="text/css">
body{
background-image: url(../img/bg-0.jpg);
background-repeat: no-repeat;
}
.k1{
width: 700px;
height: 800px;
border: 1px solid #000000;
margin-left: 300px;
background-color: #fffff0;
}
.k2{
width: 700px;
height: 30px;
border: 1px solid #000000;
margin-left: 300px;
margin-top: -30px;
background-color: #808080;
}
.k3{
width: 200px;
height: 770px;
border: 1px solid #000000;
border-bottom: none;
margin-left: 300px;
margin-top: -800px;
}
.k4{
width: 500px;
height: 700px;
border: 1px solid #000000;
border-left: none;
margin-left: 500px;
margin-top: -770px;
background-color: #ffffff;
background-image: url(../img/list.jpg);
background-repeat: no-repeat;
background-size: 580px;
}
.k5{
width: 500px;
height: 70px;
border-right: 1px;
margin-left: 500px;
border-left: none solid #000000;
border-top: none;
border-bottom: none;
background-color: #808080;
}
#font1{
font-family: heiti;
font-size: 100px;
padding-left: 45px;
}
#font2{
font-size: 15px;
text-align: center;
}
li{
font-size: 20px;
margin-left: 20px;
}
a{
color: #000000;
font-size: 20px;
}
</style>
</head>
<body>
<table class="k1" id="font1">
<tr>
<td><p>心<br />灵<br />之<br />音</p></td>
</tr>
</table>
<table class="k2" id="font2">
<tr>
<td>版权所有©心灵之音网站</td>
</tr>
</table>
<table class="k3">
<tr>
<td></td>
</tr>
</table>
<table class="k4">
<tr>
<td>
<ol>
<!--audio要搭配controls才可以正常运行--><br /><br /><br /><br /><br /><br /><br />
<li>陈小朵 - 匆匆那年</li>
<br />
<audio src="../media/陈小朵 - 匆匆那年.mp3" controls="controls"></audio>
<br /><br /><br />
<li>陈颖恩 - 那些你很冒险的梦</li>
<audio src="../media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls"></audio>
<br /><br /><br />
<li>黄霄雲 - 左手指月</li>
<audio src="../media/黄霄雲 - 左手指月.mp3" controls="controls"></audio>
<br /><br /><br />
<li>李健 - 抚仙湖</li>
<audio src="../media/李健 - 抚仙湖.mp3" controls="controls"></audio>
</ol>
</td>
</tr>
</table>
<table class="k5">
<tr>
<td>
<a href="流行音乐">流行音乐</a>
<a href="摇滚音乐">摇滚音乐</a>
<a href="现代音乐">现代音乐</a>
<a href="民族音乐">民族音乐</a>
<br />
<a href="蓝调歌曲">蓝调歌曲</a>
<a href="管弦乐队">管弦乐队</a>
<a href="合奏乐">合奏乐</a>
<a href="更多...">更多...</a>
</td>
</tr>
</table>
</body>
</html>
