Vue学习笔记(十一)-CFANZ编程社区

效果图如下：

Html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心灵之音</title>
		<style type="text/css">
			@import url("../css/worktest.css");
		</style>
	</head>
	<body>
		<div class="all">
			<div class="content">
				<div class="left">
					心灵之音
				</div>
				<div class="right">
					<img src="../img2/list.jpg"/>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.陈小朵 - 匆匆那年<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<audio src="../media/陈小朵 - 匆匆那年.mp3" controls="controls"></audio>
					<br />
					<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.陈颖恩 - 那些你很冒险的梦<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<audio src="../media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls"></audio>
					<br />
					<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.黄霄雲 - 左手指月<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<audio src="../media/黄霄雲 - 左手指月.mp3" controls="controls"></audio>
					<br />
					<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.李健 - 抚仙湖<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<audio src="../media/李健 - 抚仙湖.mp3" controls="controls"></audio>
				<div class="bottom">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" target="_blank">流行音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" target="_blank">摇滚音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" target="_blank">现代音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" target="_blank">名族音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" target="_blank">蓝调歌曲</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" target="_blank">管弦乐队</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" target="_blank">合奏乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#" target="_blank">更多...</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</div>
				</div>
				<div class="last">版权所有&copy;心灵之音网站</div>
			</div>
			
		</div>
	</body>
</html>

CSS代码如下：

.all{
	height: 700px;
	width: 700px;
	border: 1px solid black;
	background-image: url("../img2/bg-0.jpg");
}
.content{
	position: relative;
	background-color: #eee;
	margin: auto;
	height: 660px;
	width: 600px;
	border: 1px solid black;
	margin: 10px 50px 20px 50px;
}
.left{
	background-color: wheat;
	color: #ff1111;
	font-size: 60px;
	width: 120px;
	height: 630px;
	writing-mode: vertical-lr;
	float: left;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	display: grid;
	place-items: center; 
	letter-spacing: 20px;
}
.right{
	font-size: 20px;
	width: 479px;
	height: 570px;
	border-bottom: 1px solid black;
	float: right;
}
img{
	width: 479px;
	height: 116px;
}
.bottom{
	background-color: aquamarine;
	width: 479px;
	height: 63px;
	border-bottom: 1px solid black;
}
.last{
	width: 598px;
	height: 28px;
	background-color: aquamarine;
	position: absolute;
	bottom: 0;
	text-align: center; 
}