【无标题第七章课后习题作业2

最新推荐文章于 2025-05-05 14:12:43 发布

slag_zzy

最新推荐文章于 2025-05-05 14:12:43 发布

阅读量221

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/slag_zzy/article/details/143416523

版权

2.用表格布局页面，利用CSS技术，及添加多媒体，制作并美化“心灵之音”页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心灵之音</title>
		<style type="text/css">
			.all{
				width:900px;
				height:800px;
				border:2px solid;
				background: url(img/bg-0.jpg);
			}
			.aa{
				text-align: center;
				font-size: 60px;
				writing-mode: vertical-rl;
				letter-spacing: 50px;
			}
			td{
				border:2px solid;
			}
			table{
				margin-left: 150px;
				background-image: url(img/bg.jpg);
				border-collapse:collapse;
			}
			audio{
				margin-left: 80px;
			}
			li{
				font-size: 20px;
			}
			a{
				font-size: 20px;
				margin-left: 20px;
			}
			img{
				width: 500px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<table >
				<tr>
					<td class="aa" rowspan="2" height="750px">心灵之音</td>
					<td width="500px">
						<img src="img/list.jpg"/>
						<ol>
						<li>陈小朵-匆匆那年</li><br/>
						<audio src="media/陈小朵 - 匆匆那年.mp3" controls="controls"></audio>
						<li>陈颖恩-那些你很冒险的梦</li><br/>
						<audio src="media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls"></audio>
						<li>黄霄云-左手指月</li><br/>
						<audio src="media/黄霄雲 - 左手指月.mp3" controls="controls"></audio>
						<li>李健-抚仙湖</li><br/>
						<audio src="media/李健 - 抚仙湖.mp3" controls="controls"></audio>
						</ol>
					</td>
				</tr>
				<tr style="background-color: darkgray;">
					<td>
						<a href="#" target="_blank">流行音乐</a>
						<a href="#" target="_blank">摇滚音乐</a>
						<a href="#" target="_blank">现代音乐</a >
						<a href="#" target="_blank">民族音乐</a >
						<br />
						<a href="#" target="_blank">蓝调歌曲</a>
						<a href="#" target="_blank">管弦乐队</a>
						<a href="#" target="_blank">和奏乐</a>
						<a href="#" target="_blank">更多...</a>
					</td>
				</tr>
				<tr style="background-color: darkgray;">
					<td colspan="2" align="center">版权所有&心灵之音网站</td>
				</tr>
			</table>
		</div>
	</body>
</html>