HTML+CSS系列实战之⾳乐播放器实现
前⾯学了⼀些基本的HTML结构和CSS样式，为了巩固所学的知识，⼩熊将带领⼤家⼀起就前期所学到的知识做⼀个简单的⾳乐播放器案例。
先看看我们要实现的效果吧！
是不是很好看捏
在开始写代码之前，我们需要先准备⼀个⾳频⽂件和⼀个视频⽂件以及若⼲图⽚，然后进⾏页⾯的布局。
话不多说，代码先⾏
div border属性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(f);
}
h2{
font-family:MD;
font-size:110px;
color:#913805;
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⽂件中。在布局中，具体分为三部分:
1. 视频部分：预先给定⼀个⼤盒⼦，让其宽⾼占据百分百，即铺满整个页⾯，然后将视频导⼊，这⾥⽤的是绝对定位的⽅式，将视频定
位到页⾯中间，然后通过overflow:hidden属性，将溢出的部分隐藏掉。为了让视频实现⾃动播放的功能，需要给其设置autoplay属性，并通过loop属性让其循环播放。
2. 唱⽚部分：通过绝对定位将两个盒⼦定位到合适的位置。先给两个盒⼦⼀定的宽⾼，然后通过border-radius属性属性将盒⼦的形状变为
圆形（所以这⾥给盒⼦的宽⾼⼀致），并⽤box-shadow属性来给⼤盒⼦添加阴影，然后先将外⾯的⼤盒⼦（.cd)定位到页⾯的左边，再把⾥⾯的⼩盒⼦（.center)移动到⼤盒⼦的中⼼，这⾥也⽤的是绝对定位，最后将预先准备好的动图作为⼩盒⼦的背景。并且为了将⼩盒⼦显⽰在⼤盒⼦的上⾯，需要给他增加层级，由于这⾥的盒⼦都⽤到了定位，所以可以通过z-index属性来增加⼩盒⼦的层级。3. 歌词部分：先给定⼀个⼤盒⼦（.song)，将⼤盒⼦移动到通过绝对定位定到页⾯合适位置，在盒⼦内部，通过h2标签和p标签将⽂字
布局好，这⾥的标题“风吹麦浪”⽤到了字体样式，所以这⾥需要引⼊。布局完成后，再在⾥⾯插⼊预先准备好的⾳频⽂件，给其添加⾃动播放和循环播放属性。为了美观，我们不显⽰⾳频和视频的播放控件，即不给他们添加添加controls属性。
你学会了吗?

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。