整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
