CSS 日期垂直排列的两种技巧
2009-08-29 19:19
369 查看
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年计)具体的背景位置,以显示与其相对应的图片。
上一页12 下一页
从图中我们看到,“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 ...
上一页12 下一页
相关文章推荐
- css实现文字居左日期居右排列最简…
- CSS多行文字垂直居中的两种方法
- 两种方法实现CSS垂直居中
- 两种CSS控制:fieldset垂直滚动和图片文字垂直居中
- 利用CSS让元素垂直居中的两种实现方法
- CSS让图片垂直居中的几种技巧
- CSS让图片垂直居中的几种技巧
- css水平垂直居中的几个方法和技巧/居中之美
- 两种方式实现图片按比例响应式缩放、并自动裁剪的css技巧
- CSS两种水平垂直居中
- CSS让高度不确定图片垂直居中的几种技巧
- CSS实战技巧:块级元素水平垂直居中
- 两种方法实现CSS垂直居中
- 用css实现图片垂直居中的使用技巧
- CSS让图片垂直居中的几种技巧
- css实现垂直居中的常用技巧
- CSS控制文本垂直居中的技巧
- CSS实战技巧:图片(大小不固定)的水平垂直居中
- CSS实战技巧:大小不固定,多行文字的垂直居中
- 两种方法实现CSS垂直居中