admin 管理员组

文章数量: 887021

TEST

先来一张完成图

 

首先我们需要知道绝对定位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.通过渐变方式分为黑白两部分，通过这个网站可以在线生成渐变，/

#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嵌套，千万不要将级别弄错了哦。

本文标签： test

版权声明：本文标题：TEST 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687254564h81643.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。