Win8出來已有一段時(shí)間了，個(gè)人是比較喜歡Metro UI的。一直以來想用Metro UI來做個(gè)自己的博客，只是都沒有空閑~~今天心血來潮，突然想自己弄一個(gè)磁貼玩玩，動(dòng)手……然后就有了本篇。

Win8中的磁貼可調(diào)整大小，分組，還有更好玩的動(dòng)態(tài)信息顯示。網(wǎng)上也有了比較完整的Web Metro UI框架庫，比較好的一個(gè)??Metro UI template：http://metro-webdesign.info/，(這個(gè)是收費(fèi)的)，還有許多其它的，可參看園子里園友(夢想天空)列舉的：http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html。

本篇的磁貼只實(shí)現(xiàn)了簡單的磁貼樣式和選中效果，用CSS實(shí)現(xiàn)。考慮到磁貼的可選中性，想到了html中的復(fù)選框，核心原理其實(shí)就是用css偽類來實(shí)現(xiàn)。

先看效果截圖吧：

看代碼(很簡單，也可在這里http://runjs.cn/detail/mirwgdac fork一份，實(shí)現(xiàn)你自己的，同時(shí)向大家推薦runjs.cn，這個(gè)真不錯(cuò)，和jsfiddle有的比。也歡迎關(guān)注我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)

簡單磁貼

簡單磁貼

簡單磁貼

聲明：本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請注明出處，感謝您的尊重！如有疑問，請聯(lián)系admin@php.cn處理

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。