本站DeveWork.com 右侧边栏有个“类Metro风格侧边栏”的小工具，半年前的时候微软所带来的“Metro风格”（也叫Modern 风格、Windows UI）还挺流行，因此当初在设计这个主题的时候想着运用一下。具体实现的起来也不是很难，CSS 热点+CSS Sprite 技术，纯CSS+Html。具体见下文。
实现原理简介
CSS 图片热点（热区）：大概就是通过CSS 分隔整张图片为多个区域，为之热点（hotspot），不同区域链接到不同网址。
CSS Sprite：中文翻译为“CSS 雪碧、CSS妖精、CSS图片合并”——将多个图片整合到一个图片中，然后再用CSS来定位。
综合使用两种方法的好处是，减少了http 请求数，进而减少服务器负载，实现加速的效果。经过多次测试，兼容性非常不错。
“类Metro风格侧边栏” 实现思路
首先Jeff 的话先上网找了一下Windows Phone 的一些图片，看看在竖屏的手机界面Metro 的格子是如何摆放的，最后确定了如下：
随后确定每个格子放什么内容，链接到哪个url；然后就是PS 了，最后PS 后大概就跟你看的样子差不多了：
想着为某些格子加上些“动画”效果（如最后的“联系”与“WordPress”的格式，鼠标移动上去会有“动画”），于是便设计了hover 后的图片，打算用CSS Sprite，先合并在原来的图片上。
审查元素，你会看到加载的图片其实是如下面这张（点击查看原图片）：
最后加载的图片最好是无损压缩一下，减少体积。
代码
CSS
/*metro侧边栏*/
#metroside{background:url(images/8.jpg) no-repeat;width:300px;height:446px;margin:0;padding: 0;text-indent: -999em}
#metroside a{display:block}
#metroside ul{margin:0;padding: 0;}#metroside li{list-style: none;display:inline;float:left;margin:0;padding: 0;background:none}#metroside a:hover{background:#fff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity: 0.3}
#metroside .one a{width:144px;height:144px;margin-top:3px;margin-right:7px}
#metroside .two a{width:70px;height:70px;margin-top:3px;margin-right:6px}
#metroside .two a:hover{background:url(images/8.jpg) -3px -600px no-repeat;width:70px;height:70px;opacity:1;filter:alpha(opacity=100)}
#metroside .thr a{width:70px;height:70px;margin-top:3px;}
#metroside .fou a{width:70px;height:70px;margin-top:4px;margin-right:6px}
#metroside .fiv a{width:70px;height:70px;margin-top:4px;}
#metroside .fiv a:hover{background:url(images/8.jpg) -227px -600px no-repeat;opacity:1;filter:alpha(opacity=100)}
#metroside .six a{width:297px;height:144px;margin-top:4px;text-decoration: none}
#metroside .sev a{width:144px;height:144px;margin-top:4px;margin-right:7px}
#metroside .sev a:hover{background:url(images/8.jpg) 0 -452px no-repeat;opacity:1;filter:alpha(opacity=100)}
#metroside .eig a{width:144px;height:144px;margin-top:4px;}
#metroside .eig a:hover{background:url(images/8.jpg) -151px -452px no-repeat;opacity:1;filter:alpha(opacity=100)}
html:
在WordPress 上，Jeff是将css 代码放到style.css 中，html直接在后台新建一个文本小工具，粘贴html代码。
在我写这篇文章，发现半年前的代码其实还可以优化一下，但，偷懒了。至于所谓“动画”的实现，还可以高级一点，比如用jquery 实现更加漂亮的效果、或者CSS3特效，但，技术上还达不到。