148个资源让你成为CSS专家
JarDycus
8年前
<p>迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。</p> <h3>CSS3 资源</h3> <ul> <li><a href="/misc/goto?guid=4959677395791580993" rel="nofollow,noindex">20个学习CSS3的有用资源</a></li> <li><a href="/misc/goto?guid=4959677395887109417" rel="nofollow,noindex">CSS3 风暴 — 提示, 诀窍 和 技巧</a></li> <li><a href="/misc/goto?guid=4959677395980612397" rel="nofollow,noindex">20个非常有用的CSS3教程</a></li> <li><a href="/misc/goto?guid=4959677396067095004" rel="nofollow,noindex">令人激动的CSS3函数与特性: 30多个有用教程</a></li> </ul> <h3>参考资源与备忘录</h3> <ul> <li><a href="/misc/goto?guid=4958877710394763278" rel="nofollow,noindex">CSS属性指引</a> —— 一份清单，按字母表顺序列出了每个CSS属性。</li> </ul> <p><img src="https://simg.open-open.com/show/d28764713da7f28b3ae768fadec6cb4b.jpg"></p> <ul> <li><a href="/misc/goto?guid=4958316969129335118" rel="nofollow,noindex">层叠样式表二修订版1</a> — 这是W3C对CSS 2.1 作出的官方说明。</li> <li><a href="/misc/goto?guid=4959677396209231267" rel="nofollow,noindex">CSS简写指引</a> — 覆盖了基础的CSS缩写形式。</li> <li><a href="/misc/goto?guid=4959677396293202386" rel="nofollow,noindex">CSS速查表</a> — 两份表来自About.com — 一份关于CSS基础特性，一份关于CSS布局。</li> <li><a href="/misc/goto?guid=4959677396377654136" rel="nofollow,noindex">列表速建</a> — 该网站提供了大量的例子，告诉你如何使用CSS创建各种不同风格的列表。</li> <li><a href="/misc/goto?guid=4959677396474142371" rel="nofollow,noindex">经验丰富的CSS设计师给初学者的指南</a> — 这里有大量的资源适用于CSS初学者。</li> <li><a href="/misc/goto?guid=4959677396566918134" rel="nofollow,noindex">组合CSS的5点提示</a> — 这篇文章提供了5个真正有效的方法，让你更好地组织你的样式表（而且，有助于以后的编辑修改）。</li> <li><a href="/misc/goto?guid=4959677396789976049" rel="nofollow,noindex">我的5个CSS提示</a> — 收集了5个用于更好地创建CSS的例子。</li> <li><a href="/misc/goto?guid=4959677396868988310" rel="nofollow,noindex">惯用模式与严格模式</a> - 在现代浏览器里面惯用模式与严格模式指南。</li> <li><a href="/misc/goto?guid=4958537967552276505" rel="nofollow,noindex">CSS速查表(V2)</a> — 一份单页的CSS参考书，列出了所有CSS 2.1的选择器。</li> <li><a href="/misc/goto?guid=4959677397030191247" rel="nofollow,noindex">核心CSS: 第一篇</a> — 一份来自Refcardz的基础CSS参考指南.</li> <li><a href="/misc/goto?guid=4958874365914938078" rel="nofollow,noindex">CSS 简写速查表 (PDF)</a> — CSS简写形式参考书.</li> <li><a href="/misc/goto?guid=4959677397143123069" rel="nofollow,noindex">使用 CSS (层叠样式表)</a> — 基础CSS指南，包含使用CSS的好处介绍.</li> <li><a href="/misc/goto?guid=4959677397229913260" rel="nofollow,noindex">5个方法快速写成高质量的CSS</a> — 写出高效CSS的一些提示。</li> <li><a href="/misc/goto?guid=4959677397313168750" rel="nofollow,noindex">使用CSS优化网页打印效果</a> — 创建适用于打印的样式表指南.</li> <li><a href="/misc/goto?guid=4959677397393811921" rel="nofollow,noindex">打印样式表</a> — 创建打印样式表的另一份指南.</li> <li><a href="/misc/goto?guid=4959677397470342934" rel="nofollow,noindex">CSS 排版: 反差技巧、教程和CSS最佳实践</a> — 收集了大量的CSS印刷资源。</li> <li><a href="/misc/goto?guid=4959677397551345709" rel="nofollow,noindex">高效编码必备的CSS技巧</a> — 为了更好地编写CSS而收集的CSS 技巧、意见和解决方案。</li> </ul> <p><img src="https://simg.open-open.com/show/1d0f29e8d22f396b567276bc02feb128.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677397632789371" rel="nofollow,noindex">用CSS Reset来重置CSS样式</a> — 一份重置样式的完整指南。</li> <li><a href="/misc/goto?guid=4959541485453775132" rel="nofollow,noindex">CSS结构化命名惯例</a> — 一篇关于元素命名的文章，这里讲述基于元素本身的命名，而不是基于它们的位置或外观。</li> <li><a href="/misc/goto?guid=4959677397741754717" rel="nofollow,noindex">用CSS风格指南提高代码的可读性</a> — 文章涵盖5大技巧，让你的代码更加易于维护和管理。</li> <li><a href="/misc/goto?guid=4959677397823154248" rel="nofollow,noindex">写好CSS的70个专业意见</a> — 搜集了一些关于写好CSS的专业提示。</li> <li><a href="/misc/goto?guid=4959677397903979088" rel="nofollow,noindex">你必须知道的CSS浮动</a> — 一份帮你理解CSS浮动的指南.</li> <li><a href="/misc/goto?guid=4959677397989180770" rel="nofollow,noindex">完整的CSS指引</a> — 大量的资源，涵盖了CSS的方方面面.</li> <li><a href="/misc/goto?guid=4959677398314571480" rel="nofollow,noindex">创建排印样式对比的七个基本方法</a> — 文章列出了一些基本要素，关于在CSS里面使用充分的排版对比来营造优秀的样式风格。</li> <li><a href="/misc/goto?guid=4959677398403421691" rel="nofollow,noindex">如何用CSS处理文本的大小</a> — 一篇关于处理CSS文本大小的透彻指南。</li> <li><a href="/misc/goto?guid=4958836399800939231" rel="nofollow,noindex">CSS速查</a> — 一份非常完整的网页CSS速查表.</li> </ul> <p><img src="https://simg.open-open.com/show/1060f9278877ac47ea725d6ecfdca3f1.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677398551470500" rel="nofollow,noindex">每个人都应该知道的13条CSS训练原则</a> — 列出了你应在注意的一些基本的CSS惯例.</li> <li><a href="/misc/goto?guid=4959677398637757643" rel="nofollow,noindex">资源指引</a> — 这是来自CSS Zen Garden的CSS资源指引。</li> <li><a href="/misc/goto?guid=4959677398718677876" rel="nofollow,noindex">CSS美化</a> — 该网站提供了一些CSS消息、资源和画廊.</li> </ul> <p><img src="https://simg.open-open.com/show/dacef5d2d4b8e3f87e7b83635dc44fee.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677398804840556" rel="nofollow,noindex">使用CSS简写</a> — 一些CSS缩写的参考指南。</li> <li><a href="/misc/goto?guid=4959677398877857816" rel="nofollow,noindex">网页开发者手册</a> — This is a massive collection of CSS and other resources, including showcases, tools, and more.搜集了CSS以及一些其他的资源，如示例、工具等。</li> <li><a href="/misc/goto?guid=4959677398961347195" rel="nofollow,noindex">100个免费的CSS资源</a> — 大量CSS资源，包括相关的文章、教程、布局等等。</li> </ul> <p><img src="https://simg.open-open.com/show/41ef4e0755657373f3748542700c58f1.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677399050647914" rel="nofollow,noindex">15个你可能从未用过的CSS属性 (但或许要知道)</a> — 文章覆盖了15个经常被忽视的CSS属性，许多开发者可能都不知道它们的存在。</li> <li><a href="/misc/goto?guid=4959677399120550981" rel="nofollow,noindex">CSS专家的10条原则</a> — 搜集了一些CSS大牛的重要原则和指南.</li> <li><a href="/misc/goto?guid=4959677399203393903" rel="nofollow,noindex">你应该知道的CSS特性</a> — 一份CSS权重特殊性指南，css权重是CSS里面最难掌握的知识点之一。</li> <li><a href="/misc/goto?guid=4959677399285543751" rel="nofollow,noindex">解决5个普遍的CSS难题</a> — 告诉你如何处理一些CSS难题，如 IE6 里面双层外边框的bug，以及无效样式等。</li> </ul> <h3>教程与技巧</h3> <ul> <li><a href="/misc/goto?guid=4959677399452018450" rel="nofollow,noindex">从零开始学CSS</a> — 这是一个非常基础的教程，让你从零开始学习CSS并用它创建第一个基础网页。该教程对于那些对网页构建不了解的初学者来说，是很好的资源。</li> </ul> <p><img src="https://simg.open-open.com/show/d1dde213678705468e4212b610aeb989.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677399533742208" rel="nofollow,noindex">53个生存必备的CSS技巧</a> — 这里收集了大量的CSS技巧，从菜单到表单再到样式表打印，都有相关介绍。</li> <li><a href="/misc/goto?guid=4959677399606879434" rel="nofollow,noindex">CSS 阴影效果</a> — 一个关于如何用CSS给图片加阴影的教程。</li> <li><a href="/misc/goto?guid=4959677399689885169" rel="nofollow,noindex">CSS 选择器教程</a> — CSS选择器的基本介绍以及它们是如何工作的。</li> <li><a href="/misc/goto?guid=4959677399774939353" rel="nofollow,noindex">CSS 导航技巧</a> — 搜集了37个不同的CSS导航设计。</li> </ul> <p><img src="https://simg.open-open.com/show/18c80197cae88ecd6f28ab9cb792ee88.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677399852021735" rel="nofollow,noindex">我一直使用的CSS技巧</a> — A collection of CSS techniques Christian Montoya finds extremely valuable.</li> <li><a href="/misc/goto?guid=4959677399932413783" rel="nofollow,noindex">CSS技巧综述 — 20个CSS提示与诀窍</a> — 收集了关于CSS圆角和弹窗的一些技巧。</li> <li><a href="/misc/goto?guid=4959677400010561771" rel="nofollow,noindex">CSS提示与小窍门</a> — 有效基础的CSS技巧.</li> <li><a href="/misc/goto?guid=4959677400097986930" rel="nofollow,noindex">精通样式表: 最有用的CSS技巧</a> — 用于清除和重置浏览器默认的样式。</li> </ul> <p><img src="https://simg.open-open.com/show/4ab11e8414176abf2c6da765d7a49552.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677400174133828" rel="nofollow,noindex">用CSS展示超链接提示</a> — 本教程告诉你如何快速使用CSS添加链接式图标, 并且能够兼容IE7, Safari和火狐。</li> <li><a href="/misc/goto?guid=4959677400259684103" rel="nofollow,noindex">10个你可能不知道的CSS诀窍</a> — 涵盖了CSS字体、图片替换、垂直居中等技巧。</li> <li><a href="/misc/goto?guid=4959677400340795363" rel="nofollow,noindex">10多个你可能不知道的CSS技巧</a> — 这篇文章涵盖了块级元素与行内元素、设置页面最小宽度及不可见文本等。</li> <li><a href="/misc/goto?guid=4959677400422136857" rel="nofollow,noindex">用lists实现导航栏</a> — 这是个很棒的教程，一步步指导你如何用列表来制作导航栏。</li> </ul> <p><img src="https://simg.open-open.com/show/8d88bf9d1e19a7225a41d28beed694a1.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677400497296267" rel="nofollow,noindex">用lists实现树形图</a> — 如何创建一个多层级无序的页面树形图。</li> <li><a href="/misc/goto?guid=4959677400585562951" rel="nofollow,noindex">如何用CSS实现网页重构</a> — 如何用CSS布局重构一个网页。</li> <li><a href="/misc/goto?guid=4958333483850229892" rel="nofollow,noindex">一步步实现高级网页布局</a> — 一步步教你创建一个高级的三栏布局。</li> <li><a href="/misc/goto?guid=4959677400834480178" rel="nofollow,noindex">从头搭建CSS布局</a> — 该教程教你如何从零开始用CSS创建一个网页。</li> </ul> <p><img src="https://simg.open-open.com/show/fb9cee9a6c31bfc813641fa35aeb639e.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959630490570621298" rel="nofollow,noindex">CSS 教程</a> — 来自 W3Schools 的完整教程。</li> <li><a href="/misc/goto?guid=4959677400960287127" rel="nofollow,noindex">样式表</a> — 另一个非常全的CSS教程。</li> <li><a href="/misc/goto?guid=4959677401047998856" rel="nofollow,noindex">CSS实现的精致图表</a> — 创建特殊的图表形式。</li> <li><a href="/misc/goto?guid=4959677401125093420" rel="nofollow,noindex">关于CSS的更多圆角技巧</a> — 教你如何创建支持PNG和 alpha 透明度的圆角。</li> </ul> <p><img src="https://simg.open-open.com/show/1d5adce1d6100fdadb82094adea1b710.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677401202715503" rel="nofollow,noindex">CSS菜单列表</a></li> <li><a href="/misc/goto?guid=4959677401287261138" rel="nofollow,noindex">如何向你的CSS文件添加变量</a> — 告诉你如何用PHP和Apache的URL向你的CSS文件添加变量。</li> </ul> <p><img src="https://simg.open-open.com/show/37ec00acf6da13a88dfbf1e044fabdb8.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677401371730150" rel="nofollow,noindex">跨浏览器CSS编码的15个技巧和工具</a> — 文章涵盖了15条以上的提示，都是关于如何用CSS解决跨浏览器的兼容问题。</li> <li><a href="/misc/goto?guid=4959677403035949106" rel="nofollow,noindex">CSS 轴心化</a> — 如何创建CSS轴心化布局，包括中央CSS流式布局。</li> <li><a href="/misc/goto?guid=4959677403125021446" rel="nofollow,noindex">绝对定位在相对定位里面</a> — 关于如何在一个相对定位的父元素中绝对定位一个子元素的指南。</li> <li><a href="/misc/goto?guid=4959677403202095228" rel="nofollow,noindex">Faux 绝对定位</a> — 关于把浮动和绝对定位结合起来的方法指南。</li> <li><a href="/misc/goto?guid=4959677403284844587" rel="nofollow,noindex">多行导航栏的垂直居中</a> — 使用浮动的方法实现列表对齐。</li> <li><a href="/misc/goto?guid=4959677403366341613" rel="nofollow,noindex">前10个CSS按钮教程列表</a> — 收藏了10个创建CSS按钮的最好教程。</li> <li><a href="/misc/goto?guid=4959677403441859656" rel="nofollow,noindex">山顶角</a> — 用CSS来实现的圆角。</li> <li><a href="/misc/goto?guid=4959677403524947527" rel="nofollow,noindex">CSS 圆角综述</a> — 收藏了CSS圆角的技巧和教程。</li> <li><a href="/misc/goto?guid=4959677403706809183" rel="nofollow,noindex">CSS小窍门--自定义子弹头</a> — 关于如何用CSS实现子弹头的指南。</li> </ul> <p><img src="https://simg.open-open.com/show/43248e117a8b411c27cb07f907fd5e5e.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677403784015822" rel="nofollow,noindex">CSS Swag: 多栏列表</a> — A guide to creating semantically-logical, ordered list that wraps through multiple vertical columns一份关于创建语义化的、有序的多栏列表指南。</li> <li><a href="/misc/goto?guid=4959677403871733459" rel="nofollow,noindex">改善打印版的链接展示</a> — 示范了打印输出时如何在超链接文本中如何包含链接地址.</li> <li><a href="/misc/goto?guid=4959677403947280607" rel="nofollow,noindex">高级CSS菜单技巧</a> — 用CSS创建一个真正酷炫的、高级的、带有模糊效果的菜单。</li> <li><a href="/misc/goto?guid=4958186755012685390" rel="nofollow,noindex">CSS 菜单</a> — 一个关于用纯CSS2（不包含JS）嵌套列表创建菜单面板的教程。</li> <li><a href="/misc/goto?guid=4959677404164826930" rel="nofollow,noindex">CSS Tab菜单带下拉效果</a> — 一个关于创建带有下拉效果的CSS菜单教程。</li> </ul> <p><img src="https://simg.open-open.com/show/5272f1cc7e218bb96056856fec549137.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677404243020862" rel="nofollow,noindex">高级CSS菜单</a> — 来自网页设计墙的绚丽CSS菜单教程。</li> <li><a href="/misc/goto?guid=4958186616655422801" rel="nofollow,noindex">自动水平化tab</a> — 该教程教你如何创建带有翻转效果的水平菜单。</li> <li><a href="/misc/goto?guid=4958186716156861196" rel="nofollow,noindex">带有翻转效果的CSS图标菜单</a> — 创建带有CSS翻转效果的菜单教程。</li> <li><a href="/misc/goto?guid=4959677404466755184" rel="nofollow,noindex">混杂的CSS下拉菜单</a> — 一个教你如何创建CSS下拉菜单并且做到优雅降级，结构合理的教程。</li> </ul> <p><img src="https://simg.open-open.com/show/7574fa5fe82f51499cca1b79b4182af8.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677404548388760" rel="nofollow,noindex">初学者CSS指南</a> — 给初识CSS者的完整指南。</li> <li><a href="/misc/goto?guid=4959677404632090054" rel="nofollow,noindex">开始CSS实战</a> — 一个非常基础的CSS实战指南。</li> <li><a href="/misc/goto?guid=4959677404726358881" rel="nofollow,noindex">如何处理CSS大背景</a> — 处理CSS大背景的教程。</li> <li><a href="/misc/goto?guid=4959677404807251887" rel="nofollow,noindex">可扩张性强的CSS背景</a> — 关于创建高度自定义和自适应网站的教程。</li> <li><a href="/misc/goto?guid=4958333462349347099" rel="nofollow,noindex">用CSS做各种事情: 50多个富有创意的列子和教程</a> — 收藏了50多个创建独特CSS布局的教程。</li> <li><a href="/misc/goto?guid=4959677404915884939" rel="nofollow,noindex">用Firebug快速简单的开发CSS</a> — 一份关于使用Firebug提高网页设计的指南。</li> <li><a href="/misc/goto?guid=4959677405005316790" rel="nofollow,noindex">10漂亮的CSS排版例子</a> — 提供了很棒的CSS排版例子并且有教程指导如何创建。</li> </ul> <p><img src="https://simg.open-open.com/show/f571453b27cbad1c94998ec58ac3203b.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677405094865241" rel="nofollow,noindex">16个可用的CSS图表和长条图教程与技巧</a> — 收藏了一系列关于创建基于CSS的数据可视化图表的教程。</li> <li><a href="/misc/goto?guid=4959677405177321131" rel="nofollow,noindex">更好地引用: 不要重复标记</a> — 指导你如何更好地引用，免除一些不必要的、重复的标记。</li> <li><a href="/misc/goto?guid=4959677405260909916" rel="nofollow,noindex">CSS 渐变文本效果</a> — 一个为标题创建文本渐变的教程。</li> <li><a href="/misc/goto?guid=4959677405349610440" rel="nofollow,noindex">43 个从 PSD 到 XHTML/CSS 的教程</a> — 列出了大量的教程，教你如何把 PSD 变为有效的 CSS/XHTML 文件。</li> <li><a href="/misc/goto?guid=4959677405443282413" rel="nofollow,noindex">CSS 图片地图</a> — 一个用 CSS 和 XHTML 创建图片地图的教程。</li> <li><a href="/misc/goto?guid=4959677405525187145" rel="nofollow,noindex">流式栅格布局</a> — 一个关于创建流式栅格布局的教程。</li> </ul> <p><img src="https://simg.open-open.com/show/f24a5fb4e6137015c0d9bee47b8d0231.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677405606422558" rel="nofollow,noindex">如何调试CSS</a> — 介绍了调试CSS的技巧。</li> <li><a href="/misc/goto?guid=4959677405701528480" rel="nofollow,noindex">10项有挑战性但了不起的CSS技能</a> — 指导你掌握一些值得学习的高级CSS技能.</li> <li><a href="/misc/goto?guid=4959677405781969425" rel="nofollow,noindex">50多个漂亮整洁的CSS Tab 导航</a> — 搜集了大量用CSS制作的tab导航。</li> <li><a href="/misc/goto?guid=4959677405854734151" rel="nofollow,noindex">30个无与伦比的CSS技巧和示例</a> — 收藏了大量真正酷炫的CSS效果，包括 hoverbox 图片画廊、固定页脚和纯CSS实现的手风琴效果等等。</li> </ul> <p><img src="https://simg.open-open.com/show/ba6f083654a92ded4b404c38a1bfb30a.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677405952875082" rel="nofollow,noindex">101个CSS技巧</a> — <a href="/misc/goto?guid=4959677406029549275" rel="nofollow,noindex">Part 2</a> — 又一批很好的CSS技巧及其相应的教程。</li> <li><a href="/misc/goto?guid=4959677406109235937" rel="nofollow,noindex">固定中心</a> — 一个简短的教程，教你如何在窗口正中心（垂直与水平）定位某些元素。</li> <li><a href="/misc/goto?guid=4959677406201106984" rel="nofollow,noindex">流式布局，一种简短的方式</a> — 创建CSS流式布局的完整教程。</li> </ul> <h3>模板与框架</h3> <ul> <li><a href="/misc/goto?guid=4958528382744891991" rel="nofollow,noindex">1Kb大的CSS栅格</a> — 这也许是最简单最紧凑的栅格系统了，但包含了自定义栅格的工具。</li> </ul> <p><img src="https://simg.open-open.com/show/4b5fd87e6eccbeeca17f22bc5d1e614d.jpg"></p> <ul> <li><a href="/misc/goto?guid=4958833797491112666" rel="nofollow,noindex">CSS Zen Garden</a> — CSS Zen Garden 是一个 HTML 和 CSS 框架，用于展示大量能用CSS创建的设计。除了框架之外，还有大量可用的模板和主题。</li> <li><a href="/misc/goto?guid=4958534462848329594" rel="nofollow,noindex">完美的多栏CSS流式布局</a> — 收集了兼容iPhone的流式布局。</li> <li><a href="/misc/goto?guid=4958190852589808445" rel="nofollow,noindex">960栅格系统</a> — 一个基于960像素宽构建的CSS栅格布局。</li> </ul> <p><img src="https://simg.open-open.com/show/bf5fe81ace4ee20ac5fb7f823df4e45b.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677406403949920" rel="nofollow,noindex">免费CSS模板</a> — 该网站提供了200多个CSS模板，都遵循知识共享署名许可协议。</li> </ul> <p><img src="https://simg.open-open.com/show/e8fa2323005c592550ce5bf6f189f783.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677406496223764" rel="nofollow,noindex">漂亮免费的CSS模板</a> — 几十个模板让你着手CSS设计，包括动态居中盒子、4栏不定宽布局、宽度固定的盒子上下左右完全居中等。</li> <li><a href="/misc/goto?guid=4958333515235213477" rel="nofollow,noindex">小型盒子</a> — 收藏了各种布局的CSS文件。</li> </ul> <p><img src="https://simg.open-open.com/show/3d3340e282948dd72595c49cd0c1cb5c.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677406615356476" rel="nofollow,noindex">960px宽的CSS栅格系统设计</a> — 使用栅格创建960px宽的网页模型。</li> <li><a href="/misc/goto?guid=4959677406701407699" rel="nofollow,noindex">用CSS框架设计一个杂志类首页模板</a> — 一份创建杂志和栅格布局的有效指南。</li> </ul> <p><img src="https://simg.open-open.com/show/b1186d7cc241cdd769f7b5a523e23190.jpg"></p> <h3>画廊与陈列</h3> <ul> <li><a href="/misc/goto?guid=4959677406778798413" rel="nofollow,noindex">CSS Stars</a> — 画廊提供了一些基于CSS的设计，让你熟读掌握。</li> </ul> <p><img src="https://simg.open-open.com/show/d1c64fc474591d40d0a311d795a96d9d.jpg"></p> <ul> <li><a href="/misc/goto?guid=4958317756289070322" rel="nofollow,noindex">CSS Based</a> — 上千个不同设计的CSS画廊。</li> <li><a href="/misc/goto?guid=4959677406986164430" rel="nofollow,noindex">CSS Drive</a> — 一个分类的CSS画廊。</li> <li><a href="/misc/goto?guid=4959677407063384731" rel="nofollow,noindex">CSS Mania</a> — 一个已经有5年历史的CSS画廊。</li> <li><a href="/misc/goto?guid=4958317742918992194" rel="nofollow,noindex">CSSelite.com</a> — 一个分类的CSS画廊。</li> <li><a href="/misc/goto?guid=4958317752359131951" rel="nofollow,noindex">CSS Creme</a> — 大量可以根据颜色、分类或者设计师划分的画廊，也包括相关的教程和信息。</li> <li><a href="/misc/goto?guid=4959677407205323839" rel="nofollow,noindex">csswebsite</a> — 一个可以通过类型、日期或者颜色帅选的画廊。</li> <li><a href="/misc/goto?guid=4959677407303311988" rel="nofollow,noindex">40 漂亮的深色CSS网页设计</a> — 该画廊提供了一些漂亮的深颜色网页设计。</li> <li><a href="/misc/goto?guid=4959677407384122784" rel="nofollow,noindex">2008年最好的CSS设计</a> — 又一个画廊展示了2008年最好的CSS设计。</li> <li><a href="/misc/goto?guid=4958317757861848575" rel="nofollow,noindex">CSS美丽画廊</a> — 该CSS画廊的条目是从2004年至今的，按年代顺序排列。</li> </ul> <h3>工具</h3> <ul> <li><a href="/misc/goto?guid=4958183982111764011" rel="nofollow,noindex">Firebug</a> — 火狐浏览器的一个插件，你可以在该调试器里面看到你的CSS代码，并且可以在里面编辑。</li> </ul> <p><img src="https://simg.open-open.com/show/4b5fd87e6eccbeeca17f22bc5d1e614d.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677407523354179" rel="nofollow,noindex">Aardvark</a> — 火狐浏览器的扩展，可以看到每段HTML及它的类或者id。</li> <li><a href="/misc/goto?guid=4959677407611108945" rel="nofollow,noindex">CSSViewer 1.0.3</a> — 也是火狐浏览器的扩展工具，你可以看到任何页面的CSS属性。</li> <li><a href="/misc/goto?guid=4958323397107586569" rel="nofollow,noindex">GridFox</a> — 火狐浏览器的另一个扩展，通过在任何网页覆盖一层栅格来辅助栅格设计。</li> <li><a href="/misc/goto?guid=4959677407730083562" rel="nofollow,noindex">CodeBurner</a> — 开发的一款插件，可以在浏览器中看到HTML和CSS的参考资料。</li> </ul> <p><img src="https://simg.open-open.com/show/cb165bf3925ff437a7a1ad799c1340bf.jpg"></p> <ul> <li><a href="/misc/goto?guid=4958326038475851373" rel="nofollow,noindex">IzzyMenu</a> — 一个免费的CSS菜单创建器，支持创建下拉二级菜单。</li> <li><a href="/misc/goto?guid=4959677407850082957" rel="nofollow,noindex">Spanky Corners</a> — 一个圆角盒子生成器。</li> <li><a href="/misc/goto?guid=4958319086585591240" rel="nofollow,noindex">CleanCSS</a> — 一款CSS美化工具。</li> <li><a href="/misc/goto?guid=4959677407953326813" rel="nofollow,noindex">CSS浏览器选择器</a> — A useful tool for empowering CSS selectors based on the visitor’s browser.一款有用的工具，可以基于访问者的浏览器来使用CSS选择器。</li> <li><a href="/misc/goto?guid=4958539676347857298" rel="nofollow,noindex">CSS 压缩器</a> — 一款CSS文件压缩器。</li> <li><a href="/misc/goto?guid=4959677408061072811" rel="nofollow,noindex">CSS 布局生成器</a> — 一个简单、在线的CSS生成器，可以创建一个基础的布局框架。</li> <li><a href="/misc/goto?guid=4958328655762440497" rel="nofollow,noindex">CSSTidy</a> — 一款开源的、可供下载的CSS分析器和优化器。</li> </ul> <p><img src="https://simg.open-open.com/show/5b86b82ac8ba9329d87bbcf4c1e10b78.jpg"></p> <ul> <li><a href="/misc/goto?guid=4958318550598630175" rel="nofollow,noindex">CSS驱动CSS压缩器</a> — 一款CSS压缩工具，根据你的需求，可以有基础和高级的压缩模式。</li> <li><a href="/misc/goto?guid=4958340080600423035" rel="nofollow,noindex">Tabifier</a> — 缩进你的代码。</li> <li><a href="/misc/goto?guid=4958319076360282393" rel="nofollow,noindex">CSSFly</a> — 基于浏览器的CSS和XHTML编辑器，可以实时编辑。</li> </ul> <p><img src="https://simg.open-open.com/show/4d85a801683fbb08ea4b553c99d1d7cf.jpg"></p> <ul> <li><a href="/misc/goto?guid=4958539674997743488" rel="nofollow,noindex">List-O-Matic</a> — 一款可以创建基于列表的导航菜单。</li> <li><a href="/misc/goto?guid=4959677408296302470" rel="nofollow,noindex">Markup Maker</a> — 根据你输入的页面ID来创建一个有效的XHTML/HTML框架。</li> <li><a href="/misc/goto?guid=4959677408387805468" rel="nofollow,noindex">CSSMate</a> — 一款在线CSS编辑器。</li> <li><a href="/misc/goto?guid=4959677408471884740" rel="nofollow,noindex">CSS Type Set</a> — 一个CSS排版生成器。</li> </ul> <p><img src="https://simg.open-open.com/show/87b509696ddaef5a70a082c3578252fc.jpg"></p> <ul> <li><a href="/misc/goto?guid=4959677408552074733" rel="nofollow,noindex">Construct 0.5</a> — 一款可视的，可以基于蓝图框架创建的布局工具。</li> </ul> <p><img src="https://simg.open-open.com/show/a9a95b67945a5df8fe67c46d78e37c41.jpg"></p> <ul> <li><a href="/misc/goto?guid=4958539673590348483" rel="nofollow,noindex">PXtoEM.com</a> — 一个把px转换成em的转换工具。</li> <li><a href="/misc/goto?guid=4959677408670766045" rel="nofollow,noindex">CSS编辑器回顾</a> — 收藏了一些流行的CSS编辑器。</li> <li><a href="/misc/goto?guid=4958539672614747076" rel="nofollow,noindex">YAML构建器</a> — 一个创建YAML布局的可视工具。</li> <li><a href="/misc/goto?guid=4958538263640219595" rel="nofollow,noindex">布局构造器</a> — 一个CSS布局构建器。</li> <li><a href="/misc/goto?guid=4959677408818386231" rel="nofollow,noindex">CSS工具列表</a> — 列出了大量的CSS工具，从字体到优化。</li> <li><a href="/misc/goto?guid=4959677408901031574" rel="nofollow,noindex">50个非常有用的CSS工具</a> — 列出了一些非常棒的CSS工具。</li> </ul> <h3>特殊的CSS博客和网站</h3> <ul> <li><a href="/misc/goto?guid=4958529502084680228" rel="nofollow,noindex">CSS技巧</a> — 来自Chris Coyier的博客。</li> <li><a href="/misc/goto?guid=4959677409012083701" rel="nofollow,noindex">CSS Help Pile</a> — 不断收集CSS相关的教程和资源。</li> </ul> <p><img src="https://simg.open-open.com/show/9bc58df2014c162980a1cb090d7ab8a4.jpg"></p> <p> </p> <p>来自：http://www.zcfy.cc/article/148-resources-to-help-you-become-a-css-expert-1057.html</p> <p> </p>