TEST | 运用position:absolute做一张太极图

最新推荐文章于 2024-07-23 22:34:05 发布

Errorong

最新推荐文章于 2024-07-23 22:34:05 发布

阅读量532

点赞数

分类专栏：前端小练习

本文链接：https://blog.csdn.net/r_banyan0820/article/details/81086026

版权

前端小练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先来一张完成图

首先我们需要知道绝对定位absolute是以父元素左上角为原点进行定位

1.给body加一个颜色，并新建一个圆形的div使它居中

<div id="yinyang"></div>

body {background-color: grey;}
#yinyang {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: 28%;
            left: 40%;          
        }

2.通过渐变方式分为黑白两部分，通过这个网站可以在线生成渐变，http://www.colorzilla.com/gradient-editor/

#yinyang {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: 28%;
            left: 40%;
            background: linear-gradient(to bottom, #ffffff 0%, #ffffff 46%, #000000 46%, #000000 100%);            
        }//不同的线性方向有to top/left/right/bottom

3.在大圆里在加入两个圆，填充黑色和白色，绝对定位铺开。

<div id="yinyang">
        <div class="yin">
        </div>
        <div class="yang">
        </div>
    </div>

.yin{
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #000;
            position: absolute;
            top:22%;
            display: inline-block;
        }
        .yang{
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top:22%;
            left: 50%;
            display: inline-block;
        }

在这里我的top及left是使用百分比，追求完美精准的朋友可以使用数值。为了使两个块级元素div不分行显示，我将其加入display:inline-block;使它同行排列。这里可以使用float:left;进行浮动排列，但是使用浮动不要忘了将父级清除浮动。

4.和第三步同理，我们加入最后的两个小圆点，同样填充一黑一白

 <div id="yinyang">
        <div class="yin">
            <div class="white"></div>
        </div>
        <div class="yang">
            <div class="black"></div>
        </div>
    </div>

.white {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            display: inline-block;
            top:41%;
            left: 41%;
        }
        .black {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #000;
            position: absolute;
            display: inline-block;
            top:41%;
            left: 41%;
        }

总结：到此一个太极图就做完啦，非常简单，只需要记住一个最重要的知识点，absolute以父级为标准，相对父级进行移动，太极图就是三层div嵌套，千万不要将级别弄错了哦。