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 82 83 84 85 86 87 88 簡單磁貼 89 90 91 92

93 94 95 96 97 98 99 100 簡單磁貼101102103104 105

106 107 108 109 110 111112 113 簡單磁貼114115116117 118

Metro UI之磁貼(Tile)

簡單磁貼

簡單磁貼

簡單磁貼

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

總結

以上是生活随笔為你收集整理的html 磁贴自动布局,也来“玩”MetroUI之磁贴（一）_html/css_WEB-ITnose的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。