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

奥运五环

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

1.直接上代码

	
<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>

2.其中主要的知识点

border-radius: 50%;
以及边框颜色的继承父类的颜色transparent
border-left-color和zindex:实现环相交处颜色的显示

3.页面效果

从零开始学HTML&&CSS&&JavaScrip——JavaScrip之奥运五环_第1张图片

你可能感兴趣的:(前端基础)