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