<style>
	*{
		/*去除margin和padding避免定位出现干扰*/
		/*星号代表选择所有元素*/
		margin:0px;
		padding: 0px;
	}
	#d1{
		position:absolute;
		width:1000px;/*定义宽高*/
		height:800px;
		background-repeat: no-repeat;/*图片不会平铺出现*/
		background:url(1.jpg);/*图片用背景的方式展示在d1块上*/
	}
	.i2{
		/*定义按钮大小位置*/
		width: 100px;
		height: 50px;
		position:absolute;/*绝对定位*/
		top: 50%;
		right: 0px;
		margin-top: -25px;
		font-size: 40px;/*字体大小,采用<>俩符号*/
	}
	.i1{
		/*定义按钮大小位置*/
		width: 100px;
		height: 50px;
		position:absolute;/*绝对定位*/
		top: 50%;
		left: 0px;
		margin-top: -25px;
		font-size: 40px;
	}
	#d2{
		/*定义播放顺序板块的大小位置*/
		position:absolute;/*绝对定位*/
		width:200px;
		height: 30px;
		background: none;/*无背景,理解为透明*/
		bottom: 0px;
		left:50%;
		margin-left: -100px;
		display: flex;/*横向排列,使5个点横向排列*/
	}
	#d21,#d22,#d23,#d24,#d25{
		/*定义播放顺序板块中每一个小圆圈的大小和位置*/
		width:10px;
		height: 10px;
		background: rgba(0,255,243,1.00);/*rgba四个字母代表红绿蓝透明*/
		/*这里其实使用rgb或者16进制就可以,多此一举了*/
		position: relative;/*相对定位,相对于自身未设置之前的位置*/
		margin-top: 10px;
		margin-left: 25px;
		border-radius:5px;
	}
</style>
