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

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

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

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

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

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

【☀️~爆肝万字总结递归~❤️玩转算法系列之我如何才能掌握递归解题的能力❤️~十大经典问题助你突破极限~建议收藏☀️】
Kotlin高仿微信-第11篇-单聊-语音
Kotlin高仿微信-项目实践58篇详细讲解了各个功能点,包括:注册.登录.主页.单聊(文本.表情.语音.图片.小视频.视频通话.语音通话.红包.转账).群聊.个人信息.朋友圈.支付服务.扫一扫.搜 ...
高仿京东商城app、集成react-native热更新功能
简介这是一个高仿京东商城的安卓项目,有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能 kotlin . retrofit2 + okhttp3 网络请求 .多模块 leak ...
高仿京东商城App，集成react-native 热更新功能
前言这是一个高仿京东商城的android 混合项目,具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,使用最新MVI架构开发 kotlin . retrofit2 + o ...
山寨之王驾到，高仿iPhone 4手机soPhone 外观界面评测
在智能手机市场上苹果的iPhone 一直都有着很高的关注度,不过其高昂的价格却让人望而却步.有些年轻人为了拥有一部iPhone 不惜出租胸部来做广告位,更有甚者还卖身卖肾.其实这又何苦呢.现在市场上已 ...
爆肝三天整理！2021年阿里巴巴社招面试题总结，三轮技术面+HR面，总结的明明白白！
前言: 今年是我第一次正式面试,期间看了很多网上的帖子,给了我很大帮助.面试结束后一直想着将面经整理出来,但实验室一直有事,老师天天找,所以一直没有找到机会.端午终于有些空闲时间,赶紧将面经整理出来, ...
Linux常见基本指令（爆肝三万字）
指令目录前言 01. ls指令 :查看目录 02. pwd指令 :显示所处(目录)路径 03. cd指令 :进入指定目录 04. touch指令 :创建文件 05. mkdir指令 :创建(文件夹) ...
高仿网易评论列表效果之界面分析
Hello大家好我是周杰伦~!@#￥#@￥%￥%--%&*&--**)--*%&￥%#￥!!!! 不好意思,刚忘了吃药了~~~~扯正事,前几天有个小哥来面试,因为前些天面试了很 ...
爆肝十小时，为你总结出最全的数据大屏适配屏幕方案
前言近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况,大部分原因还是适配问题. 我们做数据大屏时,因为显示器尺寸不同,会导致展示的时候有留白区域,效果不好,所 ...
React-Native 高仿“掘金”App 注册和登录界面
上一篇博客写了关于如何自定义一个输入框,所以打算拿一个app来练练手.看了一下感觉"掘金"客户端,感觉不错,里面包含了很多控件可以用react-native来实现.相信这个app做 ...

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

目录

1.界面演示

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

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

最新文章

热门文章