释放双眼，带上耳机，听听看~！
五环
把五环做成一个浮动，总是位于屏幕中央的效果。
难点
-
定位的练习 position ：fixed
-
位于body中间的时候 left：50%；top:50%;
-
css内部样式表的使用 style=\"text/css\"
方法
- 使用border-radius: 50%再加上z-index设置层叠关系
- 首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。
设计须知
-
div的作用:div是一个块级元素。它可以将html分割成独立的、不同的部分。如果用id和class来标记div，那么该标签便可以被css所使用变的更有效，通过id或class设计各种的样式。
设计细节
html的设计：
首先给5个环设置class用来css文件关联样式，并把这5个环放置一个父级div中
div class =\"plat\">
<div class=\"a1\"></div>
<div class=\"a2\"></div>
<div class=\"a3\"></div>
<div class=\"a4\"></div>
<div class=\"a5\"></div>
<div>css样式设计：
-
通过绑定html中设置好的class，然后绘制五个环的形状和大小还有位置
.a1,.a2,.a3,.a4,.a5{ position:absolute; width: 100px; height: 100px; background-color: transparent; border: 10px solid; border-radius: 110px; } -
绘制每个环的颜色和位置：
.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; } -
设计父级div的位置：
首先要知道，我们设计的5环是在div内部，所以调整div的位置便可以实现浏览器居中i效果。
.plat{
position: fixed;
top: 50%;
left: 50%;
margin-left:-140px;
margin-top: -70px;
width: 280px;
height: 140px;
}代码
<!DOCTYPE html>
<html >
<head>
<meta charset=\"UTF-8\">
<title>居中五环</title>
<style type=\"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;
}
</style>
<body>
<div class =\"plat\">
<div class=\"a1\"></div>
<div class=\"a2\"></div>
<div class=\"a3\"></div>
<div class=\"a4\"></div>
<div class=\"a5\"></div>
<div>
</body>
</html>效果
