做出如图的效果
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>商品展示</title><style type="text/css">body {text-align: center; /* 让整个页面内容居中 */font-family: Arial, sans-serif; /* 设置字体 */}.title {background-image: url('img/cap.jpg'); /* 标题背景图片 */height: 100px; /* 标题高度 */background-size: 30%; /* 背景图片覆盖整个标题区域 */background-position: center; /* 背景图片居中显示 */margin: 0 auto; /* 让标题居中 */display: flex; /* 使用Flexbox布局 */align-items: center; /* 垂直居中标题内容 */justify-content: center; /* 水平居中标题内容 */color: white; /* 文字颜色 */text-shadow: 2px 2px 4px #000000; /* 文字阴影 */}.title h1 {margin: 0; /* 移除标题的默认外边距 */}.table-container {display: inline-block; /* 让表格容器成为行内块元素，以便居中 */text-align: left; /* 表格内容左对齐 */}.one {border-collapse: separate;border-spacing: 10px 50px;width: 80%; /* 表格宽度 */margin: 20px auto; /* 外边距，实现居中 */}table, td {border: 1px solid #ddd; /* 边框颜色 */}td {background-color: white; /* 单元格背景颜色 */padding: 15px; /* 单元格内边距 */text-align: center; /* 文本居中 */}img {width: 150px; /* 图片宽度 */height: auto; /* 图片高度自适应 */margin-bottom: 10px; /* 图片与文本之间的间距 */}p {margin: 0; /* 移除段落的默认外边距 */font-size: 14px; /* 字体大小 */color: #333; /* 字体颜色 */}</style>
</head>
<body><div class="title"><h1>翡翠阁</h1></div><div class="table-container"><table class="one"><tr><td><img src="img/li1.jpg" alt="翡翠项链嘴子"/><p>翡翠项链嘴子<br />$1500</p></td><td><img src="img/li2.jpg" alt="羊脂玉戒指"/><p>羊脂玉戒指<br />$2300</p></td><td><img src="img/li3.jpg" alt="紫羽手链"/><p>紫羽手链<br />$2880</p></td><td><img src="img/li4.jpg" alt="羊头黄玉"/><p>羊头黄玉<br />$6699</p></td></tr><tr><td><img src="img/li5.jpg" alt="翡翠挂件"/><p>翡翠挂件<br />$1260</p></td><td><img src="img/li6.jpg" alt="翡翠蝴蝶胸口扣"/><p>翡翠蝴蝶胸口扣<br />$1254</p></td><td><img src="img/li7.jpg" alt="翡翠耳坠"/><p>翡翠耳坠<br />$6650</p></td><td><img src="img/li8.jpg" alt="翡翠项白金镯子"/><p>翡翠项白金镯子<br />$9999</p></td></tr></table></div>
</body>
</html>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> 
