仿Win10桌面系统WIN10-UI网站源码

释放双眼,带上耳机,听听看~!


         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>

图标应设置为图片或自定义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>

一级菜单添加类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>

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

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
网站源码

一款简约好看的个人主页HTML源码

2022-5-29 16:17:15

网站源码

在线多张图片拼图工具HTML源码

2022-7-28 1:44:54

23 条回复 A文章作者 M管理员
  1. Actinium

    感谢分享!

  2. 枫眠

    我的回合,抽卡!

  3. Atlantis2523

    一辈子,能坚持做好一件事就很伟大了!

  4. 魏嘉璇9997

    为遇一人而入红尘,人去我亦去,此生不留尘

  5. 彬彬有礼

    看看

  6. fflp

    随便看看

  7. kmer

    好家伙谢谢

  8. 伊丞

    bucuo

  9. ???9365

    不错不错不错

  10. 曹贼

    什么奇技淫巧

  11.  5613

    666666666666666666

  12. wwr510

    不错

  13. 白净生

    不错

  14. shanghong

    不错不错不错

  15. zhabc123

    53
    46546

  16. rnteam

    看看怎么样

  17. 你好!

    欢迎回归!

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索