已加入部分文字,连接!
可自行修改,网站搞个导航页面不错的!
我不是代码的创造者,我只是代码的搬运工!

1[1]


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WorkGroups</title>
 <link rel="stylesheet" href="box/style.css" type="text/css">
<link rel="icon" href="animated_favicon.gif" type="image/gif" >
 </head>
<body>
    <div class="box">
        <div class="taiji">
            <div class="tj_1 tj_big1"></div>
            <div class="tj_1 tj_big2"></div>
            <div class="tj_2 tj_s1">
            <div class="tj_ss tj_w"></div>
            </div>
            <div class="tj_2 tj_s2">
            <div class="tj_ss tj_b"></div>
            </div>
        </div>
      </div>    
<hr width="20%"> <!-- 水平线长度 --> 
   <div align="center">     
    <h1>Hello Word</h1>
    <p>人生路漫漫,慢慢人生路!</p>    
    <p>天上永远不会掉馅饼,只会掉陷阱!</p>
    <p>除了中彩票,所有一夜暴富的方法都写在《刑法》里!</p>
    <p>成功是一个相关名词,他会给你带来很多不相关的亲戚!</p>
    <p>穿别人的鞋走别人的路,让别人既找不到鞋又找不到路!</p>
    <p>很多人都说我朴实节俭,会过日子的人,其实我只是单纯没钱而已!</p>
    <p>我的兴趣爱好可分为静态和动态两种,静态就是睡觉,动态就是翻身!</p>
    <a href="#">①</a>| 
    <a href="#" target="_blank" title="测试注解,新窗口打开">⑧</a>
    </div>
<hr width="50%"><!-- 水平线长度 --> 
 <div align="center">copyright © </div>
</body>
</html>

另外一种独立页面八卦没加入任何内容,慢,大八卦


<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title> Canvas 绘图</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="cloud">
  <meta name="Keywords" content="H5 Canvas 绘图">
  <meta name="Description" content="使用Html5 Canvas 绘制图形 八卦图">
 </head>
 
    <style type="text/css">
        #canvas{
            display:block;
            margin: 125px auto;
            animation: rotate 3s linear 0s infinite normal;
            -webkit-animation: rotate 3s linear 0s infinite normal;
            -moz-animation: rotate 3s linear 0s infinite normal;
            -ms-animation: rotate 3s linear 0s infinite normal;
            -o-animation: rotate 3s linear 0s infinite normal;
        }
        @-webkit-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
        @-moz-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
        @-ms-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
        @-o-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
    </style>
 
 <body>
    <canvas id="canvas">
            您的浏览器不支持Canvas
    </canvas>
 </body>
 
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
    //    初始化Canvas
    function init_canvas(canvas_id){        
        var canvas = document.getElementById("canvas");
        canvas.width = 500;
        canvas.height = 500;
        return canvas.getContext("2d");
    }
    
    // 八卦图
    function ph1(context){
        //初始化参数
        var c_white = "white";
        var c_black = "black";
        //绘制座标数组
        var x_y_arr = [ [250, 350], [30, 0], [250, 150], [100, 0], [250, 250] ];
        var r = Math.PI * 2;
        //1.先绘制一个完整的空心圆
        context.beginPath();
        context.arc(x_y_arr[4][0], x_y_arr[4][1], 200, 0, r);
        context.stroke();
        //2.绘制半黑半白  默认为黑色
        context.beginPath();
        context.arc(x_y_arr[4][0], x_y_arr[4][1], 200, Math.PI*3/2, Math.PI/2, true);
        context.fill();
        //3.绘制一黑一白两个半圆
        context.fillStyle = c_white;
        context.beginPath();
        context.arc(x_y_arr[2][0], x_y_arr[2][1], x_y_arr[3][0], x_y_arr[3][1], r);
        context.fill();
 
        context.fillStyle = c_black;
        context.beginPath();
        context.arc(x_y_arr[0][0], x_y_arr[0][1], x_y_arr[3][0], x_y_arr[3][1], r);
        context.fill();
        //4.绘制两个小圆
        context.fillStyle = c_black;
        context.beginPath();
        context.arc(x_y_arr[2][0], x_y_arr[2][1], x_y_arr[1][0], x_y_arr[1][1], r);
        context.fill();
         
        context.fillStyle = c_white;
        context.beginPath();
        context.arc(x_y_arr[0][0], x_y_arr[0][1], x_y_arr[1][0], x_y_arr[1][1], r);
        context.fill();
    }
 
    $(function(){
        var context = init_canvas("canvas");
        ph1(context);
    });
</script>
</html>

另外一种独立页面八卦没加入任何内容,快,小八卦


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #yin-yang{
                position: absolute;
                margin:auto;
                top:0;
                right:0;
                bottom:0;
                left:0;
                /*上面一段代码是垂直居中定位*/
                width:192px;
                height:96px;
                background-color:white ;
                border-color: black;
                border-style: solid;
                border-width: 2px 2px 98px 2px;
                border-radius: 100%;
                animation-name: turn;   /*动画名称*/
                animation-delay: 1s;  /*动画延迟时间*/
                animation-direction: normal; /*动画效果有反复交递等*/
                animation-duration: 1s;   /*动画执行时间*/
                animation-timing-function: linear; /*动画执行方法此为匀速方法*/
                animation-iteration-count: infinite; /*执行动画的次数此为无限次数*/
            }
            #yin-yang:before{
                content:'';
                position: absolute;
                top:50%;
                left:0;
                width:24px;
                height:24px;
                background-color: white;
                border:36px solid black;
                border-radius: 100%;
            }
            #yin-yang:after{
                content:'';
                position: absolute;
                top:50%;
                right: 0;
                width:24px;
                height:24px;
                background-color: black;
                border:36px solid white;
                border-radius: 100%;
            }
            @keyframes turn{
                0{transform: rotate(0);}
                100%{transform: rotate(360deg);}
            }
        </style>
    </head>
    <body>
        <div id="yin-yang"></div>
    </body>
</html>

我不是代码的创造者,我只是代码的搬运工!