从零开始学HTML&&CSS&&JavaScrip——JavaScrip之奥运五环

最新推荐文章于 2021-11-16 10:00:02 发布

学号Java

最新推荐文章于 2021-11-16 10:00:02 发布

阅读量398

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_42147171/article/details/104887339

版权

前端基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

奥运五环

1.直接上代码
2.其中主要的知识点
3.页面效果

1.直接上代码

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.aa{
				width: 780px;
		        height: 370px;
				position: absolute;
		        margin: 0 auto;
			}
			.aa div{
				width: 200px;
		        height: 200px;
		        border-radius: 50%;
		        position: absolute;
			}
			.circle1{
				border:15px solid blue;
			}.circle12{
				 border:15px solid transparent;
       			 border-right-color: blue;
       			 z-index: 2;
			}
			.circle2{
				border:15px solid black;
	        	left: 280px;
			}
			.circle22{
				border:15px solid transparent;
			    border-bottom-color: black;
			    border-right-color: black;
			    left: 280px;
			    z-index: 2;
			}
			.circle3{
				border:15px solid red;
	        	left: 560px;
			}.circle32{
				border:15px solid transparent;
		        border-left-color: red;
		        left: 560px;
		        z-index: 2;
			}
			.circle4{
				border:15px solid yellow;
	        	left: 140px;
	        	top:100px;
			}
			.circle5{
				border:15px solid green;
	        	left: 420px;
	        	top:100px;
			}
			.circle52{
				border:15px solid transparent;
		        border-left-color: green;
		        left: 420px;
		        top:100px;
		        z-index: 2;
			}
		</style>
	</head>
	<body>
		<div id="" style="padding: 25% 25%;">

		<div class="aa">
			<div class="circle1"></div>
			<div class="circle12"></div>
			<div class=" circle2"></div>
			<div class=" circle22"></div>
			<div class=" circle3"></div>
			<div class=" circle32"></div>
			<div class=" circle4"></div>
			<div class=" circle5"></div>
			<div class=" circle52"></div>
		</div>
					
		</div>
	</body>
</html>