首先先上网找了一下Windows Phone 的一些图片，看看在竖屏的手机界面Metro 的格子是如何摆放的，最后确定了如下：

随后确定每个格子放什么内容，链接到哪个url；

然后就是PS 了，最后PS 后大概就跟你看的样子差不多了：

想着为某些格子加上些“动画”效果（如最后的“联系”与“WordPress”的格式，鼠标移动上去会有“动画”），于是便设计了hover 后的图片，打算用CSS Sprite，先合并在原来的图片上。 审查元素，你会看到加载的图片其实是如下面这张

（点击查看原图片）：

最后加载的图片最好是无损压缩一下，减少体积。

原文地址：http://devework.com/metro-style-sidebar.html

额外阅读：

1、sprites优势： 若干小图标拼合成一张图后布局，减少http iis请求数，对于大战大流量网站来说隐形优势很显然的，从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵，使用DIV+CSS Sprites这样可以大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因，同时也减少图片文件数目。

2、sprites缺点 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况; CSS Sprites在开发的时候比较麻烦，你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐; CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情 由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

3、DIVCSS5推荐小结 犹豫拼接图片需要一定经验技巧（做实践即可快速掌握）、测量定位数值、修改不是那么灵活等原因，一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS Sprites，因为使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力，所以不是很推荐小站。但这个布局技巧也必须要学会掌握灵活布局才是目的。小站http请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用，这样比较值得。

CssSpriteTools背景图片定位工具下载：http://pan.baidu.com/s/1gdgt90v

QQ截图20150523162224