CSS网页制作实例教程:非常酷的日期效果

LearningjQuery.com的博客日志上的日期效果非常的酷，如下图：

其中文字的样式和垂直的年份就会告诉你这不是用图片来完成的。而且在标记语言中日期信息是是以文字出现的，就像通常的那样。

通过Firebug查看，代码非常简洁漂亮！

很明显每一个日期并没有各自的图片。它们都出自同一张图片（css sprites!），图片的不同地方被放置上了不同的内容：天、月和年。也许你会记得这和一年前Joost de Valk posted about 上的技术是一样的。

来看一下这张漂亮的图片：

HTML代码：

有一个外部包装和三个区域。我们就会知道如何组合这些部分：

在一个CMS（内容管理系统），例如wordpress中，背后的代码应该是这样：

CSS代码

CSS才是精灵发挥作用的地方。利用我们已经在HTML代码中设置的特殊的类名称，我们可以设置使用图片的哪一部分。

首先，我们给父元素应用相对位置定位。然后我们给其中的三个部分应用绝对定位。我们让这三部分使用相同的图片（我们的精灵），

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!