CSS日期垂直排列的技巧介绍

来源:爱站网时间:2021-02-19编辑:网友分享
今天爱站小编将在本文中为大家详细分享CSS日期垂直排列的技巧介绍,是不是很多用户们都好奇呢?接下来我们就带着疑问一起去看看吧。

今天爱站小编将在本文中为大家详细分享CSS日期垂直排列的技巧介绍,是不是很多用户们都好奇呢?接下来我们就带着疑问一起去看看吧。

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

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

一、利用Sprite技术来实现

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

1、Html

页面中html结构如下:

.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 ...

 

文中就是小编为大家分享CSS日期垂直排列的技巧介绍,以上方法非常简单,希望能够帮助大家解决问题。

 

上一篇:IE img多余5像素空白怎么办

下一篇:CSS Sprite的最佳实践方法

您可能感兴趣的文章

相关阅读