53种网页设计师必备的高级CSS技巧

web前端 2008/05/28 10,142

CSS是很重要的，它意味着布局、页面设计和网页信息可以完全的隔离开来，而只需要更改一个CSS样式表文件。在 过去的几年中，许多优秀的Web开发者，为我们创造了很多优秀的CSS技术，在此文中，我们就为你收集了53个CSS技巧。如果你是一个网页设计爱好者，那开始享受这份列表吧。

1. CSS Based Navigation CSS导航菜单

鼠标悬浮时的凸出效果比较酷。

CSS-Technique

2. Navigation Matrix Reloaded

动态高亮的CSS导航菜单，非常有质感。

CSS-Technique

3. CSS Tabs

提供多种CSS Tab选项卡导航菜单样式。

CSS-Technique

4. CSS Bar Graphs (CSS For Bar Graphs)

用CSS创建的图形工具条。

CSS-Technique

5. Collapsing Tables: An Example

一个CSS表格演示

CSS-Technique

6. Adam’s Radio & Checkbox Customisation Method

较简单的复选框 效果

CSS-Technique

7. CSS Image Replacement

用CSS来实现图片替换文本标题的技术教程。

CSS-Technique

8. CSS Shadows (CSS Shadows Roundup)

CSS阴影效果生成技术

CSS-Technique

9. CSS Rounded Corners Roundup (Nifty Corners)

用CSST生成圆角效果

CSS-Technique

10. Drop Cap - Capital Letters with CSS

CSS生成的首字下沉效果

CSS-Technique

11. Define Image Opacity with CSS

使用CSS来修改图像的透明度

CSS-Technique

12. How to Create a Block Hover Effect for a List of Links

让所有HTML元素都能实现悬浮效果

CSS-Technique

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

使用Javascript和CSS结合实现的样式化引用

CSS-Technique

14. CSS Diagrams

用CSS实现的一览图

CSS-Technique

15. CSS Curves

CSS实现的曲线图布局

CSS-Technique

16. Footer Stick 可以让你在网页的底部覆盖一个DIV层

CSS-Technique

17. CSS Image Map

CSS实现的图片地图

CSS-Technique

18. CSS Image Pop-Up

用CSS达到图片的弹出展示效果，不需要任何Javascript

CSS-Technique

19. CSS Image Preloader

CSS的一个背景图片Hack方法

CSS-Technique

20. CSS Image Replacement for Buttons

CSS按钮生成

CSS-Technique

21. Link Thumbnail

用CSS实现的链接缩略图

CSS-Technique

22. CSS Map Pop

CSS地图弹出提示

CSS-Technique

23. PHP-based CSS Style Switcher

基于PHP的网站风格切换

CSS-Technique

24. CSS Unordered List Calender (CSS Styled Calender)

CSS结合无序列表实现的漂亮日历

CSS-Technique

25. CSS-Based Forms: Techniques

使用CSS实现的表单技术

CSS-Technique

26. CSS-Based Tables: Techniques

使用CSS实现的表格技术，主要是有高亮单元格等功能。

CSS-Technique

27. Printing Web-Documents and CSS

打印网页文档和CSS的服务

CSS-Technique

28. Improved Links-Display for Print-Layouts with CSS

CSS实现的打印布局

CSS-Technique

29. CSS-Submit Buttons

CSS实现的提交按钮，鼠标悬浮时实现切换效果

CSS-Technique

30. CSS Teaser Box

CSS实现的漂亮的圆角阴影模块

CSS-Technique

31. CSS Tricks for Custom Bullets
CSS-Technique

32. Ticked Off Links Reloaded

很酷的CSS关闭链接技巧

CSS-Technique

33. CSS Zooming

CSS实现文本大小的缩放

CSS-Technique

34. Creating a Star Rater using CSS

利用CSS制作星形评级系统

CSS-Technique

35. The ways to style visited Links

简单的样式化已经点击过的链接

CSS-Technique

36. PDF, ZIP, DOC Links Labeling

利用CSS为PDF、ZIP、DOC指定不同的图标

CSS-Technique

37. Displaying Percentages with CSS

利用CSS实现的百分度进度条显示

CSS-Technique

38. Image Floats without the Text Wrap

一个CSS的图片排版技术

CSS-Technique

39. Let visitors decide, whether or not will they open link in a new window

让使用者决定，是否在一个新窗品打开链接

CSS-Technique

40. Simple accessible external links

简单的对外部链接的美化效果

CSS-Technique

41. Zebra Table with JavaScript and CSS

使用Javascript和CSS实现的表格特效

CSS-Technique

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

利用CSS实现的垂直居中效果

CSS-Technique

43. Unobtrusive Sidenotes

CSS实现的旁注特效

CSS-Technique

44. Image Caption with CSS (Styled Images with Caption)

样式化图片的标题说明

CSS-Technique

45. Dynamic Piechart with CSS

动态的CSS饼形图表

CSS-Technique

46. Format Footnotes with CSS

使用CSS格式化页脚注释

CSS-Technique

47. Hierarchical Sitemap with CSS

利用CSS完成的层联树形菜单

CSS-Technique

48. Snook’s Resizable Underlines

CSS-Technique

49. Switchy McLayout: An Adaptive Layout Technique

CSS的自适应布局技巧

CSS-Technique

50. StyleMap: CSS+HTML Visual Sitemap

CSS+HTML的视觉网站地图

CSS-Technique

51. Custom Reading Width

自定义阅读内容的宽度

CSS-Technique

52. CSS Alert Message

CSS-Technique

53. CSS Production Notes

CSS-Technique

 

PS:本文摘自：帕兰映像

本文链接： 53种网页设计师必备的高级CSS技巧     本文作者：Mars Lau

转载请以链接形式注明原始出处和作者，“心情日志”文章谢绝转载！

标签：,
CSS定义网页滚动条 造句

相关文章

1条留言 我要留言

  • 1 楼 Coolray  |  2009-08-20 at 10:42 上午  

    在这里又碰到帕兰印象了，呵呵，缘分啊！感谢博主转载。

支持Gravatar头像,想要一个Gravatar个性头像?可以到这里申请一个

请 登陆 评论

文章分类

订阅&功能