40个很不错的CSS技术#

原文：酷壳 – CoolShell · 陈皓 · 2010-10-08 · 15,770 人阅读

以前发布过《30种时尚的CSS网站导航条》，下面是40个CSS的技术，可以让你的网页有更好的用户体验。希望你喜欢

#1. A CSS styled table version 2

[

](http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/)

#2. A CSS-based Form Template

[

](http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/)

#3. A Stripe of List Style Inspiration

[

](http://www.wpdfd.com/issues/82/list_style_inspiration/)

#4. Accessible expanding and collapsing menu

[

](http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/)

#5. Advanced CSS Menu Trick

[

](http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/)

#6. Animated Rollover Arrow

[

](http://www.pmob.co.uk/pob/animated.htm)

#7. Animations

[

](http://i.imgur.com/dYFBl.png)

#8. Background Size

[

](http://i.imgur.com/OcbHO.png)

#9. Better Ordered Lists (Using Simple PHP and CSS)

[

](https://css-tricks.com/better-ordered-lists-using-simple-php-and-css/)

#10. Box Shadow

[

](http://i.imgur.com/e5VlA.png)

#11. Creating a table with dynamically highlighted columns

[

](http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html)

#12. Creating bulletproof graphic link buttons with CSS | 456 Berea Street

[

](http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/)

#13. Creative and Cool Uses of the CSS Border Property

[

](http://www.cssnewbie.com/12-creative-and-cool-uses-for-the-css-border-property/)

#14. Creative Use of PNG Transparency in Web Design

[

](http://www.digital-web.com/articles/web_standards_creativity_png/)

#15. Cross Browser CSS SlideShow

[

](http://www.cssplay.co.uk/menu/slide_show)

#16. Cross Browser Multi-Page Photograph Gallery

[

](http://www.cssplay.co.uk/menu/lightbox.html#Portraits)

#17. CSS Bar Graphs: Examples

[

](http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55)

#18. CSS Based Navigation

[

](http://www.nundroo.com/navigation/)

#19. CSS Curves

[

](http://storage.couchfort.net/cssCurves/)

#20. CSS Dock Menu

[

](http://www.ndesign-studio.com/blog/mac/css-dock-menu)

#21. CSS Double Lists

[

](http://mikecherim.com/experiments/css_double_lists.php)

#22. CSS-Based Tables: Technique

[

](http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/)

#23. CSS Gradient Text Effect

[

](http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/)

#24. CSS List Boxes

[

](http://mikecherim.com/gbcms_xml/news_page.php?id=24#n24)

#25. CSS Map Pop

[

](http://mikecherim.com/experiments/css_map_pop.php)

#26. CSS Pricing Matrix

[

](http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html)

#27. CSS Production Notes

[

](http://24ways.org/2006/css-production-notes)

#28. CSS Pull Quotes

[

](http://www.designmeme.com/articles/csspullquotes/)

#29. CSS Rounded Corners Roundup (Nifty Corners)

[

](http://www.smileycat.com/miaow/archives/000044.php#nojavascript)

#30. CSS SiteMap

[

](http://wordpress.betech.virginia.edu/index.php/2007/10/03/css-sitemap/)

#31. CSS Speech Bubbles

[

](http://www.willmayo.com/2007/02/10/css-speech-bubbles/)

#32. CSS Stacked Bar Graphs

[

](http://www.thewojogroup.com/2008/12/css-stacked-bar-graphs/)

#33. CSS Step Menu

[

](http://codylindley.com/CSS/325/css-step-menu)

#34. CSS Tabs

[

](http://exploding-boy.com/images/cssmenus/menus.html)

#35. CSS Teaser Box

[

](http://www.456bereastreet.com/lab/teaser/)

#36. CSS Zooming

[

](http://www.deltatangobravo.com/images/zoom/)

#37. CSS: Menu Descriptions

[

](http://mikecherim.com/experiments/css_menu_descriptions.php#)

#38. CSS-Based Forms: Techniques

[

](http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/)

#39. Date Display Technique with Sprites

[

](https://css-tricks.com/date-display-with-sprites/)

#40. Displaying Percentages with CSS

[

](http://www.barenakedapp.com/the-design/displaying-percentages)

文章来源：http://technologytosoftware.com/best-css-techniques-you-shouldt-miss-for-effective-coding.html

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

---

转载请注明作者和出处：酷壳 – CoolShell。本文仅供学习，请勿用于商业用途。