爆肝三个晚上，成功高仿出Win 11的部分界面【持续更新】【萌新也能看的懂】【开源了,强烈建议收藏】

企业开发 2023-04-08 13:44:07 阅读次数: 0

前言：此代码中的Id选择器部分（#text0 - #text18,#aa - #ar）因属性相同所以可以写在同一行，继而可以去掉多余部分减小文件的字节大小值。且此版本只完成了一点点，后续每完成一部分都将更新一次。

PS:阅读本教程，你需要拥有以下语言的基础知识：HTML,CSS,JavaScript,Jquery

经测试360浏览器与Chorme浏览器显示正常，IE9显示异常。

目录

Hello，大家好，你们的菜鸟哥又回来了。在上个星期我发现了GitHub上一位大佬写了一个DeskTop项目：Win 11 in React，于是我就点进去看了一下，感觉UI界面的还原与设计的应用还挺不错。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
体验网站地址:https://win11.blueedge.me/
GitHub开源地址:https://github.com/blueedgetechno/windows11

看完后的我当时在想，要不我自己也做一个高仿版本出来玩玩，于是我便开始了我的制作之旅。

好了，废话不多说，上车拿代码。
在这里插入图片描述

1.界面演示

在这里插入图片描述

在这里插入图片描述

2.DeskTop代码（代码有点大，你要忍一下）

