Html+CSS实现奥运五环的制作超详细讲解，附源码下载

使用html+css来制作一个奥运五环，并且使它始终在浏览器的中央。本人使用的是VsCode（用起来比较简单，舒服）进行的代码的编写，浏览器是google chrome。
1.第一步：设置一个装五环的容器plat。
2.第二步：初始化

*{
    margin:0;
    padding:0
}

3.第三步：画圆。
本项目要画五个圆圈，所以我们设置5个div组件，使其class属性分别为circle1,circle2,circle3,circle4,circle5.然后在.css文件中设置每个圆圈的宽高属性。这里将border-radius设置为50%就可以画一个圆圈,因为div为块级元素，独占一行，所形成的五个圆就会如下：

所以我们把五个圆设置定位position: absolute;此时五个圆就都会重合，代码如下

.circle1,
.circle2,
.circle3,
.circle4,
.circle5
{
    position: absolute;
    width: 100px;
    height: 100px;
    border:10px solid black;
    border-radius: 50%;
}

4.第四步，分别设置每个圆圈
分别设置5个园的border-color，自己计算距离浏览器左边的left值，使得前面三个圆圈分离出来并且在同一行，即将其top值设置为0。当设置在第四个圆圈的时候，需要换行，即将其top值设置为60px即可。代码如下：

.circle1{
    border-color: blue;
    left:0;
    top:0;
}
.circle2{
    border-color: burlywood;
    left:130px;
    top:0;
    z-index: 3;/*使这个黄色的circle放在上面*/
}
.circle3{
    border-color:red;
    left:260px;
    top:0;
}
.circle4{
    border-color: palegreen;
    left:65px;
    top:60px;
}
.circle5{
    
    border-color:purple ;
    left:196px;
    top:60px;
}

此时就能顺利画出一个五环啦！！运行效果图如下：

5.第五步：设置容器，使五环居中显示
设置plat容器，先设置其宽高正好能容下整个五环，为了使五环能随着父级容器的运动而运动，所以要给plat设置一个定位，这里的值只能是absolute，因为如果是relative五环不可能到中间去（这里我也有点不懂为什么只能设置为absolute，希望有大佬可以教教我）。
然后设置left:50%;top:50%;margin-left为负的容器的宽度的1/2，
margin-top为容器height值的1/2.这样就可以使五环居中了（无论怎么移动）。代码如下：

.plat{
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-190px;
    margin-top:-90px;
    /*border:4px solid pink;隐藏掉辅助用的边框*/
    width: 380px;
    height: 180px;
}

至此，奥运五环的制作就结束了。
源码下载：奥运五环
提取码：0na3