芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
7

53 个不可或缺的 CSS 技巧

作者 芒果/分类 代码/发布于 2009-09-05 12:09

CSS 是重要的,它正在越来越广泛的被运用。层叠样式表拥有很多表格布局所没有的优势,首先从布局或者页面的设计与出现在页面中的信息中作严格的分离,从而让页面的设计能够很容易被改变,仅用一个 CSS 文件更换另一个。难道它不够强大吗?恩,是的,其实它很强大。

在过去的几年里,网站开发者写了很多关于 CSS 的文章和开发了很多实用的技巧,这些能帮你节省很多时间。当然,如果你有足够时间也可能发现它们。在下面,你将会发现我们作为网站架构师真正不可或缺的技巧目录。它们确实是必要的,它们使我们的生活更简单。让我们看一看这 53 个基于 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 Stick //页脚帖允许一个网站页面的页脚显示在在浏览器窗口的底部或者网站页面内容的底部中实际最底的一个。
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 产品注释

英文原稿:53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
翻译整理:53 个 CSS 不可或缺的技巧 | 经典论坛

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/53-css-techniques-you-couldnt-live-without/" title="53 个不可或缺的 CSS 技巧" rel="bookmark">53 个不可或缺的 CSS 技巧 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 7 条群众意见

  1. 服装批发 /2009-09-05 16:11

    感谢,我一直都在找 CSS 方面的学习资料! 回应

    #1
  2. hiro /2009-09-06 12:32

    都转载到 smashing magazine 的 07 年初的博志上去了啊,你牛!! 回应

    #2
  3. Hobo /2009-09-06 12:58

    果真很强悍,我也要转载呵呵。 回应

    #3
  4. 万戈 /2009-09-07 22:14

    天呐,我发现我的 CSS 白学了,居然还有这么多强大的效果。 回应

    #4
  5. ?
    纯 CSS 打造产品放大展示效果 » 生活演播室 /2009-09-08 12:50

    […] CSS 效果请见:《53 个不可或缺的 CSS 技巧》» 转载请注明来源:Life Studio » 《纯 CSS 打造产品放大展示效果》[…] 回应

    #5
  6. crossYou /2009-09-08 19:31

    来看看,正在学习制作中,真的不容易。呵呵。 回应

    #6
  7. ?
    53 个不可或缺的 CSS 技巧 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-06-14 18:45

    […] 转载至:53 个不可或缺的 CSS 技巧 | 芒果小站 分类: html 标签: 暂无相关日志 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #7

下面我简单说几句