比尔云BierYun--阿里云最新优惠活动
阿里云优惠码丨阿里云代金券

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

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>

效果

原文地址https://www.cnblogs.com/gzyc/p/10604474.html

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

强烈推荐

高性能SSD云服务器ECS抗攻击,高可用云数据库RDS