五环 html css,html+css制作五环（代码极简）

奥运五环

把奥运五环做成一个浮动，总是位于屏幕中央的效果。

难点

定位的练习 position ：fixed

位于body中间的时候 left：50%；top:50%;

css内部样式表的使用 style="text/css"

代码

居中五环

.a1,.a2,.a3,.a4,.a5{

position:absolute;

width: 100px;

height: 100px;

background-color: transparent;

border: 10px solid;

border-radius: 110px;

}

.plat{

position: fixed;

top: 50%;

left: 50%;

margin-left:-140px;

margin-top: -70px;

width: 280px;

height: 140px;

}

.a1{

border-color: blue;

left: 0;

top: 0;

}

.a2{

border-color: black;

top: 0px;

left: 130px;

z-index: 4;

}

.a3{

border-color: yellow;

top: 0px;

left: 260px;

z-index: 4;

}

.a4{

border-color: red;

top: 65px;

left: 65px;

z-index: 5;

}

.a5{

border-color: green;

top: 65px;

left: 198px;

z-index: 6;

}

效果