html中设置时间排序,CSS 日期垂直排列的两种技巧

LearningjQuery.com 博客帖子列表的左边有一个很酷的日期，如图：

从图中我们看到，“2009”垂直排列在右侧。用Firebug查看元素，文本“2009”出现在html结构之中，本文介绍实现这种效果的两种方法。

一、利用Sprite技术来实现

其实现过程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了详细介绍，这里把其实现过程作一个简单的描述。很显然，我们不希望每一个日期用一张单独的图片，因此，将其整合到一张图片之上，安排年、月、日在图片的不同区域，如图：

1、Html

页面中html结构如下：

Jun

30

2009

.postdate容器包含三个区域，分别对应年月日，这样很好的保证了语义上的完整性。

在类似wordpress这样的CMS系统中，其后端代码是这样的：

2、Css

css是sprite真正发挥作用的地方，利用html中的定义的class属性，让对应的图片得以显示。

首先，让class属性为.postdate的容器相对定位，这样包含其中的三个区域就会绝对定位，并使用同一张背景图片。设置各自的宽度和高度，并将文字移出以显示背景图片。

然后，定义每个月(12)、每天(31)、每年(按10年计)具体的背景位置，以显示与其相对应的图片。

.postdate {

position: relative;

width: 50px;

height: 50px;

float: left;

}

.month, .day, .year {

position: absolute;

text-indent: -1000em;

background-image: url(/wp-content/themes/ljq/images/dates.png);

background-repeat: no-repeat;

}

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

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

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

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

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

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

... more like this ...

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

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

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

... more like this ...

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

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

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

... more like this ...