99個CSS技巧-網(wǎng)站制作第1部分
CSS已經(jīng)從根本上改變了網(wǎng)頁設(shè)計，它為設(shè)計師提供了一套可以修改的屬性，使各種技術(shù)使你的頁面看起來正常。
今天我們展示了一個設(shè)計師使用的101種CSS技術(shù)。絕對值得仔細看看！這只是第一個系列，第二部分很快就要來了，敬請期待和欣賞！

CSS Sprites使用CSS定位選擇性顯示復(fù)合背景圖像保存的HTTP請求。為了最大限度地提高可訪問性和可用性，最好使用CSS sprites的圖標或裝飾效果。

CSS Sprites：圖像切片的死亡之吻–說老學(xué)校切割當創(chuàng)建圖像地圖和導(dǎo)航菜單，按鈕，再見。相反，招呼一個看似簡單但功能強大的解決方案基于CSS雪碧。

CSS Sprites：它們是什么，為什么他們很酷，和如何使用它們–CSS技巧

CSS Sprites：如何提高Web性能–AOL.com網(wǎng)站，學(xué)習(xí)如何美國在線和雅虎！使用CSS Sprites來提高他們忙碌的網(wǎng)頁性能

CSS圓角
圓角是最流行和最常用的CSS技術(shù)之一。有很多方法可以用CSS創(chuàng)建圓角，但它們總是需要大量復(fù)雜的HTML和CSS。這里有一些簡單的方法來達到這個效果。
更圓潤的角落與CSS -單一的圖像，PNG為基礎(chǔ)的，流體圓角圓角對話框支持邊界，阿爾法透明度整個，梯度，模式和其他任何你可以想要的。

圓角CSS DIV–簡單邊包含四個div，每個有一個背景圖像和被安置在每個角落。
液體的圓角設(shè)計–液體和透明的滾動–教程和樣式表
山頂角-更容易創(chuàng)造像樣的圓角。

圖像替換技術(shù)
蒂埃里圖像布局：圖像放置與圖像替換（FIR）
這種技術(shù)主要是通過使用CSS替換普通的HTML文本來實現(xiàn)標題，并使用背景圖像來實現(xiàn)特定的外觀。已經(jīng)提出了幾種不同的圖像替換方法，每個方法都有各自的優(yōu)點和缺點。

當你需要圖像置換可以檢查吉爾德/萊文法是由Dave Shea或描述，如果替換的文本鏈接和IE / Mac的CSS支持是必需的，jacoubsen的吉爾德萊文Ryznar紅外法。

滑動門

CSS滑動門介紹了簡單的、基于文本的，語義標記創(chuàng)建視覺上的界面元素的一種新技術(shù)，制作精美，真正靈活的接口組件，擴大和合同文字大小可以如果我們使用兩個單獨的背景圖像。

滑動門

滑動門“框-所有角落-這項技術(shù)的目標是創(chuàng)建與視覺耀斑和絕對數(shù)量的語義正確標記的圓角盒。同時確保他們可以調(diào)整大小，同時保持背景完整。

圖像文本包裝技術(shù)

你有多少次在一塊內(nèi)容中留下了一個圖像，但是想讓內(nèi)容不圍繞你的圖像包裝？

這種技術(shù)允許您包裝圖像文本流控件，以模擬雜志樣式頁面布局。

大貝爾先進的CSS技術(shù)–沙袋部

圖像文本包裝

圍繞圖像包裝的花哨文本

圖像文本換行

等高技術(shù)

CSS的一些令人沮喪的特性之一是，元素只在需要時垂直拉伸。那么我們怎樣才能使所有的柱看起來都是一樣的高度呢？為了解決這個問題，引進了幾種技術(shù)。

偽欄-簡單的秘密是使用垂直平鋪背景圖像，以創(chuàng)建彩色列的錯覺。

等高柱-重新審視-一種方法，使所有列似乎是相同的高度，但不需要人造列樣式背景圖像。

使用CSS的等高框——訣竅是使用CSS屬性顯示：表、顯示：表行和顯示：使容器（在本例中是div元素）的表單元格表現(xiàn)為表單元格?；镜腦HTML結(jié)構(gòu)如下所示：
    <div class="equal">    <div class="row">    <div class="one"></div>    <div class="two"></div>     <div class="three"></div>    </div>    </div>   
 
