也来“玩”Metro UI之磁贴（一）_html/css_WEB-ITnose

win8出来已有一段时间了，个人是比较喜欢metro ui的。一直以来想用metro ui来做个自己的博客，只是都没有空闲~~今天心血来潮，突然想自己弄一个磁贴玩玩，动手……然后就有了本篇。

Win8中的磁贴可调整大小，分组，还有更好玩的动态信息显示。网上也有了比较完整的Web Metro UI框架库，比较好的一个??Metro UI template：http://metro-webdesign.info/，（这个是收费的），还有许多其它的，可参看园子里园友（梦想天空）列举的：http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html。

本篇的磁贴只实现了简单的磁贴样式和选中效果，用CSS实现。考虑到磁贴的可选中性，想到了html中的复选框，核心原理其实就是用css伪类来实现。

先看效果截图吧：

立即学习“前端免费学习笔记（深入）”；

Sesame AI

一款开创性的语音AI伴侣，具备先进的自然对话能力和独特个性。

下载

看代码（很简单，也可在这里http://runjs.cn/detail/mirwgdac fork一份，实现你自己的，同时向大家推荐runjs.cn，这个真不错，和jsfiddle有的比。也欢迎关注我x-strong :)）：

  1   2   3       4           5           8  75      76      77         
 78             Metro UI之磁贴（Tile） 79         
 80         
 81              82                  83                  84                  85                                           86                  87                  88                     简单磁贴 89                  90              91         
 92         
 93              94                  95                  96                  97                                           98                  99                 100                     简单磁贴101                 102             103         
104         105         
106             107                 108                 109                 110                                          111                 112                 113                     简单磁贴114                 115             116         
117     118 

立即学习“前端免费学习笔记（深入）”；

Metro UI之磁贴（Tile）

  简单磁贴

  简单磁贴

  简单磁贴