researches.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
<meta name="keywords" content="YDOOK, Jinwei Lin">
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?acf5508bf34b223f602304bd5cfa143a";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>
    <title>技术科研 - YDOOK</title>
    <link rel="icon" href="./pictures/icon/Y.ico" />

</head>

<body>
    <div class="HeadLineM">
    <div class="ToolBtn" onclick="Btn1()">YDOOK</div>
    <div class="ToolBtn" onclick="Btn2()">关于</div>
    <div class="ToolBtn" onclick="Btn3()">作者</div>
    <div class="ToolBtn" onclick="Btn4()">各类教程</div>
    <div class="ToolBtn" onclick="Btn5()">技术科研</div>
    <div class="ToolBtn" onclick="Btn6()">开源项目</div>
    <div class="ToolBtn" onclick="Btn7()">旗下网站</div>
    <div class="ToolBtn" onclick="Btn9()">YDOOK Github</div>
    <div class="ToolBtn" onclick="Btn10()">YDOOK CSDN</div>
    <div class="ToolBtn" onclick="Btn16()">To English</div>

</div>
    <div class="MenuBox" id="MenuBox">
    <div class="MenuBtn" id="MenuBtn" ondblclick="MenuFold()"  onmousedown="MenuDown(event)"></div>
    <div id="MenuPanel" class="MenuPanel">
        <ul class="BigAUi"><div onclick="Menu(this, 'M1')">快速导航</div>
            <ul id="M1" class="AUi">
                <li class="ALi" onclick="thirdparty6()">YDOOK CN</li>
                <li class="ALi" onclick="thirdparty7()">YDOOK EN</li>
            </ul>
        </ul>

        <ul class="BigAUi"><div onclick="Menu(this, 'M2')">关于作者</div>
            <ul id="M2" class="AUi">
                <li class="ALi" onclick="Btn4()">各类教程</li>
                <li class="ALi" onclick="Btn5()">技术科研</li>
            </ul>
        </ul>

        <div class="NavigateBox">
            <div class="NavigateBoxLeft">
                <div class="NavigateBoxLeftBtn" onclick="Navigation('go1')">&#60;&#60;</div>
                <div class="NavigateBoxLeftBtn" onclick="Navigation('go2')">&#62;&#62;</div>
            </div>
            <div class="NavigateBoxRight">
                <div class="NavigateBoxRightBtn" onclick="Navigation('go3')">&uArr;</div>
                <div class="NavigateBoxRightBtn" onclick="Navigation('go4')">&rArr;</div>
                <div class="NavigateBoxRightBtn" onclick="Navigation('go5')">&dArr;</div>
            </div>
        </div>

    </div>
</div>

    <div class="CenterBox">
        <div class="HoldBox">
            <!-- =============================== -->
            <div class="NormalTitleBox">
                技术协助 - 科研参与
            </div>
            <!-- =============================== -->

            <div class="Content">
                <!-- ======================================================================= -->
                <div class="SubTitleBox">
                    <div class="SubTitleBtn">能力与信赖</div>
                    <div class="SubTitleCont" style="background: rgb(255, 102, 0);">
                        <div class="PictureCent" style="background: url(./pictures/gif/YOrange.gif); 
                        background-size: 100% 100%; width: 260px; height: 260px; animation: moveway 6s infinite;">
                        </div>
                    </div>
                </div>
                <!-- ======================================================================= -->

                <!-- ======================================================================= -->
                <div class="SubTitleBox">
                    <div class="SubTitleBtn">Jinwei Lin : ORCID </div>
                    <div class="SubTitleCont">
                        <a class="SubTitleItem" style="margin-left: -5px;" target="_blank" href="https://orcid.org/0000-0003-0558-6699"><h3>https://orcid.org/0000-0003-0558-6699</h3></a>
                        <br>
                        <br>
                        <br>
                        Jinwei Lin 先生的开放研究者与贡献者身份识别码: ORCID。<br>
                    </div>
                </div>
                <!-- ======================================================================= -->

                <!-- ======================================================================= -->
                <div class="SubTitleBox">
                    <div class="SubTitleBtn">联系邮件</div>
                    <div class="SubTitleCont">
                        <h3>ydookshiye@163.com</h3>
                        <hr>
                        1. 此为 Jinwei Lin 的唯一协助联系邮箱。<br>
                        2. 请不要通过其他邮箱联系 Jinwei Lin 。<br>
                        3. 来邮件请说明具体主题，比如技术科研协助。<br>
                    </div>
                </div>
                <!-- ======================================================================= -->


                <!-- ======================================================================= -->
                <div class="SubTitleBox">
                    <div class="SubTitleBtn">科研项目协助</div>
                    <div class="SubTitleCont">
                        1. 采用计算机、电子或机械等设计实施技术，辅助科研项目进展。<br>
                        2. 要求项目具有前景，能够获得预期成果，比如论文、专著、专利等。<br>
                        3. 技术类竞赛或创业竞赛，或各类创业项目的技术合作，要求具有前景。
                    </div>
                </div>
                <!-- ======================================================================= -->


                <!-- Content -->
            </div>
            <div class="BottomBox">
    <div class="BottomBoxUp">
        <div class="BottomBoxLeft">
            <div class="BottomItemLef"  onclick="Btn1()">
                首页 
            </div>
            <br>
            <br>
            <br>
            <div class="BottomItemLef" onclick="Btn2()">
                关于 
            </div>
            <br><br>
            <div class="BottomItemLef" onclick="Btn4()">
                教程
            </div>
        </div>
        <div class="BottomBoxRight">
            <div class="BottomItemRight" onclick="UpTop()">
                顶部
            </div>
            <br>
            <br>
            <br>
            <div class="BottomItemRight" onclick="Advance()">
                前进
            </div>
            <br><br>
            <div class="BottomItemRight" onclick="Return()">
                后退 
            </div>
        </div>
        
        
    </div>
    <div class="BottomBoxDown">
        <a class="ALink" style="color: white;" target="_blank" href="https://beian.miit.gov.cn/">粤ICP备19004091号 © 2019-2022 www.ydoo.com</a>
    </div>
