搜索:
首页 >> 网页设计 >> CSS/HTML >> 用CSS3和HTML5五步打造便签效果

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

2012-4-25 asp之家 网友评论投递文章
在本教程中,你会学到如何把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的所有的浏览器中都生效。

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

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

Tags:css3  html5  便签 
站长工具
友情链接批量查询:
相关文章
loading 请稍等,评论加载中...

学习Asp到Asp之家(Aspxhome.com)

闽ICP备09044667号-4