居中布局的五彩圆环-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41338341/article/details/82496970

五个圆环在页面居中分布，固定在页面中部，随浏览器页面缩放，代码如下：

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.palt{
			position: fixed;
			left: 50%;
			top: 50%;
			width: 380px;
			height: 180px;
			margin-left: -190px;
			margin-top: -90px;
		}
		.circle1,
		.circle2,
		.circle3,
		.circle4,
		.circle5{
			position: absolute;
			width: 100px;
			height: 100px;
			border:10px solid black;
			border-radius: 50%;
		}
		.circle1{
			border-color: red;
			left: 0px;
			top: 0px;
		}
		.circle2{
			border-color: green;
			left: 130px;
			top: 0px;
			z-index: 1;
		}
		.circle3{
			border-color: blue;
			left: 260px;
			top: 0px;
		}
		.circle4{
			border-color: yellow;
			left: 65px;
			top: 60px;
		}
		.circle5{
			border-color: black;
			left: 195px;
			top: 60px;
		}
	</style>
</head>
<body>
	<div class="palt">
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
		<div class="circle5"></div>
	</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
</body>

运行结果如图：