HTML画太极图

在画太极图之前,先分析一下它的构成

1、首先看到的它是一个圆;使用代码画一个圆容易(画一个正方形,然后使用border-radius),但是想要画出太极图中间的黑白边界的“S”,却不容易;所以,我们想到使用两个半圆合并成一个圆(1号和2号,使用float浮动合并)。这样,我们可以把2号的半圆背景设置成黑色,然后用白色3号圆的覆盖。


代码:

/*左半部分1号*/
        .left{
            width:200px;
            height:400px;
            /*border:1px solid #000;*/
            border-radius:200px 0 0 200px;
            float:left;
        }
/*右半部分2号*/
        .right{
            width:200px;
            height:400px;
            /*border:1px solid #000;*/
            border-radius:0 200px 200px 0;
            background-color:#000;
            float:left;
        }

2、接下来,我们来画3号的4号圆,这个就容易画了;把3号和4号挪到对应位置,我们使用了相对定位(position)

代码:

 .left_one,.right_one{
            width:200px;
            height:200px;
            border-radius:100px;
            position:relative;
        }
        .left_one{
            margin-left:100px;
            background-color:#fff;

        }
        .right_one{
            margin-top:200px;
            margin-left:-100px;
            background-color:#000;

3、然后,画3号和4号当中的小圆,容易看出,它们都是在3号4号圆中居中的,所以使用绝对定位,使它们居中

 .left_one div,.right_one div{
            width:60px;
            height:60px;
            /*border:1px solid #000;*/
            border-radius:30px;
            position:absolute;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
         }
        .left_one div{
            background-color:#000;
        }
        .right_one div{
            background-color:#fff;
        }

4、最后,可以在最外面再加一层div包裹它们(其实第一步分析的时候就应该加上),加上阴影就完成了。
阅读更多
文章标签: HTML 前端
个人分类: HTML 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