整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Win10-UI是一款win10风格的后台UI，让您轻松搭建一个别具一格的后台界面。
http://win10ui.yuri2.cn/
http://win10ui.yuri2.cn/src/demo
https://github.com/yuri2peter/win10-ui
v1.1.2.5
该版本修正了两个烦心的小bug。对于1.1.2.3版本的老用户，替换该版本的win10.js文件即可。
<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表示格子的宽度和高度（以格为单位）。
<script> Win10.onReady(function () { //Win10-ui初始化完成后将执行此处代码 });</script>所有方法都需要加Win10.前缀。
推荐仔细查看demo的代码，很多用法都有所提及
本着极简的设计风格，所有图标相关的辅助类都设置为’icon’
<div class="shortcut"> <img class="icon" src="./img/icon/win10.png"/> <div class="title">Win10-UI官网</div></div>在桌面图标中，设置img.icon声明该图片是一个图标
<div class="shortcut"> <i class="fa fa-camera-retro icon"></i> <div class="title">Win10-UI官网</div></div>在桌面图标中，用.icon声明一个字体图标（以font awesome为例）
Win10.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/win10.png\"/>Win10-UI官网");Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标");没错！你也可以在openUrl函数的title参数中插入图片图标或者字体图标！
<div class="item"><i class=" icon fa fa-wrench fa-fw"></i><span>API测试</span></div><div class="item"><img class="icon" src="./img/icon/doc.png"><span>文档图片图标</span></div>在开始菜单项中，使用icon一样可以定义图片图标和字体图标
你可以放置两个content，并赋予detail和cover的辅助类，将得到炫酷的封面切换主体的动画效果。
<div loc="1,1" size="6,3" class="block"> <div class="content red detail" > 我是主体 </div> <div class="content red cover"> 我是封面 </div></div>各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010
Win10.setContextMenu(jq_dom, menu) 可接管系统默认的右键菜单。 其中jq_dom是jq对象或选择器字符串,menu是菜单配置项(true表示禁用默认菜单,null表示恢复默认菜单,[数组]表示自定义菜单)
//典型用法(桌面菜单)Win10.setContextMenu('#win10>.desktop',[ '菜单标题', //单字符串，不带回调 ['进入全屏',function () {Win10.enableFullScreen()}], //菜单项+点击回调 ['退出全屏',function () {Win10.disableFullScreen()}], '|', //分隔符 ['关于',function () {Win10.aboutUs()}],]);?//设置menu为true会起到禁用系统默认菜单的作用Win10.setContextMenu('#win10',true);点击回调函数可以声明一个参数e,将传入点击事件的对象。特别的，e.data是触发右键菜单的对象。
为了让广大开发者能更自由的定义自己的桌面，Win10-UI自v1.1.2.3版本起加入桌面舞台。 桌面舞台是一个id为win10-desktop-scene的div，位于#win10>.desktop下。桌面舞台预定义了css，使其浮动于桌面图标的下方。 借助此特性，你甚至可以发挥想象力，制作出动态壁纸。
使用getDesktopScene函数可以快捷获取桌面舞台的jq对象。 v1.1.2.3之前的版本，如果想要临时体验桌面舞台的支持特性，可以去官方群下载补丁win10_desktop_scene_support.js。
所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数，无须用onclick手动绑定
v1.1.2.3之前的版本，如果想要临时体验桌面子窗口事件自动绑定支持特性，可以去官方群下载插件win10_bind_open_windows.js。
<div class="shortcut win10-open-window" data-url="http://www.baidu.com" data-title="我是百度" data-icon-image="https://www.baidu.com/img/bd_logo1.png" data-icon-font="star" data-icon-bg="red" data-area-offset="[['300px', '380px'],'rt']"> <i class="icon fa fa-fw fa-user-circle blue" ></i> <div class="title">百度</div></div>这是所有可选项都用上的完整写法。
<div class="shortcut win10-open-window" data-url="www.baidu.com" > <i class="icon fa fa-fw fa-user-circle blue" ></i> <div class="title">百度</div></div>这是推荐的简洁写法，可以满足大部分场景的需要。
联系邮箱：yuri2peter@qq.com
欢迎关注尤里2号的博客:https://yuri2.cn
取件链接： https://c-t.work/s/fe0e4e70d4fd46
开源地址：https://github.com/yuri2peter/win10-ui
例
指定如何填充列：
div
{
column-fill:auto;
}
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| column-fill | 不支持 | 不支持 | 13.0 -moz- | 不支持 | 不支持 |
属性定义及使用说明
column-fill属性指定如何填充列。
| 默认值: | balance |
|---|---|
| 继承: | no |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.columnFill="auto" |
语法
column-fill: balance|auto;
| 值 | 说明 |
|---|---|
| balance | 列长短平衡。浏览器应尽量减少改变列的长度 |
| auto | 列顺序填充，他们将有不同的长度 |
Column-count
div元素的文本分成三列。
Column-gap
在div元素的文本分成三列，并指定一个30像素的列之间的差距。
Column-rule
指定列之间的规则：宽度，样式和颜色。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
介绍
今天福哥要跟跟大家说一说标签的样式，上一课我们学习的标签的样子就是它们的“默认”样子，实话实说这简直太难看了！为了让它们看起来更漂亮，为了可以使用这些标签勾勒出互联网上我们看到的那些美轮美奂的网页，我们需要通过标签样式对它们进行换装、进行美化。
使用标签样式的语法，示例：我们给一个div设置边框和背景颜色。
<div style="border: 1px solid #000; background: #ccc;"></div>尺寸
可以使用width和height控制对象的宽度和高度，可以使用百分比也可以使用具体的数值。
width
height
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
">
</div>边框
边框指的是标签在网页显示的对象的边框，控制边框可以使用border这个样式。还可以控制对象边框的圆角。还可以单独控制对象的上下左右四个方向的边框的样式。
border
border-radius
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
">
</div>边距
对象边距分为内边距和外边距。
内边距
内边距指对象里面的子元素距离对象边框的距离，使用padding样式控制对象的内边距。
padding
外边距
外边距指对象边框距离父元素边框的距离，使用margin样式控制对象的外边距。
margin
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
">
福哥教我学HTML样式
</div>背景
背景是指对象区域内的样式，背景可以是一种颜色的填充，也可以是一张图片的渲染。
background
background-color
background-image
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
background: #c6b4f0;
">
福哥教我学HTML样式
</div>字体
字体是用来控制文字的样式的，可以控制文字的字体和字号。但是要注意一点，给文字设置字体一定要客户端的电脑上有这种字体才可以正常显示。
font
font-family
font-size
color
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
background: #c6b4f0;
font-family: 黑体;
font-size: 22px;
color: #c85e7c;
">
福哥教我学HTML样式
</div>显示
对象的显示方式也有很多种，有独占一行的，也有只占一小块的，还有非快状的。显示方式使用display属性控制。
display: block
独占一行
display: inline-block
独占一小块
display: inline
非块状
display: none
隐藏对象，就是对象状态不可见也不占位置了
今天福哥给大家秀出了常用的标签样式，同时给出了这个样式的实际显示效果。接下来我们就要使用这些知识来设计我们自己的页面了。
把网页上的基本元素都套上了漂亮的皮肤，可以使用这些漂亮的标签快速搭建好看的网页，也是有捷径可寻的。我们开发网站程序可以使用web框架辅助，那么设计漂亮的网页也可以借助前端框架来完成。
下一课我们会跟大家介绍一款非常好用的前端框架——bootstrap，借助bootstrap前端框架就可以高效地设计网站的各种网页了。
https://m.tongfu.net/home/35/blog/512895.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
