奥运五环图片
奥运五环代码实现要点
①在页面上用html+css3画出五个圆环（要点）
②将五个圆环以“奥运五环”的方式排列起来（要点）
③给五个环各上一个颜色
④让画出来的奥运五环水平垂直居中（要点）
奥运五环html5+css3代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5+CSS3如何实现盒子div上下左右/水平垂直居中？奥运五环代码实例，奥运五环怎么做？</title>
<style>
.radios{
width: 160px;
height: 160px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
}
div:nth-child(1){
margin-top: -150px;
margin-left: -320px;
border: 20px solid blue;
}
div:nth-child(2){
margin-top: -150px;
margin-left: -100px;
border: 20px solid #000;
}
div:nth-child(3){
margin-top: -150px;
margin-left: 120px;
border: 20px solid red;
}
div:nth-child(4){
margin-top: -50px;
margin-left: -210px;
border: 20px solid yellow;
}
div:nth-child(5){
margin-top: -50px;
margin-left: 10px;
border: 20px solid #59b200;
}
</style>
</head>
<body>
<div class="radios"></div>
<div class="radios"></div>
<div class="radios"></div>
<div class="radios"></div>
<div class="radios"></div>
</body>
</html>奥运五环代码成品
奥运五环代码难点解析
说明：本代码是采用html5+css3写成的，主要考点是画圆、定位、垂直居中
本代码是做五个div正方形小盒子，然后用border和border-radius配合把盒子变成圆形。再用position: absolute绝对定位给五个圆圈定位，然后用margin调整定位后的位置。
大家有什么不懂得评论在下方！
