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

武林网(www.vevb.com)文章简介：LearningjQuery.com的博客日志上的日期效果非常的酷.

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

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

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

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

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

HTML代码：

1<div class="postdate">

2<div class="month m-06">Jun</div>

3<div class="day d-30">30</div>

4<div class="year y-2009">2009</div>

5</div>

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

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

1<div class="postdate">

2<div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>

3<div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>

4<div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>

5</div>

CSS代码

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

首先，我们给父元素应用相对位置定位。然后我们给其中的三个部分应用绝对定位。我们让这三部分使用相同的图片（我们的精灵），设置它们各自的高度和宽度，再将文字移除出页面。

然后，我们设置每一月（12种可能），每一天（31种可能）和每一年（设置了10年）使用背景图片的不同位置。

01.postdate {position: relative;width: 50px;height: 50px;float: left;}

02.month, .day, .year {position: absolute;text-indent: -1000em;background-image: url(/wp-content/themes/ljq/images/dates.png);background-repeat: no-repeat;}

03.month { top: 2px; left: 0; width: 32px; height: 24px;}

04.day { top: 25px; left: 0; width: 32px; height: 25px;}

05.year { bottom: 0; right: 0; width: 17px; height: 48px;}

06.m-01 { background-position: 0 4px;}

07.m-02 { background-position: 0 -28px;}

08.m-03 { background-position: 0 -57px;}

09... more like this ...

10.d-01 { background-position: -50px 0;}

11.d-02 { background-position: -50px -31px;}

12.d-03 { background-position: -50px -62px;}

13... more like this ...

14.y-2006 { background-position: -150px 0;}

15.y-2007 { background-position: -150px -50px;}

16.y-2008 { background-position: -150px -100px;}

17... more like this ...

希望你能喜欢！

原文：Date Display Technique with Sprites