50 款简化 CSS 开发的实用工具和生成器

标签: CSS 前端开发 CSS3 资源 | 发表时间:2012-07-27 22:09 | 作者:Chang
出处:http://lanfei.sinaapp.com

这些CSS工具都是很适合网页设计题使用,已经为大家分好类别,请自行点击导航快速浏览:

网格和布局,CSS 优化,CSS 菜单工具,CSS 按钮,CSS 圆角,CSS 框架,CSS Sprites,CSS 排版以及 CSS 表单。

网格和布局

The 1KB CSS Grid
新颖的 CSS 网格工具,可用于简化内容管理系统的页面模板,轻巧易用。

Variable Grid System
基于 960px 的常规网页布局,用于快速生成基本的 CSS 网格。

Grid Designer 2
可控性强,选项丰富的网格系统,支持 CSS 在线即时输出。

Design By Grid PNG Grid Generator
生成用于网格的 PNG 图片,以方便地用作 PSD 或 HTML/CSS 设计背景,免除手工制作网格的麻烦。

nP: Grid Generator
用于设计布局结构,制定列、边缘、间距等参数。

YAML Builder
可视化,快捷的标准 XHTML 页面框架生成工具,但对 IE6 兼容欠佳。

GRIDINATOR
简单定制基于网格的布局,可自定义多种参数。

Grid System Generator
生成适用于 960.gs,Golden Grid,1KB Grid 的网格布局,也可生成基本的通用网格。

YUI: CSS Grid Builder
来自 Yahoo 的网格工具,用于创建基础布局,统一浏览器表现。

Blueprint Grid CSS Generator
帮助你创造更灵活的 CSS 蓝图,包括 grid.css、compressed.css 和 grid.png 文件。

CSS Grid Calculator
快速设计页面布局,以多种方式构造网格。对于页面元素在浏览器中的表现方式,提供了精确的视觉反馈。

Layout generators – www.pagecolumn.com
使用 CSS 2.0 技术生成 1-5 列的布局输出。

Dynamic 4 Column Layout Generator
可控性强的 4 栏式页面布局生成器。

CSS Layout Generator – CSS Portal
创建自适应或固定宽度栏式布局,可指定或者像素或百分比。

templatr
模板生成器,可在线创建单独的设计方案。无需了解任何 HTML 和 CSS 知识。

CSS Source Ordered 1-3 Columned Page Maker
生成 1-3 栏式页面的 CSS 代码。

CSS Creator
创建自适应宽度或固定宽度的浮动栏式布局。

CSS 优化和样式生成

Online CSS Optimiser/Optimizer
输入网址或复制并粘贴到样式输入框中,一键提交即可优化。

Free CSS Template Code Generator
三栏式布局生成工具,同步生成 HTML 和 CSS 代码。

CSS Builder – Generate Styles on the Fly
只需填写表格数据,单击生成,并复制代码到样式表。

Firdamatic: the Design Tool for the Uninspired Webloggers
通过完成一份简单的表格输入来创建和定制布局,轻而易举。

WordPress Theme Generator
在线定制独一无二的 WordPress 主题。只需改变颜色,设置,布局等参数,完成后保存并下载。

CSS Formatter and Optimiser/Optimizer
CSS 整形与优化工具,基于 CSSTidy 构建。

XHTML/CSS Markup Generator
通过框架加快 XHTML+CSS 设计工作,界面直观,语法缩短。

CSS 菜单工具

13 Styles – CSS Menu Generator
简单的 CSS 菜单生成器。

CSS Menu Builder
提供 30 多款横向菜单,700 多款垂直菜单,多种菜单组合方式应有尽有。

Pure CSS Menu.com
纯粹的 CSS 菜单生成工具。

CSS Menu Generator
多种现成 CSS 菜单可供选择,支持样式自定义。

My CSS Menu Generator – Horizontal, Vertical, Drop Down, DHTML CSS Menu
自定义创建浏览器兼容的 CSS 菜单。导航内容,方向性,均可控制。

CSS Menu Generator – Webmaster Toolkit
CSS 控制的文本形式的菜单有比图片形式的菜单具有更强的搜索引擎友好性。

CSS Menu Generator – CSS Portal
提供了较为丰富的 CSS 菜单模板。

List-O-Matic
著名的 List-O-Matic 可轻松制作最基本的 CSS 导航菜单,向导性的制作步骤更容易上手。

CSS 按钮

CSS Button and Field Tool
傻瓜化地配置样式和参数,即可一键生成代码。

Navigation Tab Menu Generator
菜单参数可调,改动刷新后可预览。

CSS 圆角

RoundedCornr: Rounded Corner and Gradient Generator
产生一个基本圆角。附带四个圆角图像文件和必要的 HTML 及 CSS 代码。

Spiffy Corners – Purely CSS Rounded Corners
简单生成 CSS 和 HTML 以满足创建无锯齿圆角,而无需使用图像或 JavaScript 脚本。

Spiffy Box – Simple Rounded Corner CSS Boxes
简单的 CSS 圆角框生成器。

Cornershop – Rounded Graphics for CSS Box Corners
生成圆角的 HTML 和 CSS 代码。

CSS 框架

CSS Frame Generator
构造基本的 CSS 框架,加强 CSS 编写的规格化。

CSS 表格

CSS Table Generator 0.1
简单的 CSS 表格生成工具。

HTML and CSS Table Border Style Wizard
配置选项丰富的可视化表格样式设计工具。

HTML Table Style Generator
简单配置即可设计美观的表格样式。

CSS Sprites

CSS Sprite Generator
提供源图片上传,重复图片合并,大小调整,拼合输出,CSS 输出等选项的控制,支持简体中文。

