8 个对 Web 设计有帮助的CSS工具

   <h2>1. CSS Comb</h2>    <p><a href="/misc/goto?guid=4958522636819312687">Website</a></p>    <p>Sort your CSS properties automatically with this tool. It can be used with many of the most popular text editors, such as Coda or Notepad++, but also has an <a href="/misc/goto?guid=4958522636921114910">online version</a>.</p>    <p><img class="alignnone size-full wp-image-28266" title="css-comb" alt="8 个对 Web 设计有帮助的CSS工具" src="https://simg.open-open.com/show/e80ce2bb3f5c293468edace7e039a859.jpg" width="450" height="284" /></p>    <h2>2. Normalize.css</h2>    <p><a href="/misc/goto?guid=4958522637009404407">Website</a></p>    <p>A HTML5-ready alternative to CSS resets. It preserves some useful browser default settings, normalizes styles for a wide range of HTML elements, corrects some common browser inconsistencies, and is well commented for easier use.</p>    <h2>3. SpritePad</h2>    <p><a href="/misc/goto?guid=4958340824004497462">Website</a></p>    <p>SpritePad gives you an online drag-and-drop interface to easily create CSS sprites. Drag-and-drop your images into the grid, then get it immediately as PNG + CSS code.</p>    <p><img class="alignnone size-full wp-image-28267" title="sprite-pad" alt="8 个对 Web 设计有帮助的CSS工具" src="https://simg.open-open.com/show/695604f121a2697ffccd62577c74771b.jpg" width="450" height="365" /></p>    <h2>4. CSS Hat</h2>    <p><a href="/misc/goto?guid=4958522637126777939">Website</a></p>    <p>Turn Photoshop layer styles into CSS3 with a single click. Dramatically increase your productivity for only $19.99.</p>    <p><img class="alignnone size-full wp-image-28268" title="css-hat" alt="8 个对 Web 设计有帮助的CSS工具" src="https://simg.open-open.com/show/f59369bde5fe4ec1de0e200be52341dc.jpg" width="450" height="213" /></p>    <h2>5. CSS-Only Pinterest Style Columns Layout</h2>    <p><a href="/misc/goto?guid=4958522637220090460">Website</a></p>    <p>A technique that is interesting, but may not be used for production as it relies on CSS3 columns (not supported be Internet Explorer). I thought it was still worth sharing as it’s probably the way we’ll create this type of layouts in the future.</p>    <p><img class="alignnone size-full wp-image-28269" title="css-pinterest-layout" alt="8 个对 Web 设计有帮助的CSS工具" src="https://simg.open-open.com/show/752d49371de4500ec8a6dade51eef616.jpg" width="450" height="325" /></p>    <h2>6. WebPutty</h2>    <p><a href="/misc/goto?guid=4958522637303757883">Website</a></p>    <p>Formerly a hosted online service, WebPutty is <a href="/misc/goto?guid=4958522637394075297">now open-source</a> and can be run on Google App Engine. It is a service that let’s you edit CSS online while previewing what you are doing, with the possibility to publish in one-click.</p>    <p><img class="alignnone size-full wp-image-28270" title="webputty_publish" alt="8 个对 Web 设计有帮助的CSS工具" src="https://simg.open-open.com/show/cdd646725c5db3dde0a8ae8b446fd04e.jpg" width="450" height="262" /></p>    <h2>7. Bootstrap</h2>    <p><a href="/misc/goto?guid=4958326721136670172">Website</a></p>    <p>Much more than a simple CSS tool, Bootstrap is a feature-rich front-end framework published by 推ter. This tool is not new, but 推ter released the latest version very recently.</p>    <p><img class="alignnone size-full wp-image-28271" title="bootstrap" alt="8 个对 Web 设计有帮助的CSS工具" src="https://simg.open-open.com/show/94e7b78818230d774356ccbad234bebb.jpg" width="450" height="227" /></p>    <h2>8. Responsive grid system</h2>    <p><a href="/misc/goto?guid=4958521907687538999">Website</a></p>    <p>Building responsive designs is very frequent nowadays, just as working with the grid is. This responsive grid system helps you do both and let’s do it easily, without doing complicated math to calculate your grid.</p>    <p><img class="alignnone size-full wp-image-28272" title="responsive-grid-system" alt="8 个对 Web 设计有帮助的CSS工具" src="https://simg.open-open.com/show/4dcc5e7d86512e4e4f38d0ac6c8e6bb8.jpg" width="450" height="194" /></p>