LearningjQuery.com 博客帖子列表的左邊有一個(gè)很酷的日期，如圖：

從圖中我們看到，“2009”垂直排列在右側(cè)。用Firebug查看元素，文本“2009”出現(xiàn)在html結(jié)構(gòu)之中，本文介紹實(shí)現(xiàn)這種效果的兩種方法。

一、行使Sprite技術(shù)來(lái)實(shí)現(xiàn)

其實(shí)現(xiàn)過(guò)程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了具體介紹，這里把其實(shí)現(xiàn)過(guò)程作一個(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ǔ)義上的完整性。

在類(lèi)似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ì)定位，并使用統(tǒng)一張背景圖片。設(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 ...
 

關(guān)于濁色大家熟悉多少？

有人說(shuō)是不純凈的顏色，有的人根本就沒(méi)這個(gè)概念，有的人說(shuō)是設(shè)計(jì)師的顏色。那他究竟是什么呢？我個(gè)人的理解可以從兩方面來(lái)詮釋它：

（1）從 拾色器 上解析，看下圖：

（以色相為紅色做圖例）

紅色+白色 它的亮度越來(lái)越高 ，紅色+黑色 它的亮度越來(lái)越暗，這個(gè)是屬于垂直色，只是單獨(dú)加入白或黑來(lái)調(diào)整紅色的明暗。注：黑、白是無(wú)彩色
紅色+白+黑混雜在一路，可以看成從紅色那個(gè)顏色的端點(diǎn)向左下角散發(fā)出來(lái)，紅色加詬誶混雜在一路形成不飽和的紅色（顏色），我把它定義為濁色（相關(guān)其他地方的說(shuō)法是不飽和的顏色或純度不高的顏色）。

（2）從畫(huà)水粉（水彩）方面解析

高中時(shí)期學(xué)美術(shù)，考美術(shù)相關(guān)的大學(xué)，必須考的一課就是水粉畫(huà)。畫(huà)水粉畫(huà)的必須工具和物料：畫(huà)筆、水粉紙、調(diào)色盤(pán)、水粉顏料（顏色有許多種，把人們熟悉的7種色彩、詬誶，2種或以上調(diào)和了不同的中心色，看具體有多少顏色見(jiàn)文章下面的小知識(shí)部分）。以上廢話不多說(shuō)了。一般水粉顏料混雜4種以上，或加白色、黑色，外加水的分量（因?yàn)樗�粉顏料自己的特質(zhì)需要加清水稀釋來(lái)作畫(huà)），等等因素都會(huì)降低一種顏色的純度，使其變得污濁，顏料疊加越多，越混沌不堪，調(diào)和的顏色越發(fā)顯得臟。畫(huà)過(guò)畫(huà)的人都知道當(dāng)每次去洗調(diào)色板的時(shí)候那個(gè)水都是灰色的以無(wú)法很明確的辨別是偏向什么色相的顏色，剩下的只是污濁的沒(méi)有效處的臟水。

結(jié)合實(shí)例分析：

上圖背景顏色 拾色器上顯示情況

上圖文字顏色 拾色器上顯示情況

看上圖，是一個(gè)濁色運(yùn)用的不錯(cuò)的網(wǎng)站，背景采用了綠+黃+詬誶 、藍(lán)+詬誶等顏色，整個(gè)畫(huà)面基調(diào)為藍(lán)綠米灰的基調(diào)，明暗處于中灰亮度階段。是一個(gè)特別很是典型的濁色配色的網(wǎng)站。
顏色處于灰色地帶顏色的調(diào)配是難把握和權(quán)衡，尤其是需要注重明度、純度、色相的平衡。另外，增補(bǔ)一點(diǎn)，上圖網(wǎng)站題目文字采用了純度比較高的顏色，這樣的做法是起到了一定的純度差平衡，不至于整個(gè)畫(huà)面都是灰灰的一片。

小知識(shí)：

>>常見(jiàn)水粉顏料顏色種類(lèi)

紅棕色系：深紅、大紅、朱紅、玫瑰紅、紫紅、肉色、橙紅、土紅、棕紅、赭石、熟褐
黃色系：橘黃、土黃、深黃、中黃、淡黃、檸檬黃 綠色系：墨綠、深綠、橄欖綠、中綠、粉綠、淡綠、黃綠、翠綠、草綠、淺草綠、深草綠
藍(lán)紫色系：普藍(lán)、群青、天藍(lán)、湖藍(lán)、鈷藍(lán)、鮮藍(lán)、酞菁藍(lán)、紫羅蘭、青蓮
高級(jí)灰：藍(lán)蓮、牙黃灰、淺蟹灰、豆沙紅、豆綠灰、月灰、米陀
灰度：煤黑、鈦白、培恩灰
特殊顏色：熒光桃紅、熒光橙、熒光黃、熒光綠、金、銀、紫銅