前言：此代碼中的Id選擇器部分（#text0 - #text18,#aa - #ar）因屬性相同所以可以寫在同一行，繼而可以去掉多余部分減小檔案的位元組大小值，且此版本只完成了一點點，后續每完成一部分都將更新一次，
PS:閱讀本教程，你需要擁有以下語言的基礎知識：HTML,CSS,JavaScript,Jquery
經測驗360瀏覽器與Chorme瀏覽器顯示正常，IE9顯示例外，
目錄
- 1.界面演示
- 2.DeskTop代碼（代碼有點大，你要忍一下）
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菜中菜的菜鳥，記得點個贊支持下，謝謝各位小伙伴了！
小伙伴們點贊、收藏、評論，一鍵三連走起呀，你們的點贊與評論是我更新的源動力，我們下期見??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/296968.html
標籤：其他
上一篇：通過滑塊來改變網頁的顏色
下一篇：【vue路由傳參】vue自帶方法路由傳參方式、頁面跳轉帶id過去、重繪頁面資料不丟失、隱藏URL后的引數 詳細教程