武林網(www.survivalescaperooms.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