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

最新推荐文章于 2025-01-20 11:46:32 发布
最新推荐文章于 2025-01-20 11:46:32 发布
阅读量8k 收藏 6
点赞数 21
分类专栏： Windows 11前端版 Python教程 Html/CSS/JavaScript/jQuey
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47585269/article/details/120000767
版权

jquery html css 大前端 windows phone 7

前言：此代码中的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菜中菜的菜鸟，记得点个赞支持下，谢谢各位小伙伴了！
小伙伴们点赞、收藏、评论，一键三连走起呀，你们的点赞与评论是我更新的源动力，我们下期见❤❤

NSIS教程(3): 现代用户界面(Modern UI)
while(1) { smile(); }
01-18 8万+
NSIS的现代用户界面(Modern UI)只是相对于传统（丑陋）的界面而言的“现代”而已。它定义在MUI2.nsh（注：nsh文件类似C++中的头文件，可以被其他模块包含引用）中，如果要使用MUI2界面，则需要包含该文件： !include "MUI2.nsh" MUI2界面和传统界面不同之处在于，传统界面使用的Page(或PageEx)语法来标识显示哪些页面，如： PageEx
C++ Qt零基础入门进阶与企业级项目实战教程与学习方法分享
琅嬛福地
09-21 4246
介绍Qt环境搭建、QtCreator / VS2019的基本使用方法，Qt整体架构、Qt信号机制，Qt内存管理等知识。
仿windows桌面系统
10-22
仿windows桌面系统,含桌面菜单拖动，右键，工具栏，提醒，桌面分屏等功能
程序员大神用 React “复刻”实现了一个 Windows 11
osfront的博客
07-27 1469
【导语】：使用 React 实现的网页版 Windows 11，不用更换系统也能提前体验。 简介 Windows 11 in React 是使用纯前端技术实现的在线 Windows 11 体验版，如 React、CSS（SCSS）、JS，这不是一个完整的操作系统，但是 UI 界面跟 Win 11是一致的，还可以体验 Edge 浏览器、应用商店等功能。 开始菜单、搜索菜单和其他小工具 桌面和右键单击操作 侧面导航和日历 浏览器、应用商店、终端、计算器 记事本、VS Code、白板 文件资源管理器
Win7如何免费升级为Win10
最新发布
cheese的博客
01-20 443
进入链接之后，按下F12，进入开发者工具，点击设备仿真。版本选择出现-关掉开发者工具-选择。👈点击链接进行下载镜像文件。选择语言简体中文-点击确认。下载完成后，解压安装。如果对您有帮助，请您。
.Net MAUI 自定义仿Win11对话框
sswi321的博客
01-31 1155
.NET MAUI 自定义对话框，模仿Win11的 Dialog
Windows 11：面子仿苹果，里子反苹果
weixin_42255349的博客
06-28 521
热点追踪/深度探讨/ 实地探访 /商务合作时隔 6 年，微软带来了新一代操作系统 Windows 11。新系统无处不在的圆角设计，以及对毛玻璃材质的模拟等细节都让人联想到 macO...
歪果仁网站自制Windows 11
TheBlueMarble的博客
11-21 624
天哪，和真的一模一样！ 首先，外观方面，还是挺不错的，“控制中心”的位置改变了，轻点网络小图标，就会有一个全新的“控制中心”。里边儿比Windows 10要简洁一点，还有个“Theme”按键，点一下就可以切换为“深色模式”： 其次，APP方面，“Store”是能点开的，里边儿的APP目不暇接： 就是不能下载???? 但它配备一个VS Code，还是能运行的那种： 下面来看一看“开始”菜单： 这里软件挺多的，但只有10%左右的才能打得开...... 桌面上有一个“Spootify”,..
实现Android仿WIN8磁贴点击效果的源码解析
在当前的移动操作系统中，Android系统以其开源和高度定制性获得了广泛的使用。开发者和用户都热衷于在Android设备上实现各种视觉效果，以提供更吸引人和更直观的用户体验。其中，模仿Windows 8系统的磁贴效果在...
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
Android 上千实例源码分析以及开源分析
吧主
04-12 9268
Android 上千实例源码分析以及开源分析（百度云分享） 要下载的直接翻到最后吧，项目实例有点多。 首先 介绍几本书籍(下载包中)吧。 01_Android系统概述 02_Android系统的开发综述 03_Android的Linux内核与驱动程序 04_Android的底层库和程序 05_Android的JAVA虚拟机和JAVA环境 06_Android的GUI系统 07_A
HTML 实现仿 Windows 桌面主题特效
06-02
使用技术：HTML+CSS+JS 使用场景：HTML大作业、个人网站、网页模板 适用人群：初学者、资深专家均可 说明：仿 Windows 桌面主题特效，双击页面内的桌面应用即可打开，源码完整，代码注释清晰。 在线演示地址：https://haiyong.site/win/
jQuery UI实现模仿windows操作系统桌面特效特效代码
03-20
win高仿mac主题
11-08
mac风 欧美简约风 高仿主题 win7 8 10 直接安装即可
仿迅雷播放器教程 -- C++ windows界面库对比(11)
weixin_30595035的博客
10-18 360
从上一篇文章中可以看出，C++的界面方向还很弱，没有任何一个界面库可以一统天下，所以才造成了界面库百家争鸣的情况。 从时间上看： 1、出来最早的是QT，1991年就有了。 2、VC++ 虽然1992年就出来了，但是一直不给力，那个时候是Borland一统天下，并且1995年Borland出了Delphi，也一直一统天下。 3、在1998年VC++ 6.0 出来之后，De...
探索色彩之美：Win11 Icon Theme，为你的Linux桌面焕新颜！
gitblog_00738的博客
08-21 823
探索色彩之美：Win11 Icon Theme，为你的Linux桌面焕新颜！ Win11-icon-themeA colorful design icon theme for linux desktops 项目地址:https://gitcode.com/gh_mirrors/wi/Win11-icon-theme 在追求个性化与视觉享受的数字时代，一款好的图标主题能够瞬间点亮你的屏幕，赋予操作...
模仿Win10 UI 框架 Vue3
启明星的指引---博客
08-10 1611
Win10 UI 框架 Vue3 推荐 Vue 3 + Typescript + Vite + Using <script setup> 本框架可以让你的页面像win10视窗系统一样，变为一个网页上的win10系统。 Demo|Demo|Demo Usage 开发流程 推荐clone本仓库，在本仓库基础上修改，模版在/template目录下 引入winVue租组件（clone可以跳过此步骤） <WinVue></WinVue> import WinVue fro
仿WIN8扁平式UI的html模板
www_5438xiazai的博客
06-13 280
简介： CSS3+jQuery模仿WIN8扁平式UI设计的html模板 网盘下载地址： http://kekewl.cc/WF9KFNOPUiF0 图片：
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值