</div>
<div class="BottomGap"></div>
        </div>
        <!-- CenterBox ======== -->
    </div>



</body>


<script>
    function UpTop() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }

    function Advance() {
        window.history.go(1);
    }

    function Return() {
        window.history.go(-1);
    }
</script>
<script>
    function MenuFold() {
        var Div = document.getElementById('MenuPanel');
        if (Div.style.display == 'none') {
            Div.style.display = 'block';
        } else {
            Div.style.display = 'none';
        }
    }

    function Menu(obj, ulID) {
        var ulDiv = document.getElementById(ulID);
        if (ulDiv.style.display == 'none') {
            ulDiv.style.display = 'block';
        } else {
            ulDiv.style.display = 'none';
        }
    }

    function GoLi(ilID) {
        var newLink = './way' + ilID + '.html'
        window.location.href = newLink;
    }

    function MenuDown(event) {
        var menubox = document.getElementById('MenuBox');
        var menubtn = document.getElementById('MenuBtn');
        var menupanel = document.getElementById('MenuPanel');

        var before_x = menubox.offsetLeft
        var before_y = menubox.offsetTop

        var down_x = event.clientX
        var down_y = event.clientY

        document.onmousemove = function (e) {
            // console.log(' \nmenubox.offsetTop = ', menubox.offsetTop);
            // console.log(' menubox.offsetLeft = ', menubox.offsetLeft);
            // console.log('\ne.clientX = ', e.clientX);
            // console.log('e.clientY = ', e.clientY);

            var move_x = e.clientX
            var move_y = e.clientY

            var new_x = move_x - down_x
            var new_y = move_y - down_y

            menubox.style.left = (before_x + new_x).toString() + 'px';
            menubox.style.top = (before_y + new_y).toString() + 'px';
        }

        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }

    // ==============================================================================
    // ==============================================================================
    // Phone
    var menubox = document.querySelector('#MenuBox');
    var menubtn = document.querySelector('#MenuBtn');
    var MenuPanel = document.querySelector('#MenuPanel');
    var maxAbleWidth = window.screen.width - 50;
    var maxAbleHeight = window.screen.height - 50;
    var phoneWTrans = 800;

    menubtn.addEventListener('touchstart', function (e) {
        if (window.screen.width < phoneWTrans) {
            // console.log('touchstart>>');

            var event = e || window.event;
            var touch = event.targetTouches[0];
            objAbleLeft = touch.clientX - menubox.offsetLeft;
            objAbleTop = touch.clientY - menubox.offsetTop;

            document.addEventListener('touchmove', preventE, { passive: false });
        }
    });
    menubtn.addEventListener('touchmove', function (e) {
        if (window.screen.width < phoneWTrans) {
            // console.log('touchmove>>');

            var event = e || window.event;
            var touch = event.targetTouches[0];
            var objtLeft = touch.clientX - objAbleLeft;
            var objtTop = touch.clientY - objAbleTop;

            if (objtLeft < 0) {
                objtLeft = 0;
            } else if (objtLeft >= maxAbleWidth) {
                objtLeft = maxAbleWidth;
            }
            if (objtTop < 0) {
                objtTop = 0;
            } else if (objtTop >= maxAbleHeight) {
                objtTop = maxAbleHeight;
            }

            menubox.style.left = objtLeft + 'px';
            menubox.style.top = objtTop + 'px';

        }
    });


    menubtn.addEventListener('touchend', function () {
        if (window.screen.width < phoneWTrans) {
            document.removeEventListener('touchmove', preventE, { passive: false });
        }
    }, { passive: false });

    function preventE(e) {
        e.preventDefault();
    }

    // ==============================================================================
    // ==============================================================================

    function MenuGo(code) {
        if (code == 'Go') {
            var obj = document.getElementById('Go1');

            if (obj.style.display == 'none') {
                obj.style.display = 'block';
            } else {
                obj.style.display = 'none';
            }
        }
    }

    function Navigation(code) {

        if (code == 'go1') {
            window.history.go(1);
        }
        if (code == 'go2') {
            window.history.go(-1);
        }
        if (code == 'go3') {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
        if (code == 'go4') {
            document.body.scrollTop = document.body.scrollHeight / 2;
            document.documentElement.scrollTop = document.body.scrollHeight / 2;
        }
        if (code == 'go5') {
            document.body.scrollTop = document.body.scrollHeight;
            document.documentElement.scrollTop = document.body.scrollHeight;
        }
        if (code == 'go6') {
            window.location.reload();
        }
    }
</script>
<script>
    function Btn1() {
        window.location.href = "./index.html";
    }
    function Btn2() {
        window.location.href = "./about.html";
    }
    function Btn3() {
        window.location.href = "./author.html";
    }
    function Btn4() {
        window.location.href = "./tutorials.html";
    }
    function Btn5() {
        window.location.href = "./researches.html";
    }
    function Btn6() {
        window.location.href = "./opensources.html";
    }
    function Btn7() {
        window.location.href = "./sonwebs.html";
    }
    function Btn9() {
        window.open("https://github.com/JYLinOK");
    }
    function Btn10() {
        window.open("https://ydook.blog.csdn.net");
    }
    function Btn16() {
        window.open('https://en.ydook.com' + window.location.pathname);
    }
</script>
<script>
    // opensource
    function opensource1() {
        window.open("https://github.com/JYLinOK/Way");
    }
    function opensource2() {
        window.open("https://github.com/JYLinOK/PyDraw");
    }
    function opensource3() {
        window.open("https://github.com/JYLinOK/MyPlayer");
    }
    function opensource4() {
        window.open("https://github.com/JYLinOK/YWeb");
    }
    function opensource5() {
        window.open("https://github.com/JYLinOK/YDB");
    }
    function opensource6() {
        window.open("https://github.com/JYLinOK/YecPad");
    }
    function opensource7() {
        window.open("https://github.com/JYLinOK/YecPen");
    }
    function opensource8() {
        window.open("https://github.com/JYLinOK/YecText");
    }
    function opensource9() {
        window.open("https://github.com/JYLinOK/FrontFollowing");
    }
    function opensource10() {
        window.open("https://github.com/JYLinOK/ydookgithub");
    }
    function opensource11() {
        window.open("https://github.com/JYLinOK/ydookweb1");
    }
    function opensource12() {
        window.open("https://github.com/JYLinOK/ydookwebinitial");
    }

    // third party
    function thirdparty0() {
        window.open("https://ydook.blog.csdn.net");
    }
    function thirdparty1() {
        window.open("https://github.com/JYLinOK");
    }
    function thirdparty2() {
        window.open("https://my.oschina.net/linjinwei");
    }
    function thirdparty3() {
        window.open("https://gitee.com/ydook");
    }
    function thirdparty4() {
        window.open("https://www.cnblogs.com/ydook/");
    }
    function thirdparty5() {
        window.open("https://www.jianshu.com/u/770c7784e3e6");
    }
    function thirdparty6() {
        window.open("https://ydook.cn");
    }
    function thirdparty7() {
        window.open("https://en.ydook.cn");
    }
    function thirdparty8() {
        window.open("https://www.zhihu.com/people/ydook.com");
    }
    
</script>


<style>
    @media only screen and (min-width: 801px) {
        body {
            background: rgb(236, 236, 236);
            margin: 0;
            padding: 0;
            text-align: center;
            position: relative;
            height: 100%;
        }

        .HeadLineM {
            /* position: fixed; */
            background: rgb(36, 131, 166);
            width: 100%;
            height: 45px;
            z-index: 10;
            left: 0px;
            top: 0px;
        }

        .ToolBtn {
            float: left;
            margin-left: 10px;
            margin-top: 3px;
            margin-bottom: 3px;
            height: 38px;
            min-width: 60px;
            padding-left: 8px;
            padding-right: 8px;
            /* background: lightseagreen; */
            font-size: 18px;
            text-align: center;
            line-height: 38px;
            color: white;
            cursor: pointer;
            user-select: none;
        }

        .ToolBtn:hover {
            background: rgb(0, 255, 242);
            color: black;
        }

        .CenterBox {
            margin: 0 auto;
            width: 1016px;
            /* background: rgb(139, 179, 218); */
            margin-top: 68px;
        }

        .HoldBox {
            position: absolute;
            margin: 0 auto;
            width: 1016px;
            min-height: 300px;
            background: rgb(255, 255, 255);
            margin-bottom: 88px;
        }

        .Content {
            width: 982px;
            margin: 0 auto;
            margin-top: 130px;
            margin-bottom: 10px;
            text-align: left;
            /* background: rgb(175, 250, 172); */
        }

        .BottomBox {
            float: left;
            width: 1016px;
            min-height: 100px;
            margin: 0 auto;
            background: rgb(6, 166, 166);
            text-align: left;
        }

        .BottomBoxLeft {
            float: left;
            width: 50%;
            height: 100%;
            /* background: rgb(65, 152, 195); */
            text-align: left;
        }

        .BottomBoxRight {
            float: left;
            width: 50%;
            height: 100%;
            /* background: rgb(192, 245, 171); */
            text-align: left;
        }

        .BottomItemLef {
            float: left;
            text-align: center;
            width: auto;
            height: 38px;
            margin: 0 auto;
            margin-top: 10px;
            margin-left: 10px;
            line-height: 38px;
            background: rgb(6, 166, 166);
            color: white;
            padding-left: 8px;
            padding-right: 8px;
            cursor: pointer;
            font-weight: bolder;
        }

        .BottomItemLef:hover {
            background: rgb(16, 138, 199);
        }

        .BottomItemRight {
            float: right;
            text-align: center;
            min-width: 60px;
            min-height: 38px;
            margin: 0 auto;
            margin-top: 10px;
            margin-right: 10px;
            line-height: 38px;
            background: rgb(6, 166, 166);
            color: white;
            padding-left: 8px;
            padding-right: 8px;
            cursor: pointer;
            font-weight: bolder;
        }

        .BottomItemRight:hover {
            background: rgb(16, 138, 199);
        }

        .BottomGap {
            float: left;
            width: 1016px;
            height: 66px;
            margin: 0 auto;
            background: rgb(236, 236, 236);
        }

        .BottomBoxUp {
            float: left;
            width: 100%;
            min-height: 80px;
            /* background: rgb(3, 88, 99); */
        }

        .BottomBoxDown {
            float: left;
            width: 100%;
            min-height: 30px;
            line-height: 30px;
            background: rgb(0, 138, 138);
            text-align: center;
            color: white;
            font-size: 13px;
        }

        .ALink {
            text-decoration: none;
            color: black;
        }

        .Pic {
            margin: 0 auto;
            text-align: center;
            /* background: rgb(231, 251, 255) no-repeat; */
        }

        .Code {
            width: 98%;
            height: auto;
            background: rgb(6, 66, 66);
            font-family: Consolas;
            padding: 10px;
            overflow-x: scroll;
            color: white;
        }

        .Note {
            width: 98%;
            min-height: 300px;
            background: rgb(226, 255, 250);
            font-family: Consolas;
            padding: 10px;
        }

        /* ============================================================ */

        .MenuBox{
            position: fixed;
            top: 50px;
            left: 10px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            /* background: rgb(166, 30, 6); */
            z-index: 10;
            background: url('./pictures/gif/Y.gif') no-repeat;
            background-size: 100% 100%;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        .MenuBtn{
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            /* background: rgb(6, 166, 166); */
            user-select: none;
            cursor: pointer;
            user-select: none;
        }
        .MenuBtn:active {
            background: rgba(0, 228, 228, 0.6);
        }

        .MenuPanel {
            float: left;
            text-align: left;
            min-width: 200px;
            min-height: 100px;
            max-height: 500px;
            border-radius: 8px;
            background: rgba(251, 255, 251, 0.8);
            overflow-y: scroll;
            scrollbar-width: none; /* Firefox */
        }
        .MenuPanel::-webkit-scrollbar {
          /* background: rgba(255, 250, 205, 0.6); */
          background: rgba(116, 106, 96, 0.6);
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }
        .MenuPanel::-webkit-scrollbar-thumb {
          background: rgba(206, 233, 233, 0.8);
          /* background: rgb(222, 233, 233); */
          border-radius:8px;
          border-radius:8px;
        }
        .MenuPanel::-webkit-scrollbar-thumb:hover {
          background: rgb(133, 233, 188);
          cursor: pointer;
        }

        /* ============================================================= */

        .ALi {
            list-style: none;
            background: rgb(252, 252, 252);
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 18px;
            cursor: pointer;
            user-select: none;
            border-radius: 2px;
            padding-left: 10px;
        }
        .ALi:hover {
            background: rgb(166, 255, 238);
        }

        .AUi {
            color: black;
            margin-left: -30px;
            list-style: none;
            background: rgba(116, 106, 96, 0.6);
            border: 1px solid rgb(0, 0, 0);
        }
        .BigAUi {
            margin-top: 0px;
            margin-bottom: 10px;
            margin-left: -30px;
            list-style: none;
            background: rgb(222, 233, 233);
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            padding-bottom: 1px;
        }
        .BigAUi:hover {
            background: rgb(167, 240, 226);
        }

        /* ============================================================= */
        /* ============================================================= */
        .NavigateBox {
            float: left;
            width: 100%;
            height: 90px;
            background: rgba(66, 66, 66, 0.3);
            cursor: pointer;
        }
        .NavigateBoxLeft {
            float: left;
            width: 50%;
            height: 90px;
            background: rgba(66, 66, 66, 0.3);
        }
        .NavigateBoxRight {
            float: right;
            width: 50%;
            height: 90px;
            background: rgba(66, 166, 166, 0.3);
        }
        .NavigateBoxLeftBtn {
            float: left;
            width: 100%;
            height: 45px;
            background: rgba(66, 66, 66, 0.3);
            color: white;
            line-height: 45px;
            font-size: 20px;
            text-align: center;
        }
        .NavigateBoxLeftBtn:hover {
            font-weight: bolder;
            color: rgb(0, 255, 255);
            background: rgba(190, 190, 190, 0.3);
        }
        .NavigateBoxRightBtn {
            float: left;
            width: 100%;
            height: 30px;
            background: rgba(66, 66, 66, 0.3);
            color: white;
            line-height: 30px;
            font-size: 20px;
            text-align: center;
        }
        .NavigateBoxRightBtn:hover {
            font-weight: bolder;
            color: rgb(0, 255, 255);
            background: rgba(190, 190, 190, 0.3);
        }
    }
</style>
<style>
    @media only screen and (max-width: 800px) {
        body {
            /* background: rgb(229, 239, 220); */
            background: rgb(210, 228, 228);
            margin: 0;
            padding: 0;
            text-align: center;
            position: relative;
            height: 100%;
        }

        .HeadLineM {
            position: absolute;
            background: rgb(31, 131, 156);
            width: 96%;
            margin-left: 2%;
            min-height: 100px;
            z-index: 10;
            left: 0px;
            top: 0px;
        }

        .ToolBtn {
            float: left;
            margin-left: 20px;
            margin-top: 5px;
            margin-bottom: 5px;
            height: 30px;
            width: auto;
            padding-left: 2px;
            padding-right: 2px;
            /* background: lightseagreen; */
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            color: white;
            cursor: pointer;
            user-select: none;
        }

        .ToolBtn:hover {
            background: rgb(2, 218, 207);
            color: black;
        }

        .CenterBox {
            position: absolute;
            margin: 0 auto;
            width: 98%;
            /* background: rgb(139, 179, 218); */
            margin-top: 90px;
            margin-left: 2%;
            margin-right: 2%;
        }

        .HoldBox {
            float: left;
            margin: 0 auto;
            width: 98%;
            margin-top: 130px;
            min-height: 300px;
            background: rgb(255, 255, 255);
            margin-bottom: 88px;
        }

        .Content {
            float: left;
            width: 96%;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: left;
            /* background: rgb(175, 250, 172); */
            padding: 2%;
        }

        .BottomBox {
            float: left;
            width: 100%;
            min-height: 100px;
            margin: 0 auto;
            background: rgb(6, 166, 166);
            text-align: left;
        }

        .BottomBoxLeft {
            float: left;
            width: 50%;
            height: 100%;
            /* background: rgb(65, 152, 195); */
            text-align: left;
        }

        .BottomBoxRight {
            float: left;
            width: 50%;
            height: 100%;
            /* background: rgb(192, 245, 171); */
            text-align: left;
        }

        .BottomItemLef {
            float: left;
            text-align: center;
            width: auto;
            height: 38px;
            margin: 0 auto;
            margin-top: 10px;
            margin-left: 10px;
            line-height: 38px;
            background: rgb(6, 166, 166);
            color: white;
            padding-left: 8px;
            padding-right: 8px;
            cursor: pointer;
        }

        .BottomItemLef:hover {
            background: rgb(16, 138, 199);
        }

        .BottomItemRight {
            float: right;
            text-align: center;
            min-width: 60px;
            min-height: 38px;
            margin: 0 auto;
            margin-top: 10px;
            margin-right: 10px;
            line-height: 38px;
            background: rgb(6, 166, 166);
            color: white;
            padding-left: 8px;
            padding-right: 8px;
            cursor: pointer;
        }

        .BottomItemRight:hover {
            background: rgb(16, 138, 199);
        }

        .BottomGap {
            float: left;
            width: 100%;
            height: 66px;
            margin: 0 auto;
            background: rgb(210, 228, 228);
        }

        .BottomBoxUp {
            float: left;
            width: 100%;
            min-height: 80px;
            /* background: rgb(3, 88, 99); */
        }

        .BottomBoxDown {
            float: left;
            width: 96%;
            min-height: 20px;
            line-height: 20px;
            background: rgb(0, 138, 138);
            text-align: center;
            color: white;
            font-size: 13px;
            padding: 2%;
        }

        .ALink {
            text-decoration: none;
        }

        .Pic {
            margin: 0 auto;
            width: auto;
            height: auto;
            background-size: 100% 100%;
            background: rgb(231, 251, 255) no-repeat;
        }

        .PicCont {
            width: 100%;
        }

        .Code {
            width: 93%;
            height: auto;
            background: rgb(6, 66, 66);
            font-family: Consolas;
            padding: 10px;
            overflow-x: scroll;
            color: white;
            font-size: 18px;
        }

        .Note {
            width: 93%;
            min-height: 300px;
            background: rgb(226, 255, 250);
            font-family: Consolas;
            padding: 10px;
            overflow-x: scroll;
        }

        /* ============================================================ */

        .MenuBox {
            position: fixed;
            top: 222px;
            left: 10px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            /* background: rgb(166, 30, 6); */
            z-index: 10;
            background: url('./pictures/gif/Y.gif') no-repeat;
            background-size: 100% 100%;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .MenuBtn {
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            /* background: rgb(6, 166, 166); */
            user-select: none;
            cursor: pointer;
        }

        .MenuBtn:active {
            background: rgb(0, 228, 228);
        }

        .MenuPanel {
            float: left;
            text-align: left;
            min-width: 200px;
            min-height: 100px;
            max-height: 300px;
            border-radius: 8px;
            background: rgba(251, 255, 251, 0.6);
            overflow-y: scroll;
            scrollbar-width: none;
            /* Firefox */
        }

        .MenuPanel::-webkit-scrollbar {
            background: rgba(116, 106, 96, 0.6);
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .MenuPanel::-webkit-scrollbar-thumb {
            background: rgba(206, 230, 219, 0.6);
            border-radius: 8px;
        }

        .MenuPanel::-webkit-scrollbar-thumb:hover {
            background: rgb(130, 223, 180);
            cursor: pointer;
        }

        /* ============================================================= */

        .ALi {
            list-style: none;
            background: rgba(233, 252, 236, 0.6);
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 18px;
            cursor: pointer;
            user-select: none;
            border-radius: 2px;
            padding-left: 10px;
        }

        .ALi:hover {
            background: rgb(166, 255, 238);
        }

        .AUi {
            color: black;
            margin-left: -30px;
            list-style: none;
            background: rgba(116, 106, 96, 0.6);
            border: 1px solid rgb(0, 0, 0);
        }

        .BigAUi {
            margin-top: 0px;
            margin-bottom: 10px;
            margin-left: -30px;
            list-style: none;
            background: rgba(222, 234, 235, 0.6);
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            padding-bottom: 1px;
        }

        .BigAUi:hover {
            background: rgba(166, 233, 226, 0.6);
        }

         /* ============================================================= */
        /* ============================================================= */
        .NavigateBox {
            float: left;
            width: 100%;
            height: 90px;
            background: rgba(66, 66, 66, 0.2);
            cursor: pointer;
        }
        .NavigateBoxLeft {
            float: left;
            width: 50%;
            height: 90px;
            background: rgba(66, 66, 66, 0.2);
        }
        .NavigateBoxRight {
            float: right;
            width: 50%;
            height: 90px;
            background: rgba(66, 166, 166, 0.2);
        }
        .NavigateBoxLeftBtn {
            float: left;
            width: 100%;
            height: 45px;
            background: rgba(66, 66, 66, 0.2);
            color: white;
            line-height: 45px;
            font-size: 20px;
            text-align: center;
        }
        .NavigateBoxLeftBtn:hover {
            font-weight: bolder;
            color: rgb(0, 255, 255);
            background: rgba(190, 190, 190, 0.2);
        }
        .NavigateBoxRightBtn {
            float: left;
            width: 100%;
            height: 30px;
            background: rgba(66, 66, 66, 0.2);
            color: white;
            line-height: 30px;
            font-size: 20px;
            text-align: center;
        }
        .NavigateBoxRightBtn:hover {
            font-weight: bolder;
            color: rgb(0, 255, 255);
            background: rgba(190, 190, 190, 0.);
        }

    }
</style>
<style>
    @media only screen and (min-width: 801px) {
        .MainTitleBox {
            width: 100%;
            height: 116px;
            margin: 0 auto;
            background: rgb(6, 166, 166);
        }

        .MainTitleBoxLeft {
            float: left;
            height: 100%;
            width: 15%;
            /* background: rgb(0, 66, 99); */
            margin-left: 1%;
        }

        .MainTitleBoxRight {
            float: left;
            height: 100%;
            width: 83%;
            /* background: rgb(130, 199, 208); */
            font-size: 38px;
            line-height: 58px;
            text-align: center;
            color: white;
            overflow: hidden;
        }

        .HeadLine {
            position: fixed;
            background: rgb(31, 131, 156);
            height: 38px;
            width: 100%;
            z-index: 10;
        }

        .IconPic {
            height: 100px;
            width: 100px;
            margin: 0 auto;
            margin-top: 8px;
            animation: moveway 3s infinite;
        }

        @keyframes moveway {
            0% {
                transform: rotateY(0deg);
            }

            30% {
                transform: rotateY(180deg);
            }

            100% {
                transform: rotateY(180deg);
            }
        }

        @keyframes moveBackground {
            0% {
                background: rgb(0, 234, 255);
            }

            50% {
                background: rgb(0, 140, 255);
            }

            100% {
                background: rgb(255, 60, 0);
            }
        }

        .SubTitleBox {
            float: left;
            margin: 0 auto;
            width: 982px;
            min-height: 100px;
            margin-top: 10px;
            margin-bottom: 50px;
            /* background: rgb(128, 211, 253); */
            /* border-bottom: 2px solid rgb(6, 66, 99); */
        }

        .SubTitleBtn {
            float: left;
            min-width: 100px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            font-size: 22px;
            padding-left: 8px;
            padding-right: 8px;
            background: rgb(6, 166, 166);
            color: white;
            user-select: none;
            text-emphasis: none;
            cursor: pointer;
            text-decoration: none;
        }

        .SubTitleBtn:hover {
            background: rgb(9, 138, 199);
        }

        .SubTitleCont {
            float: left;
            width: 960px;
            min-height: 100px;
            /* background: rgba(165, 214, 241, 0.685); */
            color: black;
            border: 1px solid rgb(6, 66, 99);
            padding: 10px;
            font-size: 20px;
            line-height: 36px;
        }

        .SubTitleItem {
            float: left;
            text-align: center;
            min-width: 60px;
            min-height: 45px;
            line-height: 45px;
            font-size: 20px;
            padding-left: 8px;
            padding-right: 8px;
            /* background: rgb(0, 114, 175); */
            /* background: rgba(198, 233, 251); */
            margin-top: 10px;
            margin-left: 20px;
            cursor: pointer;
            color: black;
            text-decoration: none;
        }

        .SubTitleItem:hover {
            background: rgb(9, 138, 199);
            color: rgb(255, 255, 255);
        }

        /* ============================================================== */

        .NormalTitleBox {
            float: left;
            width: 100%;
            min-height: 60px;
            background: rgb(6, 166, 166);
            font-size: 60px;
            line-height: 100px;
            text-align: center;
            color: white;
            overflow: hidden;
        }

        /* ============================================================== */
        .PictureCent {
            margin: 0 auto;
            background: rgb(233, 88, 8) no-repeat;
            user-select: none;
        }

        .PictureLeft {
            float: left;
            background: rgb(233, 88, 8) no-repeat;
            user-select: none;
        }

        .PictureBack {
            width: 100%;
            background: rgb(6, 166, 166) no-repeat;
            user-select: none;
        }

         /* ============================================================= */

         .HitTopBtn {
            float: left;
            min-width: 100px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            font-size: 22px;
            padding-left: 8px;
            padding-right: 8px;
            background: rgb(6, 66, 99);
            color: white;
            user-select: none;
            text-emphasis: none;
            cursor: pointer;
            text-decoration: none;
            animation: hittop 2s infinite;
        }
        @keyframes hittop {
            0% {
                background: rgb(251, 255, 0);
            }

            25% {
                background: rgb(255, 81, 0);
            }

            70% {
                background: rgb(255, 81, 0);
            }

            100% {
                background: rgb(238, 255, 0);
            }
        }

        .text_left{
            margin: 0 auto;
            text-align: left;
            /* background: rgb(128, 239, 133); */
        }

        /* ==================================================== */
        .WayNoteBox {
            width: auto;
            height: auto;
            background: orange;
        }
        .WayNoteIcon{
            float: left;
            width: 50px;
            height: 50px;
            /* background: rgb(0, 255, 34); */
        }
        .WayNoteContent {
            float: left;
            width: 100%;
            min-height: 50px;
            padding-left: 10px;
            line-height: 50px;
            font-size: 26px;
            background: rgb(222, 255, 255);
        }
        .WayNoteContent:hover {
            background: rgb(88, 255, 238);
        }
    }
</style>
<style>
    @media only screen and (max-width: 800px) {
        .MainTitleBox {
            width: 100%;
            height: 116px;
            margin: 0 auto;
            background: rgb(6, 166, 166);
        }

        .MainTitleBoxLeft {
            float: left;
            height: 100%;
            width: 15%;
            /* background: rgb(0, 66, 99); */
            margin-left: 1%;
        }

        .MainTitleBoxRight {
            float: left;
            height: 100%;
            width: 83%;
            /* background: rgb(130, 199, 208); */
            font-size: 38px;
            line-height: 58px;
            text-align: center;
            color: white;
            overflow: hidden;
        }


        .Slogan {
            margin-left: 10%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 36px;
            color: rgb(0, 128, 160);
        }

        .IconPic {
            height: 46px;
            width: 46px;
            margin: 0 auto;
            margin-top: 6px;
            animation: moveway 3s infinite;
        }

        @keyframes moveway {
            0% {
                transform: rotateY(0deg);
            }

            30% {
                transform: rotateY(180deg);
            }

            100% {
                transform: rotateY(180deg);
            }
        }

        .SubTitleBox {
            float: left;
            margin: 0 auto;
            width: 100%;
            min-height: 100px;
            margin-top: 10px;
            margin-bottom: 50px;
            /* background: rgb(128, 211, 253); */
            /* border-bottom: 2px solid rgb(6, 66, 99); */
        }

        .SubTitleBtn {
            float: left;
            min-width: 100px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            font-size: 22px;
            padding-left: 8px;
            padding-right: 8px;
            background: rgb(6, 166, 166);
            color: white;
            user-select: none;
            text-emphasis: none;
            cursor: pointer;
            text-decoration: none;
        }

        .SubTitleBtn:hover {
            background: rgb(9, 138, 199);
        }

        .SubTitleCont {
            float: left;
            width: 93%;
            min-height: 100px;
            /* background: rgba(165, 214, 241, 0.685); */
            color: black;
            border: 1px solid rgb(6, 166, 166);
            padding: 10px;
            font-size: 20px;
            line-height: 36px;
        }

        .SubTitleItem {
            float: left;
            text-align: center;
            min-width: 60px;
            min-height: 45px;
            line-height: 45px;
            font-size: 20px;
            padding-left: 8px;
            padding-right: 8px;
            /* background: rgb(0, 114, 175); */
            /* background: rgba(198, 233, 251); */
            margin-top: 10px;
            margin-left: 20px;
            cursor: pointer;
            color: black;
            text-decoration: none;
        }

        .SubTitleItem:hover {
            background: rgb(9, 138, 199);
            color: rgb(255, 255, 255);
        }

        /* ============================================================== */

        .NormalTitleBox {
            float: left;
            width: 100%;
            min-height: 60px;
            background: rgb(6, 166, 166);
            font-size: 30px;
            line-height: 60px;
            text-align: center;
            color: white;
            overflow: hidden;
        }

        /* ============================================================== */
        .PictureCent {
            margin: 0 auto;
            background: rgb(233, 88, 8) no-repeat;
            user-select: none;
        }

        .KeyPic {
            float: left;
            user-select: none;
            pointer-events:none;
        }

        .PictureLeft {
            float: left;
            background: rgb(233, 88, 8) no-repeat;
            user-select: none;
        }

        .PictureBack {
            width: 100%;
            background: rgb(6, 166, 166) no-repeat;
            user-select: none;
        }
        /* ============================================================= */

        .HitTopBtn {
            float: left;
            min-width: 100px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            font-size: 22px;
            padding-left: 8px;
            padding-right: 8px;
            background: rgb(6, 66, 99);
            color: white;
            user-select: none;
            text-emphasis: none;
            cursor: pointer;
            text-decoration: none;
            animation: hittop 2s infinite;
        }
        @keyframes hittop {
            0% {
                background: rgb(251, 255, 0);
            }

            25% {
                background: rgb(255, 81, 0);
            }

            70% {
                background: rgb(255, 81, 0);
            }

            100% {
                background: rgb(238, 255, 0);
            }
        }

        .text_left{
            margin: 0 auto;
            text-align: left;
            /* background: rgb(128, 239, 133); */
        }

        /* ==================================================== */
        .WayNoteBox {
            width: auto;
            height: auto;
            background: orange;
        }
        .WayNoteIcon{
            float: left;
            width: 50px;
            height: 50px;
            /* background: rgb(0, 255, 34); */
        }
        .WayNoteContent {
            float: left;
            width: 96%;
            min-height: 50px;
            padding-left: 10px;
            line-height: 50px;
            font-size: 26px;
            background: rgb(222, 255, 255);
        }
        .WayNoteContent:hover {
            background: rgb(88, 255, 238);
        }
    }
</style><script>console.log('\\A/ Hi, Way! - An easy and fast front-end generator framework.');</script>




</html>