<!doctype html>
<html lang="zh">
<head>
    <title>Win 11</title>
    <meta charset="GBK">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="https://win11.blueedge.me/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script type="text/JavaScript">
    
    <!-- 调用本地程序（已废弃） -->
    <!-- 编写一个回调函数（同上） -->
        function ax(cmd){
      
      
            var ax = ActiveXobject("WScript.Shell");
            ax.run(cmd);
        }
        <!-- 当鼠标移入logo border时背景转换为透明度为0.8 -->
        $(document).ready(function(){
      
      
            $("#P0,#img0,div1000").hover(function(){
      
      
                $("div1000").addClass("BColora");
            });
            $("div1000").mouseout(function(){
      
      
                $("div1000").removeClass("BColora");
            });
        });
        $(document).ready(function(){
      
      
            $("#P1,#img1,div999").hover(function(){
      
      
                $("div999").addClass("BColora");
            });
            $("div999").mouseout(function(){
      
      
                $("div999").removeClass("BColora");
            });
        });
        $(document).ready(function(){
      
      
            $("#a,div98").hover(function(){
      
      
                $("div98").addClass("BColor");
            });
            $("div98").mouseout(function(){
      
      
                $("div98").removeClass("BColor");
            });
        });
                $(document).ready(function(){
      
      
            $("#b,div97").hover(function(){
      
      
                $("div97").addClass("BColor");
            });
            $("div97").mouseout(function(){
      
      
                $("div97").removeClass("BColor");
            });
        });
                $(document).ready(function(){
      
      
            $("#c,div96").hover(function(){
      
      
                $("div96").addClass("BColor");
            });
            $("div96").mouseout(function(){
      
      
                $("div96").removeClass("BColor");
            });
        });
                        $(document).ready(function(){
      
      
            $("#d,div95").hover(function(){
      
      
                $("div95").addClass("BColor");
            });
            $("div95").mouseout(function(){
      
      
                $("div95").removeClass("BColor");
            });
        });
                        $(document).ready(function(){
      
      
            $("#e,div94").hover(function(){
      
      
                $("div94").addClass("BColor");
            });
            $("div94").mouseout(function(){
      
      
                $("div94").removeClass("BColor");
            });
        });
                            $(document).ready(function(){
      
      
            $("#f,div93").hover(function(){
      
      
                $("div93").addClass("BColor");
            });
            $("div93").mouseout(function(){
      
      
                $("div93").removeClass("BColor");
            });
        });
                            $(document).ready(function(){
      
      
            $("#g,div92").hover(function(){
      
      
                $("div92").addClass("BColor");
            });
            $("div92").mouseout(function(){
      
      
                $("div92").removeClass("BColor");
            });
        });
                                    $(document).ready(function(){
      
      
            $("#aa,#text0,div-97").hover(function(){
      
      
                $("div-97").addClass("AColor");
            });
            $("div-97").mouseout(function(){
      
      
                $("div-97").removeClass("AColor");
            });
        });
                                            $(document).ready(function(){
      
      
            $("#ab,#text1,div-96").hover(function(){
      
      
                $("div-96").addClass("AColor");
            });
            $("div-96").mouseout(function(){
      
      
                $("div-96").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#ac,#text2,div-95").hover(function(){
      
      
                $("div-95").addClass("AColor");
            });
            $("div-95").mouseout(function(){
      
      
                $("div-95").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#ad,#text3,div-94").hover(function(){
      
      
                $("div-94").addClass("AColor");
            });
            $("div-94").mouseout(function(){
      
      
                $("div-94").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#ae,#text4,div-93").hover(function(){
      
      
                $("div-93").addClass("AColor");
            });
            $("div-93").mouseout(function(){
      
      
                $("div-93").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#af,#text5,div-92").hover(function(){
      
      
                $("div-92").addClass("AColor");
            });
            $("div-92").mouseout(function(){
      
      
                $("div-92").removeClass("AColor");
            });
        });
               $(document).ready(function(){
      
      
            $("#ag,#text6,div-91").hover(function(){
      
      
                $("div-91").addClass("AColor");
            });
            $("div-91").mouseout(function(){
      
      
                $("div-91").removeClass("AColor");
            });
        });
                       $(document).ready(function(){
      
      
            $("#ah,#text7,div-90").hover(function(){
      
      
                $("div-90").addClass("AColor");
            });
            $("div-90").mouseout(function(){
      
      
                $("div-90").removeClass("AColor");
            });
        });
                       $(document).ready(function(){
      
      
            $("#ai,#text8,div-89").hover(function(){
      
      
                $("div-89").addClass("AColor");
            });
            $("div-89").mouseout(function(){
      
      
                $("div-89").removeClass("AColor");
            });
        });
                       $(document).ready(function(){
      
      
            $("#aj,#text9,div-88").hover(function(){
      
      
                $("div-88").addClass("AColor");
            });
            $("div-88").mouseout(function(){
      
      
                $("div-88").removeClass("AColor");
            });
        });
                       $(document).ready(function(){
      
      
            $("#ak,#text10,div-87").hover(function(){
      
      
                $("div-87").addClass("AColor");
            });
            $("div-87").mouseout(function(){
      
      
                $("div-87").removeClass("AColor");
            });
        });
                       $(document).ready(function(){
      
      
            $("#al,#text11,div-86").hover(function(){
      
      
                $("div-86").addClass("AColor");
            });
            $("div-86").mouseout(function(){
      
      
                $("div-86").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#am,#text12,div-85").hover(function(){
      
      
                $("div-85").addClass("AColor");
            });
            $("div-85").mouseout(function(){
      
      
                $("div-85").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#an,#text13,div-84").hover(function(){
      
      
                $("div-84").addClass("AColor");
            });
            $("div-84").mouseout(function(){
      
      
                $("div-84").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#ao,#text14,div-83").hover(function(){
      
      
                $("div-83").addClass("AColor");
            });
            $("div-83").mouseout(function(){
      
      
                $("div-83").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#ap,#text15,div-82").hover(function(){
      
      
                $("div-82").addClass("AColor");
            });
            $("div-82").mouseout(function(){
      
      
                $("div-82").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#aq,#text16,div-81").hover(function(){
      
      
                $("div-81").addClass("AColor");
            });
            $("div-81").mouseout(function(){
      
      
                $("div-81").removeClass("AColor");
            });
        });
        $(document).ready(function(){
      
      
            $("#ar,#text17,div-80").hover(function(){
      
      
                $("div-80").addClass("AColor");
            });
            $("div-80").mouseout(function(){
      
      
                $("div-80").removeClass("AColor");
            });
        });

    </script>
            <!-- 利用Canvas画一个键盘输入法图标(已废除，用图片代替) -->
    <script type="text/javascript">
