用CSS3和HTML5五步打造便签效果

在本教程中，你会学到如何把HTML的列表项（li元素）转换成下图的“便签墙”。该效果分5步实现。内核为webkit的Safari和Chrome浏览器以及Firefox和Opera中支持该效果，其它浏览器不能实现倾斜和动画效果（译者在IE9中进行了亲测，无法实现）。

演示 下载

第一步：HTML和基本的方形

我们先从最简单的，能在所有浏览器上正常显示的便签做起。 因为我们要使用HTML5来实现效果，便签的HTML内容的最外一层是不排序列表，其中包含多个列表项，每个列表项中又包含其它元素链接：

注意：每个便签的内容都包括在链接元素当中（即），同时通过键盘可对其进行操作。如果想要对列表项实现效果，我们需要设置atabindex属性，Google字体API找到名为“Reenie Beanie”的字体实现字体替换。使用API最简单的办法就是玩玩Google字体预览器：

CSS代码很简单就把便签背景色变成黄色：

重新设置列表项在浏览器中通常显示的外边距（margin）和内边距（padding），并去掉它的样式（list-style:none）（译者注：即去掉li元素前的圆点，方框等样式）。

然后设置UL元素的内边距并隐藏它的溢出属性overflow，这样做可以保证稍后为列表项进行浮动排列（float）时，他们不会超出列表，文档中的下列元素会自动清除浮动。

我们把黄色的矩形整体作为链接，并为其设计样式，所有的列表项（即代码中的li元素）向左浮动（float:left）。最终就是一系列的黄色方框排列成下图的效果：

这个排列效果（其实是float元素的浮动）在包括IE6的所有的浏览器中都生效。

第二步：投影效果和草书风格字体

现在，为了让便签突出显示，需要给它增添投影效果，然后，使用草书风格的字体替换掉之前的内容。我们通过