html+css制作五环(代码极简)

释放双眼,带上耳机,听听看~!

五环

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

难点

  1. 定位的练习 position :fixed

  2. 位于body中间的时候 left:50%;top:50%;

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

方法

  1. 使用border-radius: 50%再加上z-index设置层叠关系
  2. 首先我们用5个块级元素来形成5个环的颜色和形状,并把这5个环放置到一个父级容器div内,再将这个父级元素div放置到浏览器中间位置。

设计须知

  1. 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样式设计:

  1. 通过绑定html中设置好的class,然后绘制五个环的形状和大小还有位置

     .a1,.a2,.a3,.a4,.a5{
                         position:absolute;  
                         width: 100px;
                         height: 100px;
                         background-color: transparent;
                         border: 10px solid;
                         border-radius: 110px;
                 }
  2. 绘制每个环的颜色和位置:

             .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;
             }
  3. 设计父级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>

效果

人已赞赏
随笔日记

Spring @ModelAttribute

2020-11-9 4:01:28

随笔日记

【RAY TRACING THE REST OF YOUR LIFE 超详解】 光线追踪 3-7 混合概率密度

2020-11-9 4:01:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索