var K=document.getElementById("a");
var kb=K.getContext("2d");
kb.fillStyle="#000000";
kb.fillRect(3,2,1,1);
kb.fillRect(7,2,1,1);
kb.fillRect(11,2,1,1);
kb.fillRect(15,2,1,1);
kb.fillRect(5,5,1,1);
kb.fillRect(9,5,1,1);
kb.fillRect(13,5,1,1);
kb.fillRect(3,8,13.5,1);
    </script>
<!-- 时间 -->
<script>
function Time(){
      
      
	var a=new Date();
	var TW=new Array(7);
	TW[0]="Sunday";
	TW[1]="Monday";
	TW[2]="Tuesday";
	TW[3]="Wednesday";
	TW[4]="Thursday";
	TW[5]="Friday";
	TW[6]="Saturday";
	var h=a.getHours();
	var m=a.getMinutes();
	m = zero(m);
	document.getElementById('txt').innerHTML=a.getFullYear()+"/"+(a.getMonth()+1)+"/"+a.getDate();
	document.getElementById('txta').innerHTML=TW[a.getDay()];
	document.getElementById('txtb').innerHTML=a.getHours()+":"+m;
	t=setTimeout(function(){
      
      Time()},500);
}
function zero(i){
      
      
	if (i<10){
      
      
		i="0" + i;
	}
	return i;
}
</script>
    <!-- APP内容显示部分 -->
    <script>
        $(document).ready(function(){
      
      
            $("div98").click(function(){
      
      
                $("div-100").slideToggle();
            });
        });
    </script>
    <!-- 底部菜单栏 -->
    <style type="Text/css">
    body{
      
      
    background:url(https://p0.ssl.img.360kuai.com/t01aeec593c74f077c1.jpg?size=820x471);
    background-size:cover;
    }
        .TaskMenu{
      
      
        background-color:rgba(255,255,255,0.8);
        position:fixed;
        display: -webkit-flex;
        display: flex;
        bottom:0px;
        width:100%;
        height:40px;
        margin-left:-0.53125em;
        }
    </style>
    <!-- 应用logo -->
    <style type="text/css">
        .ContentMenu{
      
      
        display: -webkit-flex;
        display: flex;
        left:640px;
        bottom:-5px;
        position:fixed;
        width:280px;
        height:40px;
        }
        .Border{
      
      
        width:32px;
        height:32px;
        border-radius:5px;
        }
        .BColor{
      
      
        background-color:rgba(255,255,255,0.8);
}
.BColora{
      
      
        background-color:rgba(255,255,255,0.3);
}
        #AppLogo{
      
      
            margin:5px;
        }
#a{
      
      }
#b{
      
      }
#c{
      
      }
#d{
      
      }
#e{
      
      }
#f{
      
      }
#g{
      
      }
    </style>
    <!-- 右侧任务栏 -->
    <style type="text/css">
        #RightTask{
      
      
        display: -webkit-flex;
        display: flex;
        left:1380px;
        bottom:-5px;
        position:fixed;
        width:220px;
        height:40px;
        }
        #hide{
      
      
            width:20px;
            height:40px;
        }
        #A{
      
      
            margin-top:14px;
            margin-left:8px;
        }
        polygon{
      
      
        stroke:black;
        }
#h{
      
      }
#i{
      
      }
#j{
      
      }
#k{
      
      }
#l{
      
      }
#m{
      
      }
#n{
      
      }