下面是用于使該結(jié)構(gòu)表現(xiàn)為表的CSS：
 .equal {
            display:table;
    }
    .row {
            display:table-row;
    }
    .row div {
            display:table-cell;
    }

將列表轉(zhuǎn)換為導(dǎo)航欄
為什么要使用列表？因為導(dǎo)航欄或菜單是鏈接列表。標記鏈接列表的最語義方法是使用列表元素。使用列表也有助于提供結(jié)構(gòu)，即使CSS是禁用的。
將列表轉(zhuǎn)換為導(dǎo)航欄——標記非常簡單。它是一個無序列表，每個鏈接包含在一個單獨的列表項中。

uberlink CSS列表菜單把列表分成導(dǎo)航欄

cssmenus–橫向和縱向4級深列表菜單

listamatic

7先進的CSS菜單-一個新的7個先進的CSS菜單技術(shù)，這可能是有用的，在您的下一個設(shè)計項目。

用CSS制作標題

在網(wǎng)頁的標題–標記了H1，H2，H3，H4，H5，H6元素或–幫助讀者確定內(nèi)容部分的目的。如果你的頁眉在視覺上刺激，那么這個部分會更好地吸引讀者的眼球。

標題

標題樣式畫廊-想要一些更時髦的內(nèi)容標題（H1，H2，…）比一個不同的字體或顏色？試試這里列出的標題樣式之一來美化內(nèi)容。

排版標題-提高你的標題排版更具創(chuàng)造性，給他們更多的'流行'，這樣的事情。

用CSS–少量設(shè)計的頭條新聞，我們可以利用CSS樣式的網(wǎng)頁標題抓住讀者的眼球，鼓勵他們閱讀。

CSS陰影技術(shù)

一種建立靈活的CSS下拉陰影的技術(shù)，可以應(yīng)用到任意塊元素，當塊的內(nèi)容改變形狀時可以擴展。

CSS下拉陰影構(gòu)建靈活的CSS下拉陰影，可以應(yīng)用到任意塊元素，可以隨著塊的內(nèi)容改變形狀而展開。

CSS陰影

有趣的陰影-大多數(shù)現(xiàn)有的技術(shù)使用負利潤，而這是一個非常簡單的版本，使用相對定位。

Phil Baines的陰影-這組測試是基于一個文章在一個列表分離的技術(shù)，但較少的CSS編碼的基礎(chǔ)上找到的。

CSS陰影II：模糊的影子–拿起那里的一部分，我離開了，在第二部分設(shè)計師Sergio Villarreal以他的標準的陰影下一級產(chǎn)生溫暖和模糊的影子。

CSS透明度

控制最棘手的事情之一，在一個CSS驅(qū)動的設(shè)計，是前景和背景之間的相互作用的內(nèi)容的透明度。下面是一個列表的不同透明度的方法可能與CSS的最好例子。

部分渾濁–放置文本在圖像有時可以使它很難讀，但Stu Nicholls的方法對文本的背景是“不透明”的使用不透明度的各種方法（包括CSS3）和黑色的文字是那么的可讀性。

CSS透明度

跨瀏覽器變量不透明度與PNG -如何克服對PNG的片狀瀏覽器的支持，這樣你就可以利用這種圖形格式的無損壓縮，阿爾法透明度和可變透明度。

CSS透明性的兩種技巧

各種鏈接技術(shù)

CSS顯示超鏈接提示- CSS家伙告訴我們?nèi)绾潍@得旁邊的超鏈接的小圖標，這意味著如果該鏈接將帶你在外地，打開一個彈出，或鏈接到一個文件（而不是另一個HTML頁面）。這是怎樣的一種方式，在IE7，F(xiàn)irefox和Safari支持這樣做。

訪問訪問鏈接的方式——CSS提供了各種各樣的可能性，使鏈接更加實用，同時保持文本可讀性。我們需要區(qū)分訪問和未訪問的鏈接，但是我們必須保持文本掃描和可讀性。

鏈接縮略圖-顯示即將離開你的網(wǎng)站正是他們要去的用戶。當好奇的鼠標指針懸停在指向站點外部某個位置的鏈接上時，腳本顯示目標頁面的一個小圖像。

用CSS–Iconize Textlinks如果你想尋找更多的圖標來實現(xiàn)，亞歷克斯提供了一個很好的開始。