html css 奥运五环,用css写一个有趣的奥运五环~。

用css实现奥运五环样式，并且于页面居中显示，不随页面滚动条而移动，一直处于居中位置。

html代码部分就一个div里边包含5个div。代码如下：

Document

div.main{

position: fixed;

left: 50%;

top: 50%;

margin-left: -190px;

margin-top: -95px;

}

div.cir1{

width: 100px;

height: 100px;

border:10px solid #00f;

border-radius: 50%;

z-index: 1;

position: relative;

}

div.cir2{

width: 100px;

height: 100px;

border: 10px solid #ff0;

border-radius: 50%;

z-index: 2;

position: absolute;

left: 60px;

top: 50px;

}

div.cir3{

width: 100px;

height: 100px;

border: 10px solid #000;

border-radius: 50%;

z-index: 1;

position: absolute;

left: 130px;

top: 0px;

}

div.cir4{

width: 100px;

height: 100px;

border: 10px solid #0f4;

border-radius: 50%;

z-index: 1;

position: absolute;

left:200px;

top:50px;

}

div.cir5{

width: 100px;

height: 100px;

border: 10px solid #f00;

border-radius: 50%;

z-index: 2;

position: absolute;

left: 260px;

top: 0px;

}

效果图：

本文地址：https://blog.csdn.net/loringray/article/details/85947668