如何实现太极图

如何实现太极图：

---

如何实现的呢：

下面我来教大家：

首先在标签里建div盒子：代码如下

 
     

         
          
         
      
     

         
           
         
    



.whb(@w, @h, @back) { 
width: @w;  **宽
height: @h;   **高
background-color: @back;   **背景
}

这个是设置 　宽 　高 　背景 　的简写；

---

先给每一个标签起一个class名字：

然后在css里面写入样式！

现在写

样式如下：

.tai {
    .whb(300px, 600px, #fff); 
    margin: 0 auto;
    border: 2px solid #000;
    border-radius: 0px 500px 500px 0px;
}
.ji {
    .whb(300px, 600px, #000);
    margin: 0 auto;
    border: 2px solid #000;
    border-radius: 500px 0px 0px 500px;
}

这是会出现两个半圆：这是再给.div2设置的定位

position:relative
top:0px;
left:0px;

如下图：

.ji {
    .whb(300px, 600px, #000);
    margin: 0 auto;
    border: 2px solid #000;
    border-radius: 500px 0px 0px 500px;
    position: relative;
    top: -604px;
    left: -293px;
    }

这是会出现一个圆！

在往下就是写每一个

里面的每一个样式同意的给每一个定位同样：

position:relative
top:0px;
left:0px;

代码下图:

.tai-1 {
        display: block;
        .whb(295px, 295px, #fff);
        border: 2px solid #fff;
        border-radius: 50%;
        position: relative;
        top: -1px;
        left: -140px;
        z-index: 2;
}

  .ji-1 {
        display: block;
        .whb(300px, 300px, #000);
        border: 2px solid #000;
        border-radius: 50%;

        position: relative;
        top: 298px;
        left: 150px;
        z-index: 1;
    }

这是会现实出大该的八卦图形：

最后在给每一个标签设置是同样的样式：

代码如下：

  i {
            display: block;
            .whb(70px, 70px, #000);
            border: 2px solid #000;
            border-radius: 50%;
            margin: 110px auto;
        }
  i {
            display: block;
            .whb(70px, 70px, #fff);
            border: 2px solid #fff;
            border-radius: 50%;
            margin: 110px auto;
        }

这是一个完整的八卦图就实现出您的面页上！

完整的样式：

代码如下:

.tai {
    .whb(300px, 600px, #fff);
    margin: 0 auto;
    border: 2px solid #000;
    border-radius: 0px 500px 500px 0px;

    .tai-1 {
        display: block;
        .whb(295px, 295px, #fff);
        border: 2px solid #fff;
        border-radius: 50%;
        position: relative;
        top: -1px;
        left: -140px;
        z-index: 2;

        i {
            display: block;
            .whb(70px, 70px, #000);
            border: 2px solid #000;
            border-radius: 50%;
            margin: 110px auto;
        }
    }
}

.ji {
    .whb(300px, 600px, #000);
    margin: 0 auto;
    border: 2px solid #000;
    border-radius: 500px 0px 0px 500px;
    position: relative;
    top: -604px;
    left: -293px;

    .ji-1 {
        display: block;
        .whb(300px, 300px, #000);
        border: 2px solid #000;
        border-radius: 50%;
        position: relative;
        top: 298px;
        left: 150px;
        z-index: 1;

        i {
            display: block;
            .whb(70px, 70px, #fff);
            border: 2px solid #fff;
            border-radius: 50%;
            margin: 110px auto;
        }
    }
}

这就是一个完整的太极图代码