HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)

本文介绍: 黑马程序员编著的教材 HTML+CSS+Jav aScri p t 网页制作案例教程第四章：播放器图标–课后习题参考代码

黑马程序员编著的教材 HTML+CSS+Jav aScri p t 网页制作案例教程

。。。。。。。。

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
<head&gt;
<meta charset="UTF-8"&gt;
<title&gt;播放器图标</title&gt;
<style type="text/css"&gt;
.big_bg{
	width:500px;
	height:500px;
	background-image:linear-gradient(180deg,#62426c 20%,#d4b5d5 50%,#91576f 85%);
	padding-top:105px;
	box-sizing:border-box;
	margin:50px auto;
	}
.bg{
	width:300px;
	height:300px;
	margin:0px auto;
	background-image:linear-gradient(160deg,#945278 20%,#492646  50%);
	border-radius:20px;
	box-shadow:10px 10px 30px #2f0f2c;
	padding-top:55px;
	box-sizing:border-box;
	}
.box{
	width:240px;
	height:195px;
	background-image:linear-gradient(160deg,#fab097 20%,#a85a67  50%);
	margin:0 auto;
	border-radius:20px;
	border:26px solid #241826;
	padding-top:20px;
	box-sizing:border-box;
	}
.box_1{
	width:100px;
	height:100px;
	margin:0 auto;
	border-radius:50%;
	background:#FFF;
	padding:20px 0 0 10px;
	box-sizing:border-box;
	}
.play{
	width:0px;
	height:0px;
	margin:0 auto;
	border:30px solid #fff;
	border-left:30px solid #281a29;
	border-right:none;
	}	
</style>
</head>
<body>
<div class="big_bg">
	<div class="bg">
    	<div class="box">
        	<div class="box_1">
            	<div class="play"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>