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 ... 上一页12 下一页

　　推荐阅读

　　CSS 层叠加的5条原则

首先明确几点在文中所需要用到的概念： 静态定位：position:static（为position属性的默认值）。 动态定位：position:relative或position:absolute或position:fixed。 祖元素：任意包含该元素的>>>详细阅读

本文标题：CSS 日期垂直排列的两种技巧

地址：http://www.17bianji.com/kaifa2/CSS/16724.html

 1/2    1