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 :)）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
Metro UI试手之Tile
</title>
<style type='text/css'>
body{font-family:'微软雅黑';
background-color:#8b37f1;}
p{color:white;}
.tile{
display:inline-block;
width:200px;
height:100px;
margin:5px;
padding:0;
background-color:blue;
color:white;
font-family:'微软雅黑';
font-size:30px;
vertical-align:middle;
} .tile-yellow{
background-color:yellow;
color:blue;
} .tile-green{
background-color:green;
color:white;
}
.tile label{
width:200px;
height:100px;
display:block;
}
.content{
display:inline-block;
height:100px;
width:200px;
line-height:100px;
vertical-align:middle;
text-align:center;
}
.tile input[type='checkbox']{
float:right;
display:none;
}
.symbol{
display:inline-block !important;
width:40px;
height:40px;
position:relative;
top:2px;
right:2px;
float:right;
margin-bottom:-40px;
}
.tile input[type='checkbox']:checked ~.symbol{
background-image:url('http://sandbox.runjs.cn/uploads/rs/169/rvy7e5su/tile_selected_symbol.png');
}
</style>
</head>
<body>
<p>
Metro UI之磁贴（Tile）
</p>
<div class='tile'>
<label> <input type='checkbox' />
<span class='symbol'>
</span>
<span class='content'>
简单磁贴
</span>
</label>
</div>
<div class='tile tile-yellow'>
<label> <input type='checkbox' />
<span class='symbol'>
</span>
<span class='content'>
简单磁贴
</span>
</label>
</div> <div class='tile tile-green'>
<label> <input type='checkbox' />
<span class='symbol'>
</span>
<span class='content'>
简单磁贴
</span>
</label>
</div>
</body>
</html>
Metro UI之磁贴（Tile）
简单磁贴
简单磁贴
简单磁贴