当前位置:Gxlcms > html代码 > 也来“玩”MetroUI之磁贴(一)_html/css_WEB-ITnose

也来“玩”MetroUI之磁贴(一)_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:98人阅读

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伪类来实现。

先看效果截图吧:

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

  1   2   3       4           5           6             Metro UI试手之Tile  7           8  75      76      77         

78 Metro UI之磁贴(Tile) 79

80
81 91
92
93 103
104 105
106 116
117 118

Metro UI之磁贴(Tile)

简单磁贴

简单磁贴

简单磁贴

人气教程排行