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

先来一张完成图

 

首先我们需要知道绝对定位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嵌套,千万不要将级别弄错了哦。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值