站長推薦：53個CSS-不可或缺的技巧

css|技巧|站長 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.

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



17. CSS Image Map //CSS映像地圖



18. CSS Image Pop-Up //CSS映像彈出



19.CSS Image Preloader //CSS映像預載



20. CSS Image Replacement for Buttons //CSS按鈕的圖片替換

21.Link Thumbnail //連結縮圖



22. CSS Map Pop //CSS地圖提示



23. PHP-based CSS Style Switcher //基於PHP的CSS樣式改變



24. CSS Unordered List Calender (CSS Styled Calender) //CSS無序列表日曆（CSS設計的日曆）



25. CSS-Based Forms: Techniques //基於CSS的表單：技巧

26. CSS-Based Tables: Techniques //基於CSS的表格：技巧



27. Printing Web-Documents and CSS //列印網站文檔和CSS



28. Improved Links-Display for Print-Layouts with CSS //用CSS改良列印布局的連結顯示



29. CSS-Submit Buttons //CSS提交按鈕



30. CSS Teaser Box //CSS內容摘要盒子

31. CSS Tricks for Custom Bullets //對於定義式列表的CSS竅門



32. Ticked Off Links Reloaded //用記號標出翻轉的連結



33. CSS Zooming //CSS縮放



34. Creating a Star Rater using CSS //用CSS建立星型評價



35. The ways to style visited Links //設計瀏覽過連結的方法

36. PDF, ZIP, DOC Links Labeling //PDF,ZIP,DOC連結的標註



37. Displaying Percentages with CSS //用CSS顯示百分比



38. Image Floats without the Text Wrap //沒有被本文包圍的浮動圖片



39. Let visitors decide, whether or not will they open link in a new window //讓訪問者決定，是否會在新視窗帶開連結



40. Simple accessible external links //簡單易用的外部連結

41. Zebra Table with JavaScript and CSS //用JavaScript和CSS實現多條紋的表格



42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS) //用CSS實現垂直置中（用CSS實現水平和垂直置中）



43. Unobtrusive Sidenotes //不令人信服的旁註



44. Image Caption with CSS (Styled Images with Caption) //用CSS實現映像說明（設計給映像加上說明）



45. Dynamic Piechart with CSS //用CSS實現動態餅圖

46. Format Footnotes with CSS //用CSS實現布局腳註



47. Hierarchical Sitemap with CSS //用CSS實現分等級的網站地圖



48. Snook’s Resizable Underlines //史魯克的可改變大小的底線



49. Switchy McLayout: An Adaptive Layout Technique //馬克布局改變: 一個調適型配置的技巧



50. StyleMap: CSS+HTML Visual Sitemap //樣式地圖：CSS+HTML 形象化的網站地圖

51. Custom Reading Width //自訂閱讀寬度



52. CSS Alert Message //CSS提示資訊



53. CSS Production Notes //CSS產品注釋

原文：http://www.smashingmagazine.com/ ... uldnt-live-without/