#o{
      
      }
    </style>
    <!-- 应用内容 -->
    <style type="text/css">
    #Body999{
      
      }
        #BackGround{
      
      
            background-color:rgba(240,255,255,.94);
            display:none;
            padding:5px;
            margin-left:35%;
            width:545px;
            height:530px;
            margin-top:10%;
            border-radius:10px;
            position:fixed;
        }
        @media screen and (max-height:440px) and (min-height:0px){
      
      
            #BackGround{
      
      
            margin-top:-13%;
            }
        }
       @media screen and (min-height:880px){
      
      
                #BackGround{
      
      
                    margin-top:19%;
            }
        }
        .ap{
      
      
        margin-left:55px;
        font-size:3px;
        position:relative;
        margin-top:38px;
        }
        #apart{
      
      
        margin:20px;

        }
                .AColor{
      
      
        background-color:white;
        WIDTH:50PX;
        HEIGHT:50PX;
        MARGIN-LEFT:-50PX;
        MARGIN-TOP:-20PX;
}
        #text0{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
         #text1{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
         #text2{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
         #text3{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
         #text4{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
         #text5{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                 #text6{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text7{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text8{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text9{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text10{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text11{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text12{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
         #text13{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text14{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text15{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text16{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text17{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                         #text18{
      
      
        margin-left:28px;
        margin-top:-5px;
        font-size:1px;
        width:10px;
        height:10px;
        }
                #ABorder{
      
      
        margin-top:-5px;
        margin-left:25px;
        width:80px;
        height:54px;
        position:fixed;
        border-radius:5px;
        }
         #aa{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                #ab{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
        #ac{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
        #ad{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
        #ae{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
        #af{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                #ag{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #ah{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #ai{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #aj{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #ak{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #al{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #am{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #an{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #ao{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #ap{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #aq{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
                        #ar{
      
      
        margin-top:10px;
        margin-left:30px;
        font-family:"微软雅黑";
        width:24px;
        height:25px;
        }
        #RC{
      
      
        width:80px;
        height:60px;
        position:fixed;
        }
        #GJBG{
      
      
        width:555px;
        height:60px;
        background-color:rgba(224,224,224,0.9);
        border-radius:0px 0px 10px 10px;
        }
        #title{
      
      
        margin-left:55px;
        font-size:3px;
        position:relative;
        margin-top:38px;
        font-family:"微软雅黑";
        }
    </style>
    <!-- Basic Desktop APPs -->
    <style type="tetx/css">
        #BDAA,#BDAA1{
      
      
        width:100px;
        height:100px;
        POSITION:FIXED;
        }
        #img0,#img1{
      
      
        font-family:"微软雅黑";
            font-size:2px;
            color:white;
            margin-top:10px;
            position:fixed;
        }
    #P0,P1{
      
      }
    </style>
    <!-- Zooming animation(缩放动画)-->
    <style type="text/css">
        .za:active{
      
      
           transform:scale(.7);
        }
    </style>
    <!-- Microsoft Edge-->
    <style type="text/css">
        #ME{
      
      
        background-color:green;
            font-family:"微软雅黑";
            width:200px;
            height:45px;
            margin-left:35%;
            margin-top:5%;
            display:none;
            position:relative;
        }
    </style>
</head>
<body onload="Time()">
<div100 class="TaskMenu">
    <div99 class="ContentMenu">
        <div98 class="Border">
        <div id="AppLogo">
        <img id="a" class="za" width="22" height="22" src="https://win11.blueedge.me/img/icon/home.png">
        </div>
        </div98>
        <div97 class="Border" style="margin-left:5px;">
            <div id="AppLogo">
                <img id="b" class="za" width="22" height="22" src="https://win11.blueedge.me//img/icon/search.png">
            </div>
        </div97>
        <div96 class="Border" style="margin-left:5px;">
            <div id="AppLogo">
                <img id="c"  class="za" width="22" height="22" src="https://win11.blueedge.me//img/icon/widget.png">
                 </div>
        </div96>
        <div95 class="Border" style="margin-left:5px;">
            <div id="AppLogo">
                <img id="d"  class="za" width="22" height="22" src="https://win11.blueedge.me//img/icon/settings.png">
                 </div>
        </div95>
        <div94 class="Border" style="margin-left:5px;">
            <div id="AppLogo">
                <img id="e"  class="za" width="22" height="22" src="https://win11.blueedge.me//img/icon/explorer.png">
                 </div>
        </div94>
        <div93 class="Border" style="margin-left:5px;">
            <div id="AppLogo">
                <img id="f"  class="za" width="22" height="22" src="https://win11.blueedge.me//img/icon/edge.png">
                 </div>
        </div93>
        <div92 class="Border" style="margin-left:5px;">
            <div id="AppLogo">
                <img id="g"  class="za" width="22" height="22" src="https://win11.blueedge.me//img/icon/store.png">
                 </div>
        </div92>
    </div99>
    <div91 id="RightTask">
        <div90 id="hide">
            <svg id="A"  xmlns="http://www.w3.org/2000/svg" version="1.2" height="5">
    <polygon points="4.69,0.5 -280,290"
   style="fill:lime;stroke-width:1;fill-rule:evenodd;"/>
	   <polygon points="4.69,0.5 350,290"
   style="fill:lime;stroke-width:1;fill-rule:evenodd;"/>
