收集精選了30個使用純CSS完成的強大實踐的優秀CSS技術和執行個體，您将在這裡發現很多與衆不同的技術，比如:圖檔集、陰影效果、可擴充按鈕、菜單等…這些執行個體都是使用純CSS和HTML實作的。
單擊每個執行個體的标題可以被轉向到該技術執行個體的相關教程或說明頁面(英文)，單擊每個執行個體的圖檔截圖可以直接跳轉到相應執行個體的Demo頁面。
一個純淨的基于CSS的圖檔集，滑鼠懸停縮略圖就會顯示放大效果。
手風琴效果的影集，懸停便可拉伸圖檔。
懸停标簽改變分類，懸停縮略圖顯示放大圖。
使用簡單的圖檔和background-position屬性來進行調解。
模仿表格布局，但使用的是清單。圖集是流式寬度。
僅使用了很少XHTML的靜态頁腳。
模仿Windows開始菜單的CSS導航菜單。
使用div和:hover僞類的手風琴效果，這個效果可以垂直顯示也可以水準顯示。
連結在不使用圖檔的情況下看起來像個按鈕。
表格的标題被固定的優秀長表格。
當你懸停在圖檔上時，div容器會顯示更多文字。
一個使用背景圖檔且非常漂亮，被語義化标記的表格。
另一種為圖檔添加圓角的方法。（圓角、邊框、陰影）
關于為不同類型的連結添加圖示的簡單教程。
僅适用了一張圖檔和很少的幾行代碼及标記。
使用嵌套清單的樹形導航，很适合網站地圖頁面。
不使用JavaScript實作透明度技巧（但是以不符合XHTML驗證為代價）
流式跨度和高度的圓角div。
條線圖使用清單<li>。
3款柱狀圖執行個體:使用div和清單标簽的”基本CSS柱狀圖”、”複雜CSS柱狀圖”、”垂直CSS柱狀圖”。
箭頭會平滑的跟随滑鼠移動，沒有使用一丁點JavaScript和gif動畫。
使用了空白div來讓文本能圍繞背景圖中的圖像顯示。
這個執行個體使用透明度設定和簡單的圖檔逐漸在文字上方淡入圖檔。
一個在IE5(Mac)上也能正常工作的彈出技巧。
使用背景圖檔遮蓋，和一個空的span标簽，還有position: absolute聲明來實作文本的漸變效果。
本文轉自寒意部落格園部落格，原文連結：http://www.cnblogs.com/hnyei/archive/2011/09/23/2186535.html，如需轉載請自行聯系原作者