53個CSS-不可或缺的技巧

作者Blank來源www.planabc.net發佈時間22007-3-5 9:51:46發佈人Clear

原文：http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
翻譯：Blank（懌飛）

53 CSS-Techniques You Couldn’t Live Without
53個CSS-不可或缺的技巧

Quote:

CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is.

CSS是重要的，它正在越來越廣泛的被運用。層疊樣式表擁有很多表格佈局所沒有的優勢，首先從佈局或者頁面的設計與出現在頁面中的信息中作嚴格的分離，從而讓頁面的設計能夠很容易被改變，僅用一個CSS文件更換另一個。難道它不夠強大嗎？恩，是的，其實它很強大。

Quote:

Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.

在過去的幾年裏，網站開發者寫了很多關於CSS的文章和開發了很多實用的技巧，這些能幫你節省很多時間。當然，如果你有足夠時間也可能發現它們。在下面，你將會發現我們作爲網站架構師真正不可或缺的技巧目錄。它們確實是必要的，它們使我們的生活更簡單。讓我們看一看這53個基於CSS的技巧，如果你做網站開發，應該永遠都願意掌握它們。

Quote:

Thanks to all developers who contributed to accessible and usable css-based design over the last few years. We really appreciate it. Thanks!

感謝所有的在過去幾年裏在易用和可用的基於CSS設計方面作出貢獻的開發者們，我們真的很感謝他們！謝謝你們！

1. CSS Based Navigation //基於CSS的導航

2. Navigation Matrix Reloaded //導航矩塊翻轉

3. CSS Tabs //CSS標籤

4. CSS Bar Graphs //CSS條狀圖表

5. Collapsing Tables: An Example //壓縮表格：一個實例

6. Adam’s Radio & Checkbox Customisation Method //亞當的單選框和複選框的用戶化方法

7. CSS Image Replacement //CSS圖像替代

8. CSS Shadows(CSS Shadows Roundup) //CSS陰影（CSS陰影綜述）

9. CSS Rounded Corners Roundup (Nifty Corners) //CSS圓角綜述（漂亮的拐角）

10. Drop Cap-Capital Letters with CSS //用CSS實現首字母下沉

11. Define Image Opacity with CSS //用CSS定義圖像半透明

12. How to Create a Block Hover Effect for a List of Links //如何給鏈接列表創建鼠標懸停的區塊效果

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS) //用CSS實現引用（用JavaScript和CSS實現自動引用）

14. CSS Diagrams //CSS圖表

15.CSS Curves //CSS曲線

16. Footer Stickallows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

頁腳帖允許一個網站頁面的頁腳顯示在在瀏覽器窗口的底部或者網站頁面內容的底部中實際最底的一個。