• 微信
您当前的位置:首页 >> 源码资源

仿Win10系统WIN10-UI系统PHP网站源码

作者:admin时间:2025-07-03 阅读数:53 +人阅读

Win10-UI是一款Win10风格的后台UI,让您轻松搭建一个别具一格的后台界面。Win10的动态磁贴,可定义方块大小,添加随机动画 桌面图标自动排序 任务栏结合iframe子窗口,与Windows一致的窗口管理体验 开始菜单+消息提示中心,满足后台UI的设计需求 极少的API,大部分功能可用html元素定义完成 响应式兼容,在手机浏览器也有不错的观感 目前只保证对主流现代浏览器的兼容性支持

快速入门:

如何自定义桌面图标?

<div id="win10-shortcuts">
<div class="shortcut" onclick="//do something...">
<img src="图片地址"class="icon" />
<div class="title">图标底部文字</div>
</div>
<div class="shortcut" onclick="//do something...">
<div class="icon">自定义任意html内容</div>
<div class="title">图标底部文字</div>
</div></div>
<div id="win10-shortcuts"> <div class="shortcut" onclick="//do something..."> <img src="图片地址" class="icon" /> <div class="title">图标底部文字</div> </div> <div class="shortcut" onclick="//do something..."> <div class="icon">自定义任意html内容</div> <div class="title">图标底部文字</div> </div></div>
<div id="win10-shortcuts"> <div class="shortcut" onclick="//do something..."> <img src="图片地址" class="icon" /> <div class="title">图标底部文字</div> </div> <div class="shortcut" onclick="//do something..."> <div class="icon">自定义任意html内容</div> <div class="title">图标底部文字</div> </div></div>

图标应设置为图片或自定义html填充div

如何自定义开始菜单列表?

<div class="list win10-menu-hidden animated animated-slideOutLeft">
<div class="item">一级菜单</div>
<div class="item">一级菜单</div>
<div class="sub-item">二级菜单</div>
<div class="sub-item">二级菜单</div>
<div class="sub-item">二级菜单</div>
<div class="item">一级菜单</div>
<div class="item">一级菜单</div></div>
<div class="list win10-menu-hidden animated animated-slideOutLeft"> <div class="item">一级菜单</div> <div class="item">一级菜单</div> <div class="sub-item">二级菜单</div> <div class="sub-item">二级菜单</div> <div class="sub-item">二级菜单</div> <div class="item">一级菜单</div> <div class="item">一级菜单</div></div>
<div class="list win10-menu-hidden animated animated-slideOutLeft"> <div class="item">一级菜单</div> <div class="item">一级菜单</div> <div class="sub-item">二级菜单</div> <div class="sub-item">二级菜单</div> <div class="sub-item">二级菜单</div> <div class="item">一级菜单</div> <div class="item">一级菜单</div></div>

一级菜单添加类item,二级添加sub-item。不需要用一级菜单“包裹”二级菜单,将自动识别二级菜单的归属,请注意排序。

如何自定义开始菜单磁贴?

<div class="blocks">
<div class="menu_group">
<div class="title">磁贴组标题1</div>
<div loc="1,1" size="1,1"class="block">
<div class="content">磁贴1</div>
</div>
<div loc="2,1" size="1,1"class="block">
<div class="content">磁贴2</div>
</div>
</div>
<div class="menu_group">
<div class="title">磁贴组标题2</div>
<div loc="1,1" size="2,2"class="block">
<div class="content">磁贴3</div>
</div>
</div></div>
<div class="blocks"> <div class="menu_group"> <div class="title">磁贴组标题1</div> <div loc="1,1" size="1,1" class="block"> <div class="content">磁贴1</div> </div> <div loc="2,1" size="1,1" class="block"> <div class="content">磁贴2</div> </div> </div> <div class="menu_group"> <div class="title">磁贴组标题2</div> <div loc="1,1" size="2,2" class="block"> <div class="content">磁贴3</div> </div> </div></div>
<div class="blocks"> <div class="menu_group"> <div class="title">磁贴组标题1</div> <div loc="1,1" size="1,1" class="block"> <div class="content">磁贴1</div> </div> <div loc="2,1" size="1,1" class="block"> <div class="content">磁贴2</div> </div> </div> <div class="menu_group"> <div class="title">磁贴组标题2</div> <div loc="1,1" size="2,2" class="block"> <div class="content">磁贴3</div> </div> </div></div>

磁贴区域被分成若干小格,每一行最多6格。loc=’x,y’中的x表示横坐标,y表示纵坐标(以左上方为1,1点)。size=’w,h’中的w和h表示格子的宽度和高度(以格为单位)。

重要提示

如有解压密码:

看下载页、看下载页、看下载页。

源码工具资源类具有可复制性:

建议具有一定思考和动手能力的用户购买。

请谨慎考虑:

小白用户和缺乏思考动手能力者不建议赞助。

虚拟商品购买须知: 虚拟类商品,一经打赏赞助,不支持退款。请谅解,谢谢合作!

项目来源于网络,防止被割韭菜 !

本站初心:花着比韭菜更少的米,用着和韭菜一样的东西,仅学习其中的思路

良不良心自己体会,某些割韭菜的网站在这里我就不黑了,切记!

狗凯之家只做解密,项目里的联系方式仅为咨询用!收费一律删除~

狗凯之家官网:bygoukai.com下载地址:www.bygoukai.com

所有教程里所涉及的软件工具狗凯之家99%都有可以下载到免费的,除了一些定制类的软件没有。

文章版权声明 1、本网站名称:狗凯之家

2、下载地址:https://www.bygoukai.com

3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。

4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。

5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:85268832@qq.com

标签:

狗凯博客

这个世界并不是掌握在那些嘲笑者的手中,而恰恰掌握在能够受的住嘲笑与批评仍不断往前走的人手中。