HTML实现仿Windows桌面主题特效的实现
在线演示地址: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"/></span> <div class="text">bilibili <div class="right_cron"></div> </div> </li> </ul> <div id="taskBar"> <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="海拥" 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学堂" 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="主题"></span></div> <div id="start_block"> <a title="开始" id="start_btn"></a> <div id="start_item"> <ul class="item admin"> <li><span class="adminImg"></span> Admin</li> </ul> <ul class="item"> <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>
栏 目:HTML/Xhtml
本文地址:https://zhanzhang.eapis.site/html/2103.html
您可能感兴趣的文章
- 2025-10-24 02:29dreamweaver怎么使用正则表达式?
- 2025-10-22 18:36html form表单input使用disabled后提交不能获取表单值的解决方法
- 2025-10-24 03:12Dreamweaver网页怎么制作CSS叠层样式?
- 2025-10-22 19:25Solaris系统维护经验的几点总结
- 2025-10-24 03:56我们需要NPU吗? 一文了解NPU神经处理单元的概念与需求
- 2025-10-22 20:37前端开发必备:12款浏览器兼容性测试工具推荐
- 2025-10-24 04:42HTML+CSS实现炫酷登录切换的项目实践
- 2025-10-22 21:32Z字特工队:钢铁战士配置 Z字特工队:钢铁战士最低配置及要求
- 2025-10-24 05:27配电脑选择键盘鼠标注意点介绍
- 2025-10-22 22:17电脑硬盘消失只剩C盘如何恢复? 电脑只有一个c盘的解决办法




粤公网安备 13010202004186