五环
把五环做成一个浮动, 总是位于屏幕中央的效果.
难点
定位的练习 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>
效果
来源: https://www.cnblogs.com/gzyc/p/10604474.html