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 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title> 6 Metro UI試手之Tile 7 </title> 8 <style type='text/css'> 9 body{font-family:'微軟雅黑'; 10 background-color:#8b37f1;} 11 p{color:white;} 12 .tile{ 13 display:inline-block; 14 width:200px; 15 height:100px; 16 margin:5px; 17 padding:0; 18 background-color:blue; 19 color:white; 20 font-family:'微軟雅黑'; 21 font-size:30px; 22 vertical-align:middle; 23 } 24 25 26 .tile-yellow{ 27 background-color:yellow; 28 color:blue; 29 } 30 31 .tile-green{ 32 background-color:green; 33 color:white; 34 } 35 .tile label{ 36 width:200px; 37 height:100px; 38 display:block; 39 } 40 .content{ 41 display:inline-block; 42 height:100px; 43 width:200px; 44 line-height:100px; 45 vertical-align:middle; 46 text-align:center; 47 } 48 .tile input[type='checkbox']{ 53 float:right; 59 display:none; 60 } 61 .symbol{ 62 display:inline-block !important; 63 width:40px; 64 height:40px; 65 position:relative; 66 top:2px; 67 right:2px; 68 float:right; 69 margin-bottom:-40px; 70 } 71 .tile input[type='checkbox']:checked ~.symbol{ 72 background-image:url('http://sandbox.runjs.cn/uploads/rs/169/rvy7e5su/tile_selected_symbol.png'); 73 } 74 </style> 75 </head> 76 <body> 77 <p> 78 Metro UI之磁貼（Tile） 79 </p> 80 <div class='tile'> 81 <label> 82 83 <input type='checkbox' /> 84 <span class='symbol'> 85 86 </span> 87 <span class='content'> 88 簡單磁貼 89 </span> 90 </label> 91 </div> 92 <div class='tile tile-yellow'> 93 <label> 94 95 <input type='checkbox' /> 96 <span class='symbol'> 97 98 </span> 99 <span class='content'> 100 簡單磁貼 101 </span> 102 </label> 103 </div> 104 105 <div class='tile tile-green'> 106 <label> 107 108 <input type='checkbox' /> 109 <span class='symbol'> 110 111 </span> 112 <span class='content'> 113 簡單磁貼 114 </span> 115 </label> 116 </div> 117 </body> 118 </html>
Metro UI之磁貼（Tile）