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

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

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

其實現(xiàn)過程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了具體介紹，這里把其實現(xiàn)過程作一個簡單的描述。很顯然，我們不希望每一個日期用一張單獨的圖片，因此，將其整合到一張圖片之上，安排年、月、日在圖片的不同區(qū)域，如圖：

1、Html

頁面中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容器包含三個區(qū)域，分別對應(yīng)年月日，這樣很好的保證了語義上的完整性。

在類似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屬性，讓對應(yīng)的圖片得以顯示。

首先，讓class屬性為.postdate的容器相對定位，這樣包含其中的三個區(qū)域就會定位，并使用統(tǒng)一張背景圖片。設(shè)置各自的寬度和高度，并將文字移出以顯示背景圖片。

然后，定義每個月（12）、天天（31）、每年（按10年計）具體的背景位置，以顯示與其相對應(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)于濁色大家熟悉多少？

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

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

（以色相為紅色做圖例）

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

（2）從畫水粉（水彩）方面解析

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

結(jié)合實例分析：

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

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

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

小知識：

>>常見水粉顏料顏色種類

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