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

最新推荐文章于 2023-07-03 09:36:07 发布

ddm2865

最新推荐文章于 2023-07-03 09:36:07 发布

阅读量829

点赞数

原文链接：http://www.cnblogs.com/gzyc/p/10604474.html

版权

五环

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

难点

定位的练习 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

ddm2865

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css制作五环（代码极简）

五环把五环做成一个浮动，总是位于屏幕中央的效果。难点定位的练习 position ：fixed位于body中间的时候 left：50%；top:50%;css内部样式表的使用 style="text/css"方法使用border-radius: 50%再加上z-index设置层叠关系首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div...
复制链接

扫一扫