</svg>
    </div90>
        <div88 id="hide" style="margin-left:10px;margin-top:6px;"><img id="i" src="https://win11.blueedge.me/img/icon/ui/wifi.png" style="transform:rotate(45deg);"width="18"height="18">
</div88>
        <div87 id="hide" style="margin-left:10px;margin-top:10px;"><img id="j" src="https://win11.blueedge.me/img/icon/ui/battery.png" width="18"></div87>
        <div86 id="hide" style="margin-left:10px;margin-top:9px;"><img id="k" src="https://win11.blueedge.me/img/icon/ui/audio.png" width="20"></div86>

        <div85 id="hide" style="font-size:1px;margin-left:10px;margin-top:-8px;">
            <div84 id="txtb"style="font-size:1px;margin-left:12px;"></div84>
	        <div83 id="txta" style="margin-left:4px;margin-top:-2px;font-size:1px;position:fixed;"></div83>
            <div82 id="txt" style="margin-left:-2px;font-size:1px;margin-top:12px;position:fixed;"></div82>
        </div85>
        <div81 id="hide" style="margin-left:45px;margin-top:9px;"><img id="l" src="file:///C:/Users/Administrator/Desktop/.idea/Win%2011/information%20box.png" width="18"></div81>
        <div80  style="margin-top:-6px;margin-left:10px;" ><img id="m" src="file:///C:/Users/Administrator/Desktop/.idea/Win%2011/%E9%9A%90%E8%97%8F%E6%A0%8F.png"></div80>
    </div91>
