此次完成播放器的设计。如果需要对一个box1的里面的盒子box2对其进行绝对定位position：absolute，这时候需要使用组合在box1中设置相对定位Position：relative，然后在box2中设置绝对定位position：absolute；这么做是为了让子类div在父类div中居中显示，总体是以盒子循环嵌套的方式设计。
详细解析请看代码图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动手实践</title>
<style>
body{
margin: 0 auto;
padding: 0;
}
.box1{
width: 400px;
height: 400px;
margin: 150px auto;
background-image: linear-gradient(to bottom,#62426C,#CDABCB,#91576F);
position: relative;
}
.box2{
width: 300px;
height: 300px;
border:0px #FFFFFF solid;
border-radius: 50px;
background-image: linear-gradient(to bottom,#91576F,#62426C);
position: absolute;
left:0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
.box3{
width: 200px;
height: 140px;
border: 20px #000 solid;
border-radius: 25px;
position: absolute;
left:0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
.box4{
width: 200px;
height: 140px;
background-image: linear-gradient(120deg,#FAB097 30%,#A85A67 60%);
position: absolute;
left:0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
.box5{
width: 100PX;
height: 100PX;
background: #FFF;
border: 0px #fff solid;
border-radius: 100px;
position: absolute;
left:0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
.box6{
width: 0px;
height: 0px;
border: 30px solid black;
border-color:transparent transparent transparent black;
position: absolute;
left:40px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
</head>
<body>
</body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</html>