โครงสร้างไดเรกทอรีเป็นดังนี้:
├── jsLib │ ├── jquery.winResize.js │ ├── jquery-1.6.2.js │ ├── jquery-1.6.2.min.js │ ├── jquery-ui-1.8.16.custom.min.js │ ├── myLib.js │ ├── ภายนอก │ ├── jquery-smartMenu │ ├── ธีม │ └── อุ้ย ├── ไอคอน ├── รูปภาพ ├── วอลเปเปอร์ └── ดัชนี.html
รหัส HTML
รหัสหลัก HTML:
<a href="https://haiyong.site" class="powered_by">ขับเคลื่อนโดย haiyong.site หมายเหตุ: ดับเบิลคลิกที่แอปพลิเคชันเดสก์ท็อปเพื่อเปิด</a> <ul id="deskIcon"> <li class="desktop_icon" id="win11" path="https://haiyong.site/"> <span class="icon"><img src="icon/icon14.png"/></span> <div class="text">ไฮยง <div class="right_cron"></div> </div> </li> <li class="desktop_icon" id="win11" path="https://haiyong.blog.csdn.net/"> <span class="icon"><img src="icon/csdn.png"/> </span> <div class="text">CSDN <div class="right_cron"></div> </div> </li> <li class="desktop_icon" id="win11" path="https://juejin.cn/user/2040341402229751"> <span class="icon"><img src="icon/juejin.png"/>< /ช่วง> <div class="text">นักเก็ต <div class="right_cron"></div> </div> </li> <li class="desktop_icon" id="win11" path="https://space.bilibili.com/63551025"> <span class="icon"><img src="icon/bilibili.png"/>< /ช่วง> <div class="text">บิลิบิลี <div class="right_cron"></div> </div> </li> </ul> <div id="ทาสก์บาร์"> <div id="leftBtn"><a href="#" class="upBtn"></a></div> <div id="rightBtn"><a href="#" class="downBtn"></a> </div> <div id="task_lb_wrap"> <div id="task_lb"></div> </div> </div> <div id="lr_bar"> <ul id="default_app"> <li id="app0"><img src="icon/icon1.png" title="haiyong" path="https://haiyong.site/"/></li> <li id="app2"><img src="icon/icon0.png" title="เครื่องมือ" path="https://haiyong.site/tools"/></li> <li id="app3"><img src="icon/icon2.png" title="กลุ่มการสื่อสาร" path="https://app.yinxiang.com/fx/8aa8eb1b-7d45-4793-a160-b990d9da2e75" /></li> <li id="app4"> <img src="icon/icon3.png" title="ติดต่อผู้เขียน" path="https://haiyong.site/img/qrcode/weixin.png"/></li> <li id="app1"><img src="icon/icon11.png" title="Jquery Academy" path="http://www.jq22.com/?Jquery.aspx"/></li> </ul> <div id="default_tools"> <span id="showZm_btn" title="แสดงเดสก์ท็อป"></span><span id="shizhong_btn" title="นาฬิกา"></span><span id="weather_btn" title="สภาพอากาศ"></span> <span id="them_btn" title="Theme"></span></div> <div id="start_block"> <a title="Start" id="start_btn"></a> <div id="start_item"> <ul class="ผู้ดูแลระบบรายการ"> <li><span class="adminImg"></span> ผู้ดูแลระบบ</li> </ul> <ul class="รายการ"> <li><span class="sitting_btn"></span>การตั้งค่าระบบ</li> <li><span class="help_btn"></span>คู่มือการใช้งาน <b></b></li> <li><span class="about_btn"></span>เกี่ยวกับเรา</li> <li><span class="logout_btn"></span>ออกจากระบบ</li> </ul> </div> </div> </div> </div>
? รหัสซีเอสเอส
รหัสหลัก CSS:
เนื้อความ, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, ก่อน, แบบฟอร์ม, ชุดสนาม, อินพุต, textarea, p, blockquote, th, td {
ระยะขอบ:0;
ช่องว่างภายใน:0;
-
โต๊ะ {
ชายแดนยุบ: ยุบ;
ระยะห่างขอบ:0;
-
ชุดสนาม img {
เส้นขอบ:0;
-
ที่อยู่, คำอธิบายภาพ, อ้างอิง, รหัส, dfn, em, strong, th, var {
รูปแบบตัวอักษร: ปกติ;
แบบอักษรน้ำหนัก:ปกติ;
-
เol, ul, li {
รายการสไตล์: ไม่มี;
-
คำบรรยายภาพ, {
การจัดแนวข้อความ: ซ้าย;
-
h1, h2, h3, h4, h5, h6 {
ขนาดตัวอักษร:100%;
แบบอักษรน้ำหนัก:ปกติ;
-
ถาม:ก่อน, ถาม:หลัง {
เนื้อหา:";
-
อักษรย่อ {
เส้นขอบ:0;
-
-
ระยะขอบ:0;
ช่องว่างภายใน:0
-สไตล์เพจพื้นฐาน
/*รูปแบบหน้าพื้นฐาน*/
HTML {
ล้น: ซ่อน;
-
ร่างกาย {
ขนาดตัวอักษร: 12px;
พื้นหลัง:#06C url(wallpapers/menglong2.jpg) ทำซ้ำตรงกลางศูนย์เลื่อน;
ตระกูลฟอนต์: Tahoma, Geneva, sans-serif;
ระยะขอบ:0;
ช่องว่างภายใน:0
-
{
ขนาดตัวอักษร: 12px;
-
เป็น: ลิงค์ {
การตกแต่งข้อความ: ไม่มี;
สี: #FFF;
-
เป็น: เยี่ยมชม {
การตกแต่งข้อความ: ไม่มี;
สี: #FFF;
-
เป็น:โฮเวอร์ {
การตกแต่งข้อความ: ไม่มี;
สี: #FFF;
-
เป็น:ใช้งานอยู่ {
การตกแต่งข้อความ: ไม่มี;
สี: #FFF;
-
.corner {/*ใช้งานได้เฉพาะในเบราว์เซอร์ขั้นสูงที่รองรับ CSS3*/
-moz-border-รัศมี: 5px;
-webkit-ขอบรัศมี: 5px;
รัศมีเส้นขอบ: 5px;
-moz-box-shadow: 2px 2px 8px #444;
-webkit-box-shadow: 2px 2px 8px #444;
กล่องเงา:2px 2px 8px #444;
-
. กำลังโหลด {
พื้นหลัง: url (images/loading.gif) ไม่ซ้ำตรงกลาง
-รูปแบบเค้าโครงอินเทอร์เฟซ
/*รูปแบบเค้าโครงอินเทอร์เฟซ*/
.powered_by {
ความกว้าง:160px;
ความสูง:25px;
ความสูงของบรรทัด:25px;
พื้นหลัง: url (รูปภาพ / powered-by.png) ไม่ทำซ้ำตรงกลางด้านซ้าย;
สี:#CCC;
เยื้องข้อความ:26px;
จอแสดงผล:บล็อก;
โครงร่าง:ไม่มี;
ตำแหน่ง:แน่นอน;
ขวา:20px;
ด้านล่าง:60px;
-สไตล์แถบงาน
#ทาสก์บาร์ {
ความกว้าง:100%;
ความสูง:40px;
ความสูงของบรรทัด:40px;
ตำแหน่ง:แน่นอน;
ขวา:0;
ด้านล่าง:0;
-
#leftBtn {
ความกว้าง:100px;
ความสูง:40px;
ลอย:ซ้าย;
จอแสดงผล:ไม่มี;
-
#rightBtn {
ความกว้าง:100px;
ความสูง:40px;
ลอย:ขวา;
จอแสดงผล:ไม่มี;
-
#leftBtn a, #rightBtn a {
จอแสดงผล:บล็อก;
ความกว้าง:100px;
ความสูง:40px;
โครงร่าง:ไม่มี;
ภาพพื้นหลัง: url (รูปภาพ / lr_btn.png);
พื้นหลังซ้ำ: ไม่ซ้ำ;
-
#leftBtn {
ตำแหน่งพื้นหลัง: ด้านบนซ้าย;
-
#rightBtn เอ {
ตำแหน่งพื้นหลัง: ด้านบนขวา;
-
#leftBtn a:โฮเวอร์ {
ตำแหน่งพื้นหลัง: ล่างซ้าย
-
#rightBtn a:โฮเวอร์ {
ตำแหน่งพื้นหลัง: ด้านล่างขวา
-
#task_lb_wrap {
ความสูง:40px;
ความสูงของบรรทัด:40px;
ล้น: ซ่อน;
ตำแหน่ง:ญาติ;
-
#task_lb {
ความกว้าง:อัตโนมัติ;
ความสูง:อัตโนมัติ;
ตำแหน่ง:แน่นอน;
ด้านบน:0;
ขวา:0;
-
#task_lb และ {
จอแสดงผล: อินไลน์บล็อก;
โครงร่าง:ไม่มี;
ความกว้าง:100px;
ความสูง:40px;
ภาพพื้นหลัง: url (รูปภาพ/taskHdBtn.png);
พื้นหลังซ้ำ: ไม่ซ้ำ;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
ความสูงของบรรทัด:40px;
ลอย: ถูกต้อง
-
#task_lb .defaultTab {
ตำแหน่งพื้นหลัง: ด้านบนขวา;
สี:#ซีซี
-
#task_lb .defaultTab:โฮเวอร์ {
ตำแหน่งพื้นหลัง: ด้านล่างขวา;
-
#task_lb .selectTab {
ตำแหน่งพื้นหลัง: ด้านบนซ้าย;
สี:#FFF
-
#task_lb .selectTab:โฮเวอร์ {
ตำแหน่งพื้นหลัง: ล่างซ้าย
-
#shizhong_btn {
พื้นหลัง: url (images/timer.png) ไม่มีการทำซ้ำตรงกลาง
-
#weather_btn {
พื้นหลัง: url (images/wheather.png) ไม่ซ้ำตรงกลาง
-
#sound_btn {
พื้นหลัง: url (images/sound_open.png) ไม่ซ้ำตรงกลาง
-
#showZm_btn {
พื้นหลัง: url (images/show-desktop.png) ไม่มีการทำซ้ำตรงกลาง
-
#them_btn {
พื้นหลัง: url (images/skin.png) ไม่ซ้ำตรงกลาง
-แถบลอยด้านข้าง
#lr_bar {
ความกว้าง:73px;
ความสูง:อัตโนมัติ;
ตำแหน่ง:แน่นอน;
ซ้าย:0;
ด้านบน:30px;
พื้นหลัง: url (images/dock_top.png) ทำซ้ำ -y ซ้ายบน;
ดัชนี z:90;
-moz-box-เงา: 0px 3px 15px #444;
-webkit-box-shadow: 0px 3px 15px #444;
กล่องเงา: 0px 3px 15px #444;
ช่องว่างด้านบน: 5px;
-สไตล์ปุ่มเริ่ม
#start_block {
ความกว้าง:73px;
ความสูง:56px;
ตำแหน่ง:แน่นอน;
ซ้าย:0;
ด้านล่าง:-56px;
พื้นหลัง: url (images/dock_b.png) ไม่ทำซ้ำด้านล่างซ้าย;
-moz-box-เงา: 0px 5px 15px #444;
-webkit-box-shadow: 0px 5px 15px #444;
กล่องเงา: 0px 5px 15px #444;
-
#start_btn {
จอแสดงผล:บล็อก;
ความกว้าง:48px;
ความสูง:48px;
พื้นหลัง: url (images/start-btn.png) ไม่ทำซ้ำตรงกลางด้านล่าง;
ระยะขอบ:4px อัตโนมัติ 0 อัตโนมัติ;
โครงร่าง:ไม่มี;
ดัชนี z:501;
เคอร์เซอร์:ตัวชี้;
-
#start_btn:โฮเวอร์ {
ตำแหน่งพื้นหลัง: ตรงกลางด้านบน
-สไตล์เมนูเริ่ม
#start_item {
ความกว้าง:180px;
ความสูง:อัตโนมัติ;
การขยาย:5px 0;
พื้นหลัง: url (images/start_item_bg.png) ทำซ้ำ;
ตำแหน่ง:แน่นอน;
ดัชนี z:500;
ซ้าย:75px;
ด้านล่าง:0px;
จอแสดงผล:ไม่มี;
-moz-border-รัศมี: 5px;
-webkit-ขอบรัศมี: 5px;
รัศมีเส้นขอบ: 5px;
-moz-box-shadow: 2px 2px 5px #444;
-webkit-box-shadow: 2px 2px 5px #444;
กล่องเงา: 2px 2px 5px #444;
-
#start_item .รายการ {
ความกว้าง:100%;
ความสูง:อัตโนมัติ;
ขอบบน:1px ทึบ #999
-
#start_item .item li {
ความกว้าง:98%;
ความสูง:24px;
ล้น: ซ่อน;
ซูม:-1;
การขยาย:6px 0;
ความสูงของบรรทัด:24px;
ระยะขอบ:0 อัตโนมัติ;
สี:#FFF;
-
#start_item .item li:โฮเวอร์ {
พื้นหลัง: url (images/start_item_over.png) ทำซ้ำ-x ล่างซ้าย;
เคอร์เซอร์:ตัวชี้
-
#start_item .item li span {
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง:24px;
ความสูง:24px;
ภาพพื้นหลัง: url (รูปภาพ / start_itembtn.png);
พื้นหลังซ้ำ: ไม่ซ้ำ;
ระยะขอบ:0 10px;
ลอย:ซ้าย;
-
#start_item .item li b {
ความกว้าง:10px;
ความสูง:24px;
พื้นหลัง: url (images/item-child.png) ไม่ซ้ำศูนย์ตรงกลาง;
จอแสดงผล: อินไลน์บล็อก;
ลอย:ขวา;
ขอบขวา:10px;
-
#start_item .sitting_btn {
ตำแหน่งพื้นหลัง: ซ้าย -140px;
-
#start_item .help_btn {
ตำแหน่งพื้นหลัง: ซ้าย -44px;
-
#start_item .about_btn {
ตำแหน่งพื้นหลัง: ซ้าย -164px;
-
#start_item .logout_btn {
ตำแหน่งพื้นหลัง: ซ้าย -20px;
-
#start_item .admin {
ขอบล่าง:1px ทึบ #444;
การขยาย:5px 0;
ขอบบน:ไม่มี;
-
#start_item .item li .adminImg {
เส้นขอบ:1px ทึบ #E0E0E0;
ตำแหน่งพื้นหลัง: ซ้าย -92px;
สีพื้นหลัง:#FFF;
-แกดเจ็ตเริ่มต้น
#default_tools {
ความกว้าง:71px;
ความสูง:อัตโนมัติ;
ล้น: ซ่อน;
ซูม:-1;
การขยาย:5px 0;
ขอบบน:1px ทึบ #555;
ระยะขอบ:0 อัตโนมัติ;
-
#default_tools ขยาย {
ความกว้าง:30px;
ความสูง:30px;
จอแสดงผล: อินไลน์บล็อก;
ระยะขอบ:0 0 0 3px;
เคอร์เซอร์:ตัวชี้;
ลอย:ซ้าย;
-แอปพลิเคชันเริ่มต้น
#default_app {
ความกว้าง:73px;
ความสูง:อัตโนมัติ;
การขยาย:5px 0;
ตำแหน่ง:ญาติ;
-
#default_app ลี {
ความกว้าง:48px;
ความสูง:48px;
ล้น: ซ่อน;
ระยะขอบ:3px อัตโนมัติ;
ช่องว่างภายใน:6px;
-
#default_app li img {
ความกว้าง:48px;
ความสูง:48px;
เคอร์เซอร์:ตัวชี้;
-
#default_app .btnOver {
พื้นหลัง: url (images/default_appbtn_bg.png) ไม่ซ้ำตรงกลาง
-แทนที่สไตล์เมนูคลิกขวา
.smart_menu_box .smart_menu_a {
สี:#333
-
.smart_menu_box .smart_menu_li_separate {
ขอบล่าง:1px ทึบ #d6d5d5;
-สไตล์หน้าต่าง
.windows {
ความกว้างขั้นต่ำ:240px;
ความสูงขั้นต่ำ: 200px;
ความกว้าง:700px;
ความสูง:560px;
ตำแหน่ง:แน่นอน;
จอแสดงผล:ไม่มี;
สีพื้นหลัง:#E0E0E0;
-
.win_title {
ความกว้าง:100%;
ความสูง:26px;
ความสูงของบรรทัด:26px;
พื้นหลัง:#E0E0E0 url (รูปภาพ/titlebar_bg_cur.png) ทำซ้ำ-x ตรงกลางด้านซ้าย;
-moz-border-รัศมี: 5px;
-webkit-ขอบรัศมี: 5px;
รัศมีเส้นขอบ: 5px;
-
.win_title ข {
สี:#333;
ขอบซ้าย:10px;
-
.win_title .win_btnบล็อก {
ความกว้าง:อัตโนมัติ;
การขยาย:0 5px;
ลอย:ขวา;
ความสูง:17px;
ระยะขอบ:4px 3px 0 0;
-
.win_title .win_btnบล็อก {
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง:26px;
ความสูง:17px;
ภาพพื้นหลัง: url (รูปภาพ / windowBtn.png);
พื้นหลังซ้ำ: ไม่ซ้ำ;
ลอย:ซ้าย;
ระยะขอบ:0 1px;
โครงร่าง:ไม่มี;
-
.winเพิ่มสูงสุด {
ตำแหน่งพื้นหลัง: ด้านล่างขวา;
-
.winMaximize:โฮเวอร์ {
ตำแหน่งพื้นหลัง: ด้านบนขวา;
-
.winHyimize {
ตำแหน่งพื้นหลัง: -26px ด้านล่าง;
-
.winHyimize:โฮเวอร์ {
ตำแหน่งพื้นหลัง: -26px ด้านบน;
-
.winClose {
ตำแหน่งพื้นหลัง: -52px ด้านบน;
-
.winClose:โฮเวอร์ {
ตำแหน่งพื้นหลัง: -52px ด้านล่าง;
-
.winย่อเล็กสุด {
ตำแหน่งพื้นหลัง: ล่างซ้าย;
-
.winMinimize:โฮเวอร์ {
ตำแหน่งพื้นหลัง: ด้านบนซ้าย;
-
.winframe {
ความกว้าง:100%;
ความสูง:อัตโนมัติ;
ระยะขอบ:0 0 0 3px;
ช่องว่างภายใน:0
-ไอคอนเดสก์ท็อป
#deskIcon {
ความกว้าง:100%;
ความสูง:อัตโนมัติ;
ล้น: ซ่อน;
ซูม:-1;
ตำแหน่ง:ญาติ;
-
.desktop_icon {
ความกว้าง:86px;
ความสูง:88px;
เคอร์เซอร์:ตัวชี้;
ขอบซ้าย:-1000px;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
-
.desktop_icon ขยาย {
จอแสดงผล:บล็อก;
-
.desktop_icon .ไอคอน {
ความกว้าง:50px;
ความสูง:50px;
ระยะขอบ:5px อัตโนมัติ;
-
.desktop_icon .icon img {
ความกว้าง:50px;
ความสูง:50px;
-
.desktop_icon .ข้อความ {
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง:อัตโนมัติ;
ความสูง:22px;
ความสูงของบรรทัด:22px;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
สี:#fff;
พื้นหลัง: url (images/iconTextbg.png) ไม่ทำซ้ำตรงกลางด้านซ้าย;
ตำแหน่ง:ญาติ;
ช่องว่างภายในซ้าย: 10px;
ขอบขวา:10px;
-
.desktop_icon .right_cron {
ความกว้าง:10px;
ความสูง:22px;
ตำแหน่ง:แน่นอน;
ขวา:-10px;
ด้านบน:0;
พื้นหลัง: url (images/iconTextbg_right.png) ตรงกลางซ้าย ไม่ทำซ้ำ;
-
.desktop_icon_over {
พื้นหลัง: url (images/icon_over.png) ไม่ซ้ำจุดศูนย์กลาง;
-? รหัส JS
มีรหัส JS มากมาย แสดงเฉพาะส่วนหนึ่งของรหัส JS เท่านั้น สามารถรับซอร์สโค้ดที่สมบูรณ์ได้ในตอนท้ายของบทความ
//ประกาศพื้นที่เดสก์ท็อปและสรุปการดำเนินการที่เกี่ยวข้อง myLib.NS("desktop");
myLib.desktop={
winWH:ฟังก์ชั่น(){
$('body').data('winWh',{'w':$(window).width(),'h':$(window).height()});
-
เดสก์ท็อปแผง: ฟังก์ชั่น () {
$('body').data('แผง',{
'ทาสก์บาร์':{
'_this':$('#taskBar'),
'task_lb':$('#task_lb')
-
'lrBar':{
'_this':$('#lr_bar'),
'default_app':$('#default_app'),
'start_block':$('#start_block'),
'start_btn':$('#start_btn'),
'start_item':$('#start_item'),
'default_tools':$('#default_tools')
-
'deskIcon':{
'_this':$('#deskIcon'),
'icon':$('li.desktop_icon')
-
'powered_by':$('a.powered_by')
-
-
getMydata:ฟังก์ชั่น(){
กลับ $('body').data();
-
mouseXY:ฟังก์ชั่น(){
var mouseXY=[];
$(document).bind('mousemove',function(e){
mouseXY[0]=e.pageX;
mouseXY[1]=e.pageY;
-
กลับเมาส์XY;
-
contextMenu:function(jqElem,ข้อมูล,ชื่อเมนู,textLimit){
var_this=นี่
,mXY=_this.mouseXY();
jqqองค์ประกอบ
.smartMenu(ข้อมูล,{
ชื่อ: ชื่อเมนู
ข้อความจำกัด:ข้อความจำกัด,
afterShow:ฟังก์ชั่น(){
var menu=$("#smartMenu_"+menuName);
var myData=myLib.desktop.getMydata(),
wh=myData.winWh;//รับความกว้างและความสูงของเอกสารปัจจุบัน var menuXY=menu.offset(),menuH=menu.height(),menuW=menu.width();
ถ้า (menuXY.top>wh['h']-menuH){
menu.css('top',mXY[1]-menuH-2);
-
ถ้า (menuXY.left>wh['w']-menuW){
menu.css('ซ้าย',mXY[0]-menuW-2);
-
-
-
$(document.body).click(function(event){
เหตุการณ์preventDefault();
$.smartMenu.hide();
-
-
-ที่อยู่ GitHub: https://github.com/wanghao221/moyu
นี่เป็นการสรุปบทความนี้เกี่ยวกับการใช้งาน HTML ที่เลียนแบบเอฟเฟกต์ธีมเดสก์ท็อป Windows สำหรับ HTML ที่เกี่ยวข้องเพิ่มเติมที่เลียนแบบเนื้อหาเดสก์ท็อป Windows โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องต่อไปนี้ต่อไป . สนับสนุน downcodes.com!