教程：基于metro-ui的仿windows个人主页搭建（基础篇）

基于 metro 4 框架

官网：https://metroui.org.ua/

本教程翻译自官方英文文档：>

文档链接

序言：效果展示

案例：https://zfe.one

案例源码下载：模板

模板源码下载：源码

PS：建议使用案例直接开发！但也别忘了给原项目点个收藏！

🎈 入门属性

🎨 磁贴基本样式属性

Metro 4 包含创建磁贴（如 Windows8/10 中的应用程序磁贴）的 class。

若要创建磁贴，可以在 div 添加到具有属性 data role 的元素。

1	<div data-role="tile"></div>

🎨 磁贴尺寸

你可以使用四种尺寸的磁贴：小、中、宽和大。要设置磁贴大小，请使用”data-size”属性。

🎨 磁贴图标和标签

要创建磁贴图标，需要添加 img 标签，并添加值为 icon 的 class。

也可以使用字体中的图标创建带有 icon class 的 span 标签作为磁贴图标。

字体图标的生成方法：>

小康的 Iconfont 图标库

Branding bar 磁贴可同时拥有标题和 icon。

<div data-role="tile">
  <img src="images/facebook.png" class="icon" />
  <span class="branding-bar">Branding bar</span>
</div>

🎈 初级属性

🎨 磁贴徽章

通过添加带有”badge-top”或”badge-bottom”class 的 span 标签，

能为磁贴创建用于展示数字等元素的徽章。

10
10

🎨 磁贴颜色

通过添加”bg-x”(x 为颜色英文）的或 class 或”background-color: #xxxxxx”的内联 style 样式。

可以改变磁贴的颜色。

🎨 磁贴选中

通过添加”bg-x”(x 为颜色英文）的或 class，为磁贴添加选中状态。

Applications

🎨 磁贴图片封面

通过添加 data-cover 属性可以为磁贴添加图片封面。

Sergey Pimenov
Author

🎨 磁贴相册

通过在带有图片的 div 标签添加 data-effect=”image-set”可以实现相册的滚动闪烁。

🎨 悬停动效

若要设置悬停效果，请使用 data-effect 属性的以下一个值：

hover-slide-up、悬停向上滑动

hover-slide-down、悬停向下滑动

hover-slide-left、悬停向左滑动

hover-slide-right、悬停向右滑动

hover-zoom-up、悬停向上缩放

hover-zoom-down、悬停向下缩放

hover-zoom-left、悬停向左缩放

hover-zoom-right 悬停向右缩放

同时需要添加一个封面 div 和封底 div。

<div data-role="tile" data-effect="...">
  <div class="slide-front">...</div>
  <div class="slide-back">...</div>
</div>

🎈 进阶属性

🎨 磁贴网格

为了将磁贴划分网格，Metro 4 中设置了特殊的 class，

使用带有”.tiles-grid”的 class 可以创建网格来装载你的磁贴。

磁贴间距为 10px，通过”size-x”（x 为 1 到 10 整数）来限定网格的宽度。

例如添加值为 size-4 的 class 可以创建宽度为 8 个 small 磁贴或者 4 个 medium 磁贴宽度的容器。

🎨 磁贴固定

你也可以通过 class 类”col-x”和”row-x”（x 为 1 到 12 整数）指定磁贴的位置。

🎨 磁贴组

要对图块进行分组，可以使用特殊的类。图块组。

若要设置组固定大小，请添加以下 class 之一：

size half、

size-x（x 为 1 到 10 整数）、

此外，还可以使用 CSS 媒体查询来更改大小。

要实现，请使用 class 类：

size-{media}-half、

size-{media}-x（x 为 1 到 10 整数）、

其中{media}是一个参数，对应不同响应尺寸：fs、sm、md、ld、xl、xxl。

[

Github
30
](https://github.com/olton/Metro-UI-CSS)Email10ChromeTables

🎈DIY 属性

🎨 添加天气磁贴

前往中国天气网天气插件

设计自己的天气插件样式。打开 index.html 将 key 值改为自己的 key 值。同时调整宽度和高度。

WIDGET = {
  CONFIG: {

    "layout": 1,
    "width": "310",
    "height": "150",
    "background": 1,
    "dataColor": "FFFFFF",
    "borderRadius": 1,
    "key": "FtmcNnOSjp"
  }
}

🎨 添加网站监控磁贴

参考 flexiston 的教程UptimeRobot 免费网站存活监控

获取监控链接替换”https://stats.uptimerobot.com/2OkvpSkWAJ“

<div class="tiles-grid tiles-group size-2 fg-white" data-group-title="网站信息">
               <a href="https://stats.uptimerobot.com/2OkvpSkWAJ" data-role="tile" class="bg-indigo fg-white">
                   <span class="fa icon-uniE903 icon"></span>
                   <span class="branding-bar">网站监控</span>
                   <span class="badge-bottom">2</span>
               </a>