如何实现太极图

如何实现太极图:




如何实现的呢:

下面我来教大家:
首先在<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;
        }
    }
}

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


推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 1,956评论 0 40
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,074评论 1 88
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 1,464评论 0 30
  • CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器...
    百作不死的学习阅读 615评论 0 7
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 1,473评论 0 5