太极图php代码,如何实现太极图

如何实现太极图：

如何实现的呢：

下面我来教大家：

首先在

标签里建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;

}

}

}

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