</div100>
</body>
<!-- APP内容部分 -->
<body1000>
    <div-100 id="BackGround">
        <div-99 class="ap">Pinned</div-99>
        <div-98>
            <input type="button"value="All apps"style="text-align:left;width:80px;height:20px;font-size:1px;border-radius:3px;margin-left:350px;margin-top:38px;position:relative;"><p style="color:rgba(120,120,120,0.9);font-size:13px;margin-left:510px;position:relative;margin-top:-19px;"> > </p></input>
        </div-98>
        <!-- 第一行Desktop APP-->
        <div-97 id="ABorder"><img id="aa"  class="za" src="https://win11.blueedge.me//img/icon/edge.png"><p id="text0">Edge</p>
        </div-97>
                <div-96 id="ABorder"style="margin-left:110px;"><img id="ab"  class="za" src="https://win11.blueedge.me//img/icon/winWord.png"><p id="text1"style="margin-left:25px;">Word</p>
        </div-96>
                        <div-95 id="ABorder"style="margin-left:195px;"><img id="ac"  class="za" src="https://win11.blueedge.me//img/icon/powerpoint.png"><p id="text2"style="margin-left:5px;">PowerPoint</p>
        </div-95>
                        <div-94 id="ABorder"style="margin-left:270px;"><img id="ad"  class="za" src="https://win11.blueedge.me//img/icon/onenote.png"><p id="text3"style="margin-left:15px;width:50px;height:20px;">OnrNote</p>
        </div-94>
                        <div-93 id="ABorder"style="margin-left:345px;"><img id="ae"  class="za" src="https://win11.blueedge.me//img/icon/mail.png"><p id="text4">Mail</p>
        </div-93>
                        <div-92 id="ABorder"style="margin-left:420px;"><img id="af"  class="za" src="https://win11.blueedge.me//img/icon/todo.png"><p id="text5"style="margin-left:25px;width:50px;height:20px;">To Do</p>
        </div-92>
        <!-- 第二行Desktop APP -->
                        <div-91 id="ABorder"style="margin-top:45px;"><img id="ag"  class="za" src="https://win11.blueedge.me//img/icon/store.png"><p id="text6">Store</p>
        </div-91>
        <div-90 id="ABorder"style="margin-top:45px;margin-left:110px;"><img id="ah" class="za"  src="https://win11.blueedge.me//img/icon/photos.png"><p id="text7"style="margin-left:20px;">Photos</p>
        </div-90>
        <div-89 id="ABorder"style="margin-top:45px;margin-left:195px;"><img id="ai" class="za"  src="https://win11.blueedge.me//img/icon/yphone.png"><p id="text8"style="margin-left:8px;width:80px;height:20px;">Your Phone</p>
        </div-89>
        <div-88 id="ABorder"style="margin-top:45px;margin-left:270px;"><img id="aj" class="za"  src="https://win11.blueedge.me//img/icon/notepad.png"><p id="text9"style="margin-left:15px;">Notepad</p>
        </div-88>
        <div-87 id="ABorder"style="margin-top:45px;margin-left:345px;"><img id="ak" class="za"  src="https://win11.blueedge.me//img/icon/board.png"><p id="text10"style="margin-left:2px;width:80px;height:20px;">White Board</p>
        </div-87>
        <div-86 id="ABorder"style="margin-top:45px;margin-left:420px;"><img id="al" class="za"  src="https://win11.blueedge.me//img/icon/calculator.png"><p id="text11"style="margin-left:15px;width:80px;height:20px;">Calculator</p>
        </div-86>
        <!-- 第三行Desktop APP-->
        <div-85 id="ABorder"style="margin-top:95px;"><img id="am"  class="za" src="https://win11.blueedge.me//img/icon/calendar.png"><p id="text12"style="margin-left:15px;width:80px;height:20px;">Calendar</p>
        </div-85>
        <div-84 id="ABorder"style="margin-top:95px;margin-left:110px;"><img id="an"  class="za" src="https://win11.blueedge.me//img/icon/twitter.png"><p id="text13"style="margin-left:22px;">Twitter</p>
        </div-84>
        <div-83 id="ABorder"style="margin-top:95px;margin-left:195px;"><img id="ao"  class="za" src="https://win11.blueedge.me//img/icon/code.png"><p id="text14"style="margin-left:16px;width:80px;height:20px;">VS Code</p>
        </div-83>
        <div-82 id="ABorder"style="margin-top:95px;margin-left:270px;"><img id="ap"  class="za" src="https://win11.blueedge.me//img/icon/terminal.png"><p id="text15"style="margin-left:18px;">Terminal</p>
        </div-82>
        <div-81 id="ABorder"style="margin-top:95px;margin-left:345px;"><img id="aq" class="za"  src="https://win11.blueedge.me//img/icon/github.png"><p id="text16"style="margin-left:22px;">Github</p>
        </div-81>
        <div-80 id="ABorder"style="margin-top:95px;margin-left:420px;"><img id="ar" class="za"  src="https://win11.blueedge.me//img/icon/discord.png"><p id="text17"style="margin-left:20px;">Discord</p>
        </div-80>
        <!-- Recommended -->
        <div-79 style="margin-left:55px;margin-top:180px;font-size:1px;position:fixed;">Recommended</div-79>
        <div-78 id="RC"style="margin-left:55px;margin-top:210px;"><img width="24"height="25" src="https://win11.blueedge.me//img/icon/mail.png">
            <h6 style="margin-left:34px;font-size:2px;margin-top:-34px;COLOR:rgba(0,0,0,0.8);">Mail</h6>
        <p style="font-size:1px;color:#A0A0A0;width:100px;height:30px;margin-left:35px;margin-top:-5px;">Recently Added</p>
        </div-78>
        <div-77 id="RC"style="margin-left:300px;margin-top:210px;"><img width="24"height="25" src="https://win11.blueedge.me//img/icon/github.png">
            <h6 style="margin-left:34px;font-size:2px;margin-top:-34px;COLOR:rgba(0,0,0,0.8);">Github</h6>
        <p style="font-size:1px;color:#A0A0A0;width:100px;height:30px;margin-left:35px;margin-top:-5px;">Recently Added</p>
        </div-77>
        <div-76 id="RC"style="margin-left:55px;margin-top:265px;"><img width="24"height="25" src="https://win11.blueedge.me//img/icon/twitter.png">
            <h6 style="margin-left:34px;font-size:2px;margin-top:-34px;COLOR:rgba(0,0,0,0.8);">Twitter</h6>
        <p style="font-size:1px;color:#A0A0A0;width:100px;height:30px;margin-left:35px;margin-top:-5px;">Recently Added</p>
        </div-76>
        <div-75 id="RC"style="margin-left:300px;margin-top:265px;"><img width="24"height="25" src="https://win11.blueedge.me//img/icon/code.png">
            <h6 style="margin-left:34px;font-size:2px;margin-top:-34px;COLOR:rgba(0,0,0,0.8);">VS Code</h6>
        <p style="font-size:1px;color:#A0A0A0;width:100px;height:30px;margin-left:35px;margin-top:-5px;">Recently Added</p>
        </div-75>
        <div-74 id="RC"style="margin-left:55px;margin-top:320px;"><img width="24"height="25" src="https://win11.blueedge.me//img/icon/terminal.png">
            <h6 style="margin-left:34px;font-size:2px;margin-top:-34px;COLOR:rgba(0,0,0,0.8);">Terminal</h6>
        <p style="font-size:1px;color:#A0A0A0;width:100px;height:30px;margin-left:35px;margin-top:-5px;">Recently Added</p>
        </div-74>
        <div-73 id="RC"style="margin-left:300px;margin-top:320px;"><img width="24"height="25" src="https://win11.blueedge.me//img/icon/spotify.png">
            <h6 style="margin-left:34px;font-size:2px;margin-top:-34px;COLOR:rgba(0,0,0,0.8);">Spotify</h6>
        <p style="font-size:1px;color:#A0A0A0;width:100px;height:30px;margin-left:35px;margin-top:-5px;">Recently Added</p>
        </div-73>
        <div-72 id="GJBG"style="margin-left:-5px;margin-top:405px;position:fixed;">
            <img width="30" height="30"style="border-radius:45px;margin-top:15px;margin-left:55px;"src="http://img2.v.tmcdn.net/img/h000/h03/img201208081203190.jpg">
            <div-71 style="width:14px;height:2px;background-color:#707070;transform:rotate(90deg);left:12.5px;margin-left:1017px;margin-top:27px;position:fixed;position:fixed;"></div-71>
