HTML+CSS系列实战之音乐播放器实现

前面学了一些基本的HTML结构和CSS样式，为了巩固所学的知识，小熊将带领大家一起就前期所学到的知识做一个简单的音乐播放器。代码先行！！！html文件为:(music.html)<!doctype html><html><head><meta charset="utf-8"><title>音乐播放页面</title><l

bear*6

11887人浏览 · 2021-11-05 23:06:27

bear*6 · 2021-11-05 23:06:27 发布

前面学了一些基本的HTML结构和CSS样式，为了巩固所学的知识，小熊将带领大家一起就前期所学到的知识做一个简单的音乐播放器案例。
先看看我们要实现的效果吧！
在这里插入图片描述
是不是很好看捏！！！
在开始写代码之前，我们需要先准备一个音频文件和一个视频文件以及若干图片，然后进行页面的布局。
话不多说，代码先行！！！
html文件为:(music.html)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放页面</title>
<link rel="stylesheet" href="music.css" type="text/css" />
</head>
<body>
<div id="box-video">
        <video src="video/mailang.webm"  autoplay="autoplay" loop >浏览器不支持video标签</video>
       	<div class="cd">
        	 <div class="center"></div>
        </div>
        <div class="song">
        	<h2>风中的麦浪</h2>
            <p>爱过的地方<br/>
			当微风带着收获的味道<br/>
			吹向我脸庞<br/>
			想起你轻柔的话语<br/>曾打湿我眼眶<br/>嗯…啦…嗯…啦…<br/>我们曾在田野里歌唱<br/>在冬季盼望<br/>却没能等到阳光下</p>
            <audio muted src="music/mailang.mp3" autoplay="autoplay" loop ></audio>
        </div>
</div>
</body>
</html>

css样式为:(music.css)

@charset "utf-8";
/* CSS Document */
/*清除浏览器默认样式*/
*{
margin:0; padding:0;
}
/*整体控制音乐播放界面*/
#box-video{
	width:100%; 
	height:100%;
	position:absolute; 
	overflow:hidden;
	}
/*插入视频*/	
#box-video video{
	position:absolute; 
	top:50%; 
	left:50%;
	margin-left:-1350px; 
	margin-top:-540px;
	}
/*唱片部分*/	
.cd{
	width:422px;
	height:422px;
	position:absolute;
	top:25%;
	left:10%;
	z-index:2;
	border-radius:50%;
	border:10px solid #FFF;
	box-shadow:5px 5px 15px #000;
	background:url(images/cd_img.jpg) no-repeat;
	}
.center{
	width:100px;
	height:100px;
	background-color:#000;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px; 
	margin-top:-50px;
	z-index:3;
	border:5px solid #FFF;
	background-image:url(images/yinfu.gif);
	background-position: center center;
	background-repeat:no-repeat;
	}
/*歌词部分*/	
.song{
	position:absolute;
	top:25%;
	left:50%;
	}
@font-face{
	font-family:MD; 
	src:url(font/MD.ttf);
	}
h2{
	font-family:MD; 
	font-size:110px; 
	color:#913805;
	}
p{ 
	width:556px;
	height:300px;
	font-family:"微软雅黑";
	padding-left:30px;
	line-height:30px;
	background:url(images/bg.png) repeat-x;
	box-sizing:border-box;
	}

重点来啦！在上述代码中，我采用的是结构与样式相分离的原则，即将css样式链接到html文件中。在布局中，具体分为三部分:

视频部分：预先给定一个大盒子，让其宽高占据百分百，即铺满整个页面，然后将视频导入，这里用的是绝对定位的方式，将视频定位到页面中间，然后通过overflow:hidden属性，将溢出的部分隐藏掉。为了让视频实现自动播放的功能，需要给其设置autoplay属性，并通过loop属性让其循环播放。
唱片部分：通过绝对定位将两个盒子定位到合适的位置。先给两个盒子一定的宽高，然后通过border-radius属性属性将盒子的形状变为圆形（所以这里给盒子的宽高一致），并用box-shadow属性来给大盒子添加阴影，然后先将外面的大盒子（.cd)定位到页面的左边，再把里面的小盒子（.center)移动到大盒子的中心，这里也用的是绝对定位，最后将预先准备好的动图作为小盒子的背景。并且为了将小盒子显示在大盒子的上面，需要给他增加层级，由于这里的盒子都用到了定位，所以可以通过z-index属性来增加小盒子的层级。
歌词部分：先给定一个大盒子（.song)，将大盒子移动到通过绝对定位定到页面合适位置，在盒子内部，通过h2标签和p标签将文字布局好，这里的标题“风吹麦浪”用到了字体样式，所以这里需要引入。布局完成后，再在里面插入预先准备好的音频文件，给其添加自动播放和循环播放属性。为了美观，我们不显示音频和视频的播放控件，即不给他们添加添加controls属性。
你学会了吗?