html+css写5环_html,css交错的环整体代码-优快云博客

本文详细介绍了如何使用CSS绝对定位技术，通过五个圆环的实例展示如何控制元素的层级和位置，以达到设计美观的效果。通过.box类的样式设置，读者可以理解如何控制边框颜色、位置和z-index属性来排列圆形元素。

效果图

如何实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			 
			.box1,
			.box2,
			.box3,
			.box4,
			.box5{
				position: absolute;/*进行定位，使本来独占一行的五环，变为一行（absolute:脱离原来位置定位）*/
				width: 100px;
				height: 100px;
				border: 10px solid black;
				border-radius: 50%;
			}
			.box1{
				border-color: blue;
				left: 0;
				top: 0;
			}
			.box2{
				border-color: yellow;
				left: 130px;
				top: 0;
				z-index: 3;  /*类似于z轴坐标的向外延申，将五环放在别的五环上面*/                                                                   
			}
			.box3{
				border-color: black;
				left: 260px;
				top: 0;
			}
			.box4{
				border-color: green;
				left: 65px;
				top: 65px;
			}
			.box5{
				border-color: red;
				left: 195px;
				top: 65px;
			}
			.demo{
				/*居中操作*/
			        position: absolute;/*不可用relative,因为它是相对于自己原来的位置进行定位*/
				left: 50%;
				top: 50%;
				margin-top: -97px;
				margin-left: -195px;
			}
		</style>
		
	</head>
	<body>
		
		<div class="demo">
				<div class="box1"></div>
				<div class="box2"></div>
				<div class="box3"></div>
				<div class="box4"></div>
				<div class="box5"></div>
			</div>
	</body>
</html>