课外天地 李树青学习天地Web技术 → 课上练习代码——利用CSS实现的太极图


  共有14087人关注过本帖树形打印复制链接

主题:课上练习代码——利用CSS实现的太极图

帅哥哟,离线,有人找我吗?
admin
  1楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 管理员
等级:管理员 帖子:1942 积分:26670 威望:0 精华:34 注册:2003/12/30 16:34:32
课上练习代码——利用CSS实现的太极图  发帖心情 Post By:2016/10/17 16:30:59 [只看该作者]

<html>
<head>
    <meta http-equiv="Content-Type" c/>
    <style>
        #yin-yang {
            width: 200;
            height: 100;
            background: #EEE;
            border-color: red;
            border-style: solid;
            border-width: 2px 2px 100 2px;
            border-radius: 100%;
            position: relative;
            /**作为子元素的定位父元素,也就是说,如果某个元素相对定位了,那其下的子孙元素,在没有其他定位元素隔离的情况下,将以这个父元素的包围框为基准做绝对定位。**/
       
}

        #yin-yang:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            background: #EEE;
            border: 40px solid red;
            border-radius: 100%;
            width: 20px;
            height: 20px;
        }

        #yin-yang:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            background: red;
            border: 40px solid #EEE;
            border-radius: 100%;
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html>



图片点击可在新窗口打开查看此主题相关图片如下:无标题.png
图片点击可在新窗口打开查看



 回到顶部
帅哥哟,离线,有人找我吗?
admin
  2楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 管理员
等级:管理员 帖子:1942 积分:26670 威望:0 精华:34 注册:2003/12/30 16:34:32
另一个版本  发帖心情 Post By:2016/10/24 17:16:46 [只看该作者]


图片点击可在新窗口打开查看此主题相关图片如下:无标题.png
图片点击可在新窗口打开查看

<html>

<head>

    <meta http-equiv="Content-Type" c/>

    <style>

        #yin-yang {

            width: 100;

            height: 200;

            background: #EEE;

            border-color: red;

            border-style: solid;

            border-width: 2px 2px 2px 100;

            border-radius: 100%;

            position: relative;

            /**作为子元素的定位父元素,也就是说,如果某个元素相对定位了,那其下的子孙元素,在没有其他定位元素隔离的情况下,将以这个父元素的包围框为基准做绝对定位。**/

        }

        #yin-yang:before {

            content: "";

            position: absolute;

            top: 0;

            left: -50%;

            background: #EEE;

            border: 40px solid red;

            border-radius: 100%;

            width: 20px;

            height: 20px;

        }

        #yin-yang:after {

            content: "";

            position: absolute;

            top: 50%;

            left: -50%;

            background: red;

            border: 40px solid #EEE;

            border-radius: 100%;

            width: 20px;

            height: 20px;

        }

    </style>

</head>

<body>

<div id="yin-yang"></div>

</body>

</html>


 回到顶部