CSSSprites.com
把背景图片的拼合任务交给 CSSSprites.com,它会帮你组图并给出单个图片的定位。

CSS 文本和字体

CSS Type Set
简单的文本样式配置工具。

CSS 表单

Quick Form Builder
快速简洁的表单创建工具,只需定义字段名称。

Form Style Web 2.0 Generator
参数详尽的表单配置向导,生成的表单样式代码可直接下载。

英文原稿: 50 Useful Tools and Generators for Easy CSS Development | Speckyboy
翻译整理: 50 款简化 CSS 开发的实用工具和生成器 | 芒果

相关 [css 开发 工具] 推荐:

50 款简化 CSS 开发的实用工具和生成器

- - 畅之部落格
这些CSS工具都是很适合网页设计题使用,已经为大家分好类别,请自行点击导航快速浏览:. CSS Sprites | CSS精灵. 网格和布局,CSS 优化,CSS 菜单工具,CSS 按钮,CSS 圆角,CSS 框架,CSS Sprites,CSS 排版以及 CSS 表单. 新颖的 CSS 网格工具,可用于简化内容管理系统的页面模板,轻巧易用.

13个最常用的CSS和HTML快速开发工具

- - ITeye资讯频道
英文原文: 13 Most Used Speedy Tools To Write CSS And HTML Code. CleverCSS是个用于CSS开发的小型标记语言,从Python中得到灵感. 可以开发出干净、结构清晰的样式表. 在许多方面它比CSS2都更简洁、强大. 它与CSS最明显不同之处在于语法:CleverCSS采用了缩进式语法而不是对齐.

10个针对设计师/开发者的实用CSS工具推荐

- - ITeye资讯频道
尽管使用CSS可以实现很多漂亮的效果,但对于一些任务来说,实现起来比较费事. 但是借助于一些工具,可以让你的项目更快地实现. 本文将分享10款对于设计师和开发者非常实用的CSS工具. 一个交互式的CSS开发和代码共享工具. 该工具托管于Github站点,提供了很多便利的CSS编辑功能. Sprite Cow是一个新的CSS Sprite(CSS精灵,是一种网页图片应用处理方式,允许你将一个页面涉及到的所有零星图片都包含到一张大图中去)工具,可以帮助你获取spritesheet中sprites的背景位置、宽度和高度等.

CSS代码检查工具推荐:CSS Lint

- - 标点符
CSS Lint是一个开源的校验CSS文件质量的工具,最初是由 Nicholas C. Zakas和 Nicole Sullivan编写的,最初版本在Velocity会议上于2011年6月发布. CSS Lint的检测规则包括错误的和警告,当选择器或属性书写不正确、漏掉了大括号、多写了分号等时,会提示解析错误,解析错误优先提示.

8款非常有用的CSS工具

- ChamPioNeer - cnBeta全文版
写更好的CSS是所有网页设计师和开发人员应该争取的东西,幸运的是,这里有一些工具,可以帮助大家做到这一点. 在这篇文章中,我们收集了一些新的CSS工具,以帮助写出更好的CSS. 从学习新的CSS3属性,到使您的CSS代码更高效,这里必然有你需要的一款CSS工具. CSS3 Patterns Gallery,让您通过缩略图或全屏模式浏览各种CSS3样式,搜集各种各样的CSS样式以便于你可以借用到你的网站上.

Groundwork:响应式 HTML5,CSS & JavaScript 工具包

- - 博客园_梦想天空
  Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包. 使用 Groundwork,您可以快速构建 Web 应用程序. Groundwork 拥有一个令人难以置信的灵活,可嵌套,流体的网格系统,是 Github 上的开源项目.

(转)豆瓣css开发规范

- Hu DongHai - 小豪~麦穗的部落格
今天无意间看到了豆瓣的一些前端开发规范,攻城师作战指南. 里面的Javascript代码风格规范 差不多就是基本的javascript规范,主要还是分享一下 css部分的规范. 因为规范是在google docs上,需要穿过篱笆,所以我就直接帖过来了,一起学习一下哈. ——————————————–华丽的分割线————————————————.

10 个加速 CSS 开发的框架

- Tairan Wang - ITeye资讯频道
CSS 可以做很多事情,但开发者更习惯的是变量、常量和一般的更快速的语法,而 CSS 本身是不支持的. 本文介绍了 10 个 CSS 预处理器,让 CSS 支持一些简单的编程语法,使Web开发更高效. Compass 是一个开源的 CSS 制作框架. 针对个人框架开发时,其非常简单、易用. 这是一个很棒的 CSS 预处理器,可以让开发者制作插件,要求 PHP 以及 Apache (mod_deflate 和 mod_rewrite).

网易邮箱的CSS开发(一)

- - 博客 - 伯乐在线
网易邮箱是个庞大而且细节繁多的系统,注定了前端开发中样式管理的复杂程度非常高. 如果没有一个合理的体系来管理样式,开发和维护的难度是不可想象的. 从极速3.5版本开始,我们就一直遵循并不断改善这套规则,现在就来分享一下~. 在错综复杂的样式面前,CSS显得过于简陋. 于是我们不得不人为的加上一些思维方式和规则来帮助我们管理样式.

高效CSS开发核心要点

- - blog.moocss.com
本文参考了业界规范及主流趋势,详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题,希望对您有所帮助,也可收藏作为参考. 本文来源:http://www.ituring.com.cn/article/1745. 1.1 把CSS放在HTML页面头部. 由于浏览器需要在所有的样式表加载完成后才能开始渲染页面,样式表加载完成之前页面会一直显示空白,因此需要将样式表放在头部.