收藏!这148个资源让你成为CSS专家

摘要

迄今为止,我已经收集了100多个精通CSS的资源,它们能让你更好地掌握CSS技巧,使你的布局设计脱颖而出。

迄今为止,我已经收集了100多个精通CSS的资源,它们能让你更好地掌握CSS技巧,使你的布局设计脱颖而出。

CSS3 资源

参考资源与备忘录

1472118575-9293-932.jpg-wh-651x-s-2448728924

1472118575-5558-ioL1e9qi-Rs44-AAKcJpmWKtY369

1472118576-7941-iom1e9ql-yGJZ2AAKVnbPGcPQ816

1472118575-9645-ioL1e9qn2i5OBYAALf7tw67kk692

  • 使用CSS简写 — 一些CSS缩写的参考指南。
  • 网页开发者手册 — This is a massive collection of CSS and other resources, including showcases, tools, and more.搜集了CSS以及一些其他的资源,如示例、工具等。
  • 100个免费的CSS资源 — 大量CSS资源,包括相关的文章、教程、布局等等。

1472118575-3006-ioL1e9qqCDsty8AAHe7yI8NQU505

教程与技巧

  • 从零开始学CSS — 这是一个非常基础的教程,让你从零开始学习CSS并用它创建第一个基础网页。该教程对于那些对网页构建不了解的初学者来说,是很好的资源。
  • 53个生存必备的CSS技巧 — 这里收集了大量的CSS技巧,从菜单到表单再到样式表打印,都有相关介绍。
  • CSS 阴影效果 — 一个关于如何用CSS给图片加阴影的教程。
  • CSS 选择器教程 — CSS选择器的基本介绍以及它们是如何工作的。
  • CSS 导航技巧 — 搜集了37个不同的CSS导航设计。

1472118575-1674-iom1e9q1ewR592AAHbHj72Vxw768

1472118593-5286-iom1e9q4SAIOg0AAISmrUUBfg484

1472118596-1994-ioL1e9q6OTb-0QAAKdvZZ9slU254

1472118597-7034-ioL1e9q7-DuOgQAAI5QcNfhPc257

1472118601-9161-iom1e9q9nCE-mDAAJVf7bzKlg434

1472118602-9878-iom1e9rCPjdc-mAAJ6Sy5iUP0056

1472118602-8131-ioL1e9rEHjPKKnAALy2X85Y3E616

  • CSS Swag: 多栏列表 — A guide to creating semantically-logical, ordered list that wraps through multiple vertical columns一份关于创建语义化的、有序的多栏列表指南。
  • 改善打印版的链接展示 — 示范了打印输出时如何在超链接文本中如何包含链接地址.
  • 高级CSS菜单技巧 — 用CSS创建一个真正酷炫的、高级的、带有模糊效果的菜单。
  • CSS 菜单 — 一个关于用纯CSS2(不包含JS)嵌套列表创建菜单面板的教程。
  • CSS Tab菜单带下拉效果 — 一个关于创建带有下拉效果的CSS菜单教程。

1472118608-9313-iom1e9rFuCKrhKAAIz2DukXLI683

1472118612-9228-ioL1e9rHjg3OoyAAIDdZEcvco293

1472118616-7486-ioL1e9rJigRbfaAAJc8yeQbUk199

1472118616-5133-iom1e9rLTSxAXgAAIaSwEcIIA502

1472118619-8829-ioL1e9rNWC-1h-AAKyTWZEJ2I951

模板与框架

  • 1Kb大的CSS栅格 — 这也许是最简单最紧凑的栅格系统了,但包含了自定义栅格的工具。

1472118619-3678-iom1e9rQeDtzBpAAFex4k-4lM594

1472118623-8362-iom1e9rTGQoHImAAJyVN6tbAU055

  •  免费CSS模板 — 该网站提供了200多个CSS模板,都遵循知识共享署名许可协议。

1472118629-7474-ioL1e9rUvA3QeiAAJKvxAiEnU934

  •  漂亮免费的CSS模板 — 几十个模板让你着手CSS设计,包括动态居中盒子、4栏不定宽布局、宽度固定的盒子上下左右完全居中等。
  • 小型盒子 — 收藏了各种布局的CSS文件。

1472118634-1930-iom1e9rWPDxA8SAADacQN3lxs311

1472118638-9295-ioL1e9rX7QJac3AAJ-ImeSe08362

 画廊与陈列

  • CSS Stars — 画廊提供了一些基于CSS的设计,让你熟读掌握。

1472118637-8076-iom1e9rZrzMDU5AAKcQ8w4GAg313

工具

  • Firebug — 火狐浏览器的一个插件,你可以在该调试器里面看到你的CSS代码,并且可以在里面编辑。

1472118640-3826-ioL1e9rbvR3KKCAAJ2x5o2BgQ662

  •  Aardvark — 火狐浏览器的扩展,可以看到每段HTML及它的类或者id。
  • CSSViewer 1.0.3 — 也是火狐浏览器的扩展工具,你可以看到任何页面的CSS属性。
  • GridFox — 火狐浏览器的另一个扩展,通过在任何网页覆盖一层栅格来辅助栅格设计。
  • CodeBurner — 开发的一款插件,可以在浏览器中看到HTML和CSS的参考资料。

1472118640-6473-iom1e9rdTibVXBAAJrAq4G12Q184

  • IzzyMenu — 一个免费的CSS菜单创建器,支持创建下拉二级菜单。
  • Spanky Corners — 一个圆角盒子生成器。
  • CleanCSS — 一款CSS美化工具。
  • CSS浏览器选择器 — A useful tool for empowering CSS selectors based on the visitor’s browser.一款有用的工具,可以基于访问者的浏览器来使用CSS选择器。
  • CSS 压缩器 — 一款CSS文件压缩器。
  • CSS 布局生成器 — 一个简单、在线的CSS生成器,可以创建一个基础的布局框架。
  • CSSTidy — 一款开源的、可供下载的CSS分析器和优化器。

1472118644-1383-ioL1e9re-h974oAAHkestUaHQ036

  •  CSS驱动CSS压缩器 — 一款CSS压缩工具,根据你的需求,可以有基础和高级的压缩模式。
  • Tabifier — 缩进你的代码。
  • CSSFly — 基于浏览器的CSS和XHTML编辑器,可以实时编辑。

1472118648-1948-ioL1e9rguyUiPgAAH3j1GwYec431

  •  List-O-Matic — 一款可以创建基于列表的导航菜单。
  • Markup Maker — 根据你输入的页面ID来创建一个有效的XHTML/HTML框架。
  • CSSMate — 一款在线CSS编辑器。
  • CSS Type Set — 一个CSS排版生成器。

1472118654-9244-iom1e9riPBKEmxAAEaOKLxqro279

  •  Construct 0.5 — 一款可视的,可以基于蓝图框架创建的布局工具。

1472118654-3155-ioL1e9rjrQ3LH5AAGBy9oIqOM722

特殊的CSS博客和网站

  • CSS技巧 — 来自Chris Coyier的博客。
  • CSS Help Pile — 不断收集CSS相关的教程和资源。

1472118654-2634-iom1e9rlqQ3RheAAG-DUEEY7w161

  • 版权声明: 本文源自 segmentfault, 于3个月前,由整理发表,共 5644字。
  • 原文链接:点此查看原文

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: