日期垂直排列的两种技巧
作者:dishuipiaoxiang 来源:Denis'Blog 发布时间:2009-08-28 12:38:00
标签:css,日期,垂直,技巧
LearningjQuery.com 博客帖子列表的左边有一个很酷的日期,如图:
从图中我们看到,“2009”垂直排列在右侧。用Firebug查看元素,文本“2009”出现在html结构之中,本文介绍实现这种效果的两种方法。
一、利用Sprite技术来实现
其实现过程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了详细介绍,这里把其实现过程作一个简单的描述。很显然,我们不希望每一个日期用一张单独的图片,因此,将其整合到一张图片之上,安排年、月、日在图片的不同区域,如图:
1、Html
页面中html结构如下:
<div class="postdate">
<div class="month m-06">Jun</div>
<div class="day d-30">30</div>
<div class="year y-2009">2009</div>
</div>
.postdate容器包含三个区域,分别对应年月日,这样很好的保证了语义上的完整性。
在类似wordpress这样的CMS系统中,其后端代码是这样的:
<div class="postdate">
<div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>
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 ...
0
投稿
猜你喜欢
- 英文原文:http://www.smashingmagazine.com/2008/08/18/译文原文:http://blog.bingo
- 第一类工厂相当于mootools的Native方法,用于创建一些具有扩展能力的类,但这些类并没有继承能力,此类工厂也不能以某个类作为蓝本创建
- 经常用FLASH嵌入到网页里面,那咋能躲过W3C那个家伙呢?看下面!<object type="applicati
- 代码如下:USE TestDB declare @conversation uniqueidentifier while exists (s
- FileSystemObject、Folder 和 File 对象的一些方法都与通过 TextStream 对象创建、读取或写入文件有关。虽
- 在MySQL的管理过程中,会遇到PC Server脱机或者重启,我需要在主机启动后再将MySQL服务启动。如果上百台或者更多的MySQL主机
- 内容摘要:“ASP”(Active Server Pages)作为一种典型的服务器端网页设计技术,被广泛地应用在网上银行
- 这段时间在处理SQL server 2000 SP4补丁打不上的问题上花了不少时间,回头想想应该总结一下:系统说明:dell1800服务器,
- udf_WeekDayName 代码如下:CREATE FUNCTION [dbo].[udf_WeekDayName] ( ) RETUR
- Microsoft SQL Server 2000 能提供超大型系统所需的数据库服务。大型服务器可能有成千上万的用户同时连接到 SQL Se
- 在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到Macromedia DreamWeaver中的Lay
- rs.open sql,conn:如果sql是delete,update,insert则会返回一个关闭的记录集,在使用过程中不要来个rs.c
- 这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉,但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性,我指的是旧的 CS
- 随机背景--当你每次进入该页面时,从已指定的图片文件夹中,随机选取一个图片作为背景显示。这里介绍的方法是用ASP+CSS来实现的。 &nbs
- 很早之前就在PJ的blog上看到可以用VS2005调试ASP程序,但是没有写出具体的步骤,后来一次偶尔也让我找到了方法,但是一直没把它写出来
- 当你的查询相对简单的时候,每次从头开始创建SQL语句也不费什么工夫,不过,复杂的查询就不同了,每次都从头来会产生很多开发错误。因此,一旦让S
- CSS布局作为一个热门技术,发展的确有些缓慢。CSS最早被提议在1994年,最早被浏览器支持在1996年,CSS一直被力捧为传统的以HTML
- NOMONEYDAY123114321-45324212-102250331008为了符合阅读习惯,最终报表希望是如下格式:NOMONTUE
- List:1. 什么叫商品评论?2. 评论体系的存在意义3. 评论体系的现状4. 都有哪些元素5. 该如何设计?6. 评论体系之外1.什么叫
- asp压缩access数据库,具体asp代码见下: Class DatabaseTools &n