用div+css创建太极阴阳图

当我们深入学习html与css的前端技术时会发现,这些简单的编程语言原来可以创作很多有趣事情。比如创建下面图片中的太极阴阳图:

下面贴出本人的代码供大家参考:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>heartmv.com</title>
	<style type="text/css">
		body {margin:0; padding:0; background:#FF00FF;}
		/*第一个div在最底层*/
		.div1{
			width:600px;
			height:600px;
			background:#fff;
			border-radius:300px;
			margin:20px auto;
			position:relative;
		}
		/*由最底层数起,第二个div在第二层*/
		.div2{
			width:300px;/*这是关键:第二个div的宽度必须为第一个div的一半*/
			height:600px;
			background:#000;
			border-top-left-radius:300px;
			border-bottom-left-radius:300px;
			position:absolute;
			left:0;
			top:0;
		}
		/*由最底层数起,第三个与第四个div在第三层*/
		.div3{
			width:300px;/*第三个与第四个div的宽度必须为第一个div的一半*/
			height:300px;/*第三个与第四个div宽度必须为第一个div的一半*/
			background:#000;
			border-radius:150px;
			position:absolute;
			top:0;
			left:150px;
		}
		.div4{
			width:300px;/*第三个与第四个div的宽度必须为第一个div的一半*/
			height:300px;/*第三个与第四个div宽度必须为第一个div的一半*/
			background:#fff;
			border-radius:150px;
			position:absolute;
			bottom:0;
			left:150px;
		}
		/*由最底层数起,第五个与第六个div在最顶层*/
		.div5{
			width:50px;
			height:50px;
			background:#fff;
			border-radius:25px;
			position:absolute;
			top:125px;
			left:280px;
		}
		.div6{
			width:50px;
			height:50px;
			background:#000;
			border-radius:25px;
			position:absolute;
			bottom:125px;
			left:280px;
		}
	</style>
</head>
<body>
	
	<div class="div1">
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
		<div class="div5"></div>
		<div class="div6"></div>
	</div>
	
</body>
</html>

更多精彩内容请继续关注本站:heartmv.com

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:, ,
顶部