<i class="fa fa-circle-o-notch" style="font-size:20px;color:#707070;margin-left:374px;margin-top:25px;position:fixed;"></i>
        </div-72>
    </div-100>
</body1000>
<body999>
    <div1000 id="BDAA"STYLE="width:82px;height:82px;margin:-5px;position:fixed;">
        <img id="P0" class="za" width="34"height="34"src="https://win11.blueedge.me/img/icon/bin0.png"style="margin-top:14px;margin-left:24px;">
        <p id="imga"style=" font-family:微软雅黑;
            font-size:2px;
            color:white;
            margin-top:-4px;
            text-align:center;
            position:relative;">Recycle Bin</p></div1000>
    <div999 id="BDAA1"STYLE="width:82px;height:82px;margin-top:80px;margin-left:-5px;position:fixed;">
        <img id="P1" class="za" width="34"height="34"src="https://win11.blueedge.me//img/icon/edge.png"style="margin-top:14px;margin-left:24px;">
        <p id="imga"style=" font-family:微软雅黑;
            font-size:2px;
            color:white;
            margin-top:-4px;
            text-align:center;
            position:relative;">Microsoft Edge</p></div999>
</body999>
</html>

好了，这次源代码先更新到这，如果明早点赞过5个，星期六立马更新Microsoft Edge的代码与详解。

我是Python菜中菜的菜鸟，记得点个赞支持下，谢谢各位小伙伴了！
小伙伴们点赞、收藏、评论，一键三连走起呀，你们的点赞与评论是我更新的源动力，我们下期见❤❤

猜你喜欢

转载自blog.csdn.net/weixin_47585269/article/details/120000767
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022