第7章 利用CSS和多媒体美化页面作业
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>