五环的编写

最新推荐文章于 2021-06-10 03:31:26 发布

原创最新推荐文章于 2021-06-10 03:31:26 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

django 专栏收录该内容

33 篇文章

订阅专栏

本文探讨了使用绝对定位实现复杂网页布局的方法，通过具体实例展示了如何利用CSS属性如width、height、border、border-radius等创建圆形布局，并确保布局在不同屏幕尺寸下保持一致。文章还介绍了如何通过调整margin、left、top等属性实现元素的精确位置控制。

  <div class="plat">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>
</div>
       


 *{
        margin-left: 0;
        margin-top: 0;
    }
    
    .circle1,
    .circle2,
    .circle3,
    .circle4,
    .circle5{
        width: 200px;
        height: 200px;
        border:10px solid red;
        /*border,需要多个元素，尺寸，solid，和颜色200px是内园，外圆加20px*/
        border-radius: 50%;
    
    }
    
    .plat{
        position: absolute;
        left:50%;
        top: 50%;
        width: 680px;
        height: 380px;
        margin-top: -190px;
        margin-left: -340px;
        border: 1px solid black;
    }
    
    .circle1{
        border-color: black;
        position: absolute;
        left: 230px;
    }
    
    .circle2{
        border-color: yellow;
        position: absolute;
        left: 460px;
        z-index: 1;
    }
    .circle3{
        border-color: #2b669a;
        position: absolute;
        left: 345px;
        top: 160px;
        z-index: 2;
    }
    .circle4{
        border-color: red;
    }
    .circle5{
        border-color: #a94442;
        position: absolute;
        left: 115px;
        top: 160px;
    }