css|技巧|站長 53 CSS-Techniques You Couldn’t Live Without

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.

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.

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


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

Navigation Matrix Reloaded //導航矩塊翻轉

3. CSS Tabs //CSS標籤

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

5. Collapsing Tables: An Example //壓縮表格:一個執行個體

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

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定義映像半透明

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 //連結縮圖

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的表格:技巧

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竅門

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連結的標註

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實現多條紋的表格

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實現布局腳註

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 //自訂閱讀寬度

CSS Alert Message //CSS提示資訊

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

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


Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >



如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。