HTML 实现仿 Windows 桌面主题特效

• ?? 个人网站:【海拥】【摸鱼小游戏】【开发文档导航】
• ?? 风趣幽默的人工智能学习网站：??人工智能
• ?? 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
• ?? 免费且实用的计算机相关知识题库：??进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，??点击跳转到网站。

本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：

??【100个摸鱼小游戏】（源码永久免费开源）

直接跳到末尾 参与评论送书
直接跳到末尾 领取完整源码
快速跳转 如何高效学习

目前已上线的小游戏有50+个

游戏入口地址有多个：

• 摸鱼入口：https://haiyong.site/moyu/
• 海拥开发文档：https://haiyong.site/doc/
• GitHub 源码：https://github.com/wanghao221/moyu

HTML 实现仿 Windows 桌面主题特效

• • ? 项目基本结构
  • • ?? HTML 代码
    • ?? CSS 代码
    • ?? JS 代码
  • ?? 如何让学习不再盲目
  • ?? 参与评论送书
  • ?? 完整源码下载?

在线演示地址：https://haiyong.site/win/

源码可在文末免费获取

项目基本结构

目录结构如下：

├── 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
│   ├── external
│   ├── jquery-smartMenu
│   ├── themes
│   └── ui
├── icon
├── images
├── wallpapers
└── index.html

?? HTML 代码

HTML 主要代码：

<a href="https://haiyong.site" class="powered_by">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"/></span>
    <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"/></