五环

五环布局Demo

最新推荐文章于 2024-09-18 19:30:13 发布

原创最新推荐文章于 2024-09-18 19:30:13 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

下面这是一个简单五环的小demo，闲来无事，简单写一个


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
	padding:0;
	margin:0;
	}
.one,.three,.five{
	background-color:blue;
	padding:25px;

	}
.two,.four{
	background-color:pink;
	padding:25px;
	}
.one{ width:250px;
	height:250px;
	}
.two{ width:200px;
	height:200px;
	}
.three{ width:150px;
	height:150px;
	}
.four{ width:100px;
	height:100px;
	}
.five{ width:50px;
	height:50px;
	}
</style>
</head>
<body>
	<div class="one">
		<div class="two"> 
			<div class="three">
				<div class="four">
					<div class="five"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>