|
LearningjQuery.com 博客帖子列表的左邊有一個(gè)很酷的日期，如圖：
從圖中我們看到，“2009”垂直排列在右側(cè)。用Firebug查看元素，文本“2009”出現(xiàn)在html結(jié)構(gòu)之中，本文介紹實(shí)現(xiàn)這種效果的兩種方法。
一、利用Sprite技術(shù)來實(shí)現(xiàn)
其實(shí)現(xiàn)過程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了詳細(xì)介紹，這里把其實(shí)現(xiàn)過程作一個(gè)簡(jiǎn)單的描述。很顯然，我們不希望每一個(gè)日期用一張單獨(dú)的圖片，因此，將其整合到一張圖片之上，安排年、月、日在圖片的不同區(qū)域，如圖：
1、Html
頁(yè)面中html結(jié)構(gòu)如下：
<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容器包含三個(gè)區(qū)域，分別對(duì)應(yīng)年月日，這樣很好的保證了語(yǔ)義上的完整性。
在類似wordpress這樣的CMS系統(tǒng)中，其后端代碼是這樣的：
<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真正發(fā)揮作用的地方，利用html中的定義的class屬性，讓對(duì)應(yīng)的圖片得以顯示。
首先，讓class屬性為.postdate的容器相對(duì)定位，這樣包含其中的三個(gè)區(qū)域就會(huì)絕對(duì)定位，并使用同一張背景圖片。設(shè)置各自的寬度和高度，并將文字移出以顯示背景圖片。
然后，定義每個(gè)月（12）、每天（31）、每年（按10年計(jì)）具體的背景位置，以顯示與其相對(duì)應(yīng)的圖片。
.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 ...
出處：
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 日期垂直排列的兩種技巧 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 日期垂直排列的兩種技巧 [1]
第 2 頁(yè) 
