如何实现太极图：
如何实现的呢：
下面我来教大家：
首先在<body>标签里建div盒子：代码如下
<body>
<div class="tai">
<span class="tai-1">
<i></i>
</span>
</div>
<div class="ji">
<span class="ji-1">
<i></i>
</span>
</div>
</body>
.whb(@w, @h, @back) {
width: @w; **宽
height: @h; **高
background-color: @back; **背景
}
这个是设置 宽 高 背景 的简写；
先给每一个标签起一个class名字：
然后在css里面写入样式！
现在写<div>样式如下：
.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;
}
这是会出现一个圆！
在往下就是写每一个<div>里面的每一个<span>样式同意的给每一个<span>定位同样：
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>标签设置是同样的样式：
代码如下：
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;
}
}
}
这就是一个完整的太极图代码
网友评论