五环
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>五环</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="wuhuan.css">
</head>
<body>
<div class="wuhuan">
<div class="blue"><div class="blue1"><div class="black"><div class="black1"><div class="red"><div class="red1"><div class="yellow"><div class="yellow1"><div class="green"><div class="green1"></div></div></div></div></div></div></div></div></div>
</div>
</div><div class="wenzi">奥林匹克标志(Olympic Logo /Symbole Olympique/Olympic Rings)是<br>由皮埃尔·德·顾拜旦先生于1913年构思设计的，是由《奥林匹克宪章》确定的，<br>也被称为奥运五环标志，它是世界范围内最为人们广泛认知的奥林匹克运动会标<br>志。它由5个奥林匹克环套接组成，有蓝、黄、黑、绿、红5种颜色。环从左到右互<br>相套接，上面是蓝、黑、红环，下面是黄、绿环。整个造形为一个底部小的规则梯形。
</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><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>
</html>
css代码
.wuhuan{
position:fixed;
left:200px;
top:100px;
}
.wenzi{
color:green;
}
.blue{
width:100px;
height:100px;
position:relative;
left:100px;
top:100px;
padding:10px;
border:10px solid blue;
border-radius:50%;
}
.blue1{
width:100px;
height:100px;
background-color:transparent;
border-radius:50%;
}
.black{
width:100px;
height:100px;
position:absolute;
left:150px;
top:-10px;
padding:10px;
border:10px solid black ;
border-radius:50%;
}
.black1{
width:100px;
height:100px;
background-color:transparent;
border-radius:50%;
}
.red{
width:100px;
height:100px;
position:absolute;
left:150px;
top:-10px;
padding:10px;
border:10px solid red ;
border-radius:50%;
}
.red1{
width:100px;
height:100px;
background-color:transparent;
border-radius:50%;
}
.yellow{
width:100px;
height:100px;
position:absolute;
left:-265px;
top:50px;
padding:10px;
border:10px solid yellow ;
border-radius:50%;
}
.yellow1{
width:100px;
height:100px;
background-color:transparent;
border-radius:50%;
}
.green{
width:100px;
height:100px;
position:absolute;
left:150px;
top:-10px;
padding:10px;
border:10px solid green ;
border-radius:50%;
}
.green1{
width:100px;
height:100px;
background-color:transparent;
border-radius:50%;
}
