第七章习题二-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_83479354/article/details/143674295

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>心灵之音</title>
		<style>
			body{
				background-image: url(img/bg-0.jpg);
			}
			.main{
				margin: 0px auto;
				width: 600px;
				height: 700px;
				background-image: url(img/bg.jpg);
			}
			.top{
				width: 100%;
				height: 670px;
				border: 1px solid black;
			}
			.bottom{
				width: 100%;
				height: 28px;
				border: 1px solid black;
				text-align: center;
				clear: both;
				background-color: lightcyan;
			}
			.left{
				display: flex;
				width: 20%;
				height: 670px;
				float: left;
				align-items: center;
				font-size: 50px;
				font-weight: 700;
				padding-left: 28px;
				border-right: 1px solid black;
			}
			.right{
				width: 75%;
				height: 670px;
				float: right;
			}
			.right_1{
				height: 65%;
				border-bottom: 1px solid black;
				padding-left: 65px;
			}
			.right_2{
				height: 12%;
				padding-top: 12px;
				background-color: lightcyan;
			}
			p{
				font-weight: 300;
			}
			a{
				font-size: 20px;
				font-weight: 400;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="top">
				<div class="left">
					心<br />
					灵<br />
					之<br />
					音<br />
				</div>
				<div class="right">
					<img src="img/list.jpg" width="100%" height="120px"/>
					<div class="right_1">
						<p>1.陈小朵 - 匆匆那年</p>
						<audio src="media/陈小朵 - 匆匆那年.mp3" controls="controls" loop="loop"></audio>
						<p>2.陈颖恩 - 那些你很冒险的梦</p>
						<audio src="media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls" loop="loop"></audio>
						<p>3.黄霄雲 - 左手指月</p>
						<audio src="media/黄霄雲 - 左手指月.mp3" controls="controls" loop="loop"></audio>
						<p>4.李健 - 抚仙湖</p>
						<audio src="media/李健 - 抚仙湖.mp3" controls="controls" loop="loop"></audio>
					</div>
					<div class="right_2">
						&nbsp;&nbsp;&nbsp;&nbsp;流行音乐
						&nbsp;&nbsp;&nbsp;&nbsp;摇滚音乐
						&nbsp;&nbsp;&nbsp;&nbsp;流行音乐
						&nbsp;&nbsp;&nbsp

浏览效果如图：