1. Tiny Fluid Grid

2. ZURB CSS Grid Builder

3. Grid System Generator

4. Variable Grid System

5. inuit Grid Builder

6. 1200px Grid System

7. Negative Grid 1kb Fluid CSS Grid

8. YAML

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例。

9. Construct Your CSS

10. gridr buildrrr

11. Gridinator

12. Grid Calculator

13. Grid Generator

14. YUI CSS Builder

本文链接：推荐14个非常有用的 CSS 网格系统生成工具

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

实现布局有三个思路:

1. 最传统的思路,多弄几个容器,分几列,然后往每个列里面插入元素.其实用table分几列实现更加方便:P;
2. 使用html5中css3的多列布局来实现.参见w3c标准中的css3多列布局模块;
3. 使用绝对布局,通过javascript生成元素的布局位置.

前两种方法在网上都有比较详细的介绍,我这里就不再多说了,这里主要说一下我做的第三种实现的优缺点以及我的实现思路.

第三种方案是所有的要布局的元素都是绝对定位的,然后通过javascript来判断每个元素位置,动态设置位置实现布局.

缺点

需要使用javascript来遍历元素,然后要根据前一个元素来判断后一个元素的位置,这样可能对一些老版本的浏览器造成负担,特别是IE6这种 老古董,而且在javascript失效的时候,整个页面的布局都会乱掉.另外如果整个页面宽度是变化的,则可能每次窗口尺寸改变时都要重新计算所有元素 的位置,在页面中元素较多的时候可能会有闪烁的现象.另外如果页面中出现图片,则需要实现定义好图片的尺寸,否则会出现无法正确计算元素位置的情况.

优点

布局更加灵活,元素绝对定位,可以使用javascript灵活操作.页面宽度改变时可以重新布局整个页面.可以使页面的中的元素真正流动起来,让新添加的元素插入到高度最低的列,使页面的低端更加整齐,对插入的元素高地要求较低.可以较为方便的实现延迟加载.

具体实现

最开始我实现的时候是通过使用javascript生成虚拟的列,根据元素的顺序为每个元素分配一个列和行,然后计算每个元素的位置,举个例子,现在假设有四个列:

使其在页面中布局.事实上这个解决办法跟第一种和第二种是一个道理的.最后页面每列的高度差别可能会很大.

//getElements()方法用于获取页面中的元素
var items = getElements();
var columnCount = 4;
var columnWidth = 230;
var padding = 8;
//遍历所有元素
for(var i = 0, len = items.length; i < len; i++){
	//获取当前的元素
	var currentItem = items[i];
	//获取当前对象的列
	var currentColumn = (i + 1) % 4;
	//获取当前对象的行
	var currentLevel = parseInt(i / 4);

	//有了当前的行跟列可以根据上一层的对象计算出当前对象的高度
	var left = currentColumn * columnWidth;
	var top = items[i - 4] ? 0 : items[i - 4].style.top + items[i - 4].clientHeight + padding;
	//设置当前的位置
	currentItem.style.top = top + 'px';
	currentItem.style.left = left + 'px';
}

代码和逻辑都比较简单,根据当前的行跟列计算出位置就行了.但是这个逻辑还是会出现元素高地差距过大的情况.看一下新浪weibo的广场图片效果:

可以看到越到最后可能列高度之间的差距会越大.这不是我们想要实现的效果.

所以我这里换了一个思路,虚拟的列还是要有的,但是行的概念我们抛弃掉,我采用的是一个类似流动的概念,新插入的元素是根据每个列的高度,那个高度 最低就流向哪个列,最后确保每个列的高度都趋近一致,实现我们想要的效果.当然我们可以采取获取所有元素的高度,然后统一计算一下,获取一个最佳的排列方 法,但是这会给浏览器带来较大的计算量,而且如果不断的加载更多的图片我们会得不偿失,所以我们采用的是一个流动的模型,只让当前对象寻找最低的高度然后 插入.

这里我实现了一个Column对象,一个ImgItem对象.Column对象用于维护每一列的信息,包括列的最到高度列宽度等列信息.ImgItem对象保存了一个html节点对象,还有一些设置元素位置,获取当前元素位置的方法.

下面是Column对象的代码:

var Column = function(order){
	this.order = order;
	this.maxHeight = 0;
	this.columnWidth = 230;
	this.left = this.columnWidth * order;
	this.lastItem = null;
	this.positioned = false;
	this.setReferItem = function(item){
		this.lastItem = item;
	}

	this.getHeight = function(){
		if(this.lastItem){
			this.maxHeight = this.lastItem.getBottom();
		}
		return this.maxHeight;
	}

	this.getLeft = function(){
		return this.left;
	}
};

ImgItem对象的代码:

var ImgItem = function(referNode, column){
	this.referNode = referNode;
	this.bottom = -1;
	this.positioned = false;
};

ImgItem.prototype = {
	/*
	 *set the refer node's top
	 * @param value: Number
	 */
	setTop: function(value){
		this.referNode.style.top = value + 'px';
	},
	/*
	 *set the refer node's left
	 * @param value: Number
	 */
	setLeft: function(value){
		this.referNode.style.left = value + 'px';
	},
	/*
	 *get the refer node bottom position
	 */
	getBottom: function(){
		if(this.positioned){
			if(this.bottom < 0){
				this.bottom = parseInt(this.referNode.style.top) + this.referNode.clientHeight;
			}
			return this.bottom;
		}else{
			throw("current node has not been positioned!");
		}
	},
	setPosition: function(column){
		this.positioned = true;
		this.setLeft(column.getLeft());
		this.setTop(column.getHeight() + 10);
		column.setReferItem(this);
	}
};

基础打好了,下面要做的就是给元素进行布局了:

//首先根据配置信息中的列数初始化列
for(var i = 0, len = this.config.columnCount; i < len; i++){
	this.columns.push(new Column(i));
}
//获取页面上已存在的对象
var liItems = document.getElementById('img_list').getElementsByTagName('li');
//将所有的对象进行布局
for(i = 0, len = liItems.length; i < len; i++){
	this.addNewItem(liItems[i]);
}

好吧这里还用到了一个addNewItem方法:

getMinHeightColumn: function(){
	var minHeight = -1, tempColumn = null;
	//遍历所有的列,获取当前高度最低的列,并返回
	for(var i = 0,len = this.columns.length; i < len; i++){ 		if(minHeight > this.columns[i].getHeight() || minHeight == -1){
			minHeight = this.columns[i].getHeight();
			tempColumn = this.columns[i];
		}
	}

	return tempColumn;
},

getMaxHeight: function(){
	var maxHeight = -1;
	//遍历列对象,获取高度最高的列并返回高度
	for(var i = 0, len = this.columns.length; i < len; i++){
		if(maxHeight < this.columns[i].getHeight()){
			maxHeight = this.columns[i].getHeight();
		}
	}

	return maxHeight;
},
addNewItem: function(liItem){
	//设置元素的位置
	var imgItem = new ImgItem(liItem);
	imgItem.setPosition(this.getMinHeightColumn());
	this.cachedItems.push();
	//设置容器的高度
	document.getElementById('img_list').style.height = this.getMaxHeight() + 'px';
}

基本的布局逻辑已经都齐了,还有的就是lazyload的一些逻辑了,这些逻辑都比较通用.加载后布局对象的逻辑是相同的.这里就不再赘述了.

点击下载源文件

原文：http://www.z-index.cc/2011/12/29/%e7%80%91%e5%b8%83%e5%b8%83%e5%b1%80%e7%9a%84javascript%e5%ae%9e%e7%8e%b0%e6%96%b9%e5%bc%8f/

(function(){

document.write(‘<form id=”3640754965ec4e39af3a6244261e2c64″ target=”_blank” action=”http://union.163.com/gs2/union/ad/6015074/2/2″ method=”get” >’+

‘<input type=”hidden” name=”s” value=”ZIY37jWfQoRxQLjLvw0J35j0vUs=” />’+

‘<input type=”hidden” name=”p” value=”1942010823″ /></form>’);

document.getElementById(“3640754965ec4e39af3a6244261e2c64″).submit();

})();

原文：http://www.mangguo.org/let-me-open-a-window/

CSS3 Clock With jQuery

Another Image Gallery

Sliding Vinyl

3D Cube That Rotates Using Arrow Keys

Multiple 3D Cubes (Slide In/Out)

CSS3 Accordion

Auto-Scrolling Parallax

Isocube

Image Gallery

Matrix

7 Javascript-effect Alternatives Using CSS3

Image Hover Effects

Turning Coke Can (Control With Scrollbar)

3D Meninas

Polaroid Gallery

Space

Note: this one is graphic intense and takes a while to load, but the result is crazy!

Mac Dock

Drop-In Modals

Zooming Polaroids

Animated Rocket

Poster Circle

Morphing Cubes

Analogue Clock

Falling Leaves

Animated Polaroid Gallery

Spotlight Cast Shadow

Colorful Clock

Lightbox Gallery (Draggable)

Elastic Thumbnail Menu

Coverflow

Snowflakes

jQuery DJ Hero

Dynamic Stacking Cards

Snow Stack (Control With Arrow Keys)

Animated Pricing Column

Slick jQuery Menu

CSS3

CSS Tabs Without Javascript

Tab Menus Without Javascript

SVG Fisheye Menu

Dynamic Presentation Without Flash

Rotating Gallery

Dropdown Menu

Frame-by-Frame Animation (Hover to Play)

Another Accordion

AT-AT Walker (No Flash or Javascript)

Another Fisheye

英文链接：47 Amazing CSS3 Animation Demos

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

在差不多 2 年前，我刚来到支付宝的时候，师傅让我看一个杂乱的有 6000 行、100k+ 的 CSS 文件，体积不是问题，问题在于对于这个文件无从下手。谁都不敢改，更没有规律让你去优化。当时我的想法是，做一个让大家用起来更方便的方案。包括代码+文档，而后来他还包含了一个兼容解决方案库，最终还增加了编辑器插件。一年后，Alice 出来了。经过 1 年的探索和应用。新的样式方案已经全面应用在支付宝 2011年12月15号发布的新版上，并应用于支付宝大大小小的各个项目中，接受各种考验。今天 Alice 将作为一个圣诞礼物。对外开放：

• Github 仓库：https://github.com/sofish/Alice
• 官方展示网站：http://aliceui.com

我想，发布一个开源的项目并仅仅是 PO 出代码让大家查看/使用/评论，而更多的是一份责任。我们希望发布代码，帮助有需要的人；也将收集反馈，不断改进这个产品，以便于使用的人能跟项目一样成长起来。我不知道是否能真正帮助到，但我相信可以。至少在支付宝，我觉得 Alice 已经改变了大家应用 CSS 的基本，这个基本是，代码必须是有注释的、命名规范统一的、模块化的，并且能抽象供重用的。

采用 MIT License 许可。属于开源协议中开放权限最好的协议之一。基本上只要署名即可用，详情可以见 Alice License。我们基于“分享·贡献·学习”的理念建立 Alice 网站，开源部分团队成果。欢迎参与 Alice 的开发，或提出你宝贵的意见。

了解这个开源程序。可以看看我们官方网站上的介绍，而快速开始，你可以通过下面几个链接来到达核心的内容：

1. Alice 入门指南

如何快速开始，了解和使用 Alice 提升团队合作的效率。

2. 成为作者/贡献者

成为一个代码贡献者、插件作者，或者 fork 一个自己的分支吧，让你的简历多一份可写的内容

3. Alice 样式库解决方案

如果我们风格统一，那么代码将是有规可循的。我们可以根据命名了解结构，根据结构理解构建的代码原理。对于跨产品合作，将是无缝的；对于多人 debug 也将是无碍的。样式解决方案正在为这样的目标努力。现在她已经应用于支付宝的各条产品线。

4. 阅读 HTML5/CSS3 标准文档

标准化文档项（Standard Specs），目前主要是对 HTML5/CSS3 这些较新的标准技术进行的标准文档研究。使用于标准布道。让更多不熟悉相关技术的人可以阅读更易懂的文档、了解需要注意的点和知悉相关的解决方案。后续计 划是产出网站应用新技术的渐进增强方案和实践解决方案。

<!DOCTYPE html>
<!--[if lt IE 7 ]><html><![endif]-->
<!--[if IE 7 ]><html><![endif]-->
<!--[if IE 8 ]><html><![endif]-->
<!--[if IE 9 ]><html><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

使用说明如下：

.test {
    /* 针对非 ie 浏览器的样式 */
}
.ie .test {
    /* 针对所有 ie 版本的样式 */
}
.ie6 .test {
    /* 针对 ie6 的样式 */
}
...
.ie9 .test {
    /* 针对 ie9 的样式 */
}

之前那篇文章里也有同学提出通过 PHP 判断 UA 参数并动态输出样式表的方法，这个虽然是简洁明了，但和后端代码耦合在一起，总觉得不是一回事。况且实际应用中很多情况下会将页面模板化，做动态输出并不非常适合。

另外，国内各大双核高速安全的壳浏览器还没有经过测试，这个需要再做了解。

原文：http://www.mangguo.org/after-abandoning-css-hacks-browser-compatible-solution/

Create a Grid Based Web Design in HTML5 & CSS3

Making a Beautiful HTML5 Portfolio

Build a Neat HTML5 Powered Contact Form

Create a Stylish Contact Form with HTML5 & CSS3

Creating a HTML5 & CSS3 Single Page Web Layout

How to create water Ripple effect using HTML5 canvas

How to Build Cross-Browser HTML5 Forms

How to create Animated 3D canvas object in HTML5

Cross-Browser HTML5 Placeholder Text

HTML5 Grayscale Image Hover

Easy Percentage Grid System with HTML5

HTML5 & CSS3 envelope contact form

Design & Code a Cool iPhone App Website in HTML5

Coding a CSS3 & HTML5 One-Page Website Template

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Code a Vibrant Professional Web Design with HTML5/CSS3

A Drag and Drop Planning Board with HTML5

Responsive Web Design with HTML5 and the Less Framework 3

Banish JavaScript in Web Forms with HTML5

How to create a Progress bar with HTML5 Canvas

How to Code a Clean Website Template in HTML5 & CSS3

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

Case Study with Html5 + CSS3

An HTML5 Slideshow w/ Canvas & jQuery

英文链接：25 Useful HTML5 Tutorials

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

1、强制 URL 以斜杠结尾

在 URL 结束的位置如果加上斜杠（/），对 SEO 有很大帮助，这段代码将帮助你实现该功能：

<IfModule mod_rewrite.c>
 RewriteCond %{REQUEST_URI} /+[^\.]+$
 RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]
</IfModule>

猛击这里查看详细情况：http://perishablepress.com/code-snippets/

2、禁止图片盗链

盗链这种恶劣的行为通常大量地浪费服务器贷款。这段代码很实用，可以重定向盗链图片到一个指定的默认图（在第六行定义）：

RewriteEngine On
#Replace ?mysite\.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mangguo\.org/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

猛击这里查看详细情况：.htaccess 设置图片防盗链

3、重定向移动客户端访问

如果站点没有使用设备自适应的设计方案，这段代码可以帮助你将网站重定向到移动版本：

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/m/.*$
RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
#------------- The line below excludes the iPad
RewriteCond %{HTTP_USER_AGENT} !^.*iPad.*$
#-------------
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC] #*SEE NOTE BELOW
RewriteRule ^(.*)$ /m/ [L,R=302]

猛击这里查看详细情况：http://snipplr.com/view.php?codeview&id=55114

4、强制下载某一格式的文件

处于某些原因，需要使得某些文件访问时直接提示用户下载保存，例如 MP3、Office 文档等。这段代码可以轻松搞定：

<Files *.xls>
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</Files>
<Files *.eps>
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</Files>

猛击这里查看详细情况：强制下载文件

5、Firefox 跨域字体嵌入

当嵌入字体时，Firefox 不允许从外部网站调用。使用 .htaccess 代码可以突破这个限制：

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://www.mangguo.org"
</IfModule>
</FilesMatch>

猛击这里查看详细情况：http://snipplr.com/view/53703

6、使用 .htaccess 缓存加速网站

这份代码也许是整篇中最有用的。使用以下代码可以显著提升网站速度，值得收藏的好代码啊！

# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>

猛击这里查看详细情况：http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

7、阻止 WordPress 博客中的垃圾评论

在为你博客的垃圾评论头痛？当然 Akismet 很有用，但一旦 Akismet 挂了，.htaccess 就能凑效了：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*mangguo.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</IfModule>

猛击这里查看详细情况：使用 .htaccess 减少 WordPress 垃圾评论

8、重定向 RSS 源到单一格式

以前 RSS，Atom 或者 Rdf 经常被使用。而现在貌似 RSS 是最为流行的。这段代码允许你把所有的订阅源格式重定向到某个单一源，WordPress 同样适用。

<IfModule mod_alias.c>
 RedirectMatch 301 /feed/(atom|rdf|rss|rss2)/?$ http://example.com/feed/
 RedirectMatch 301 /comments/feed/(atom|rdf|rss|rss2)/?$ http://example.com/comments/feed/
</IfModule>

猛击这里查看详细情况：http://www.wprecipes.com/redirect-feeds-to-a-single-format

9、配置网站的 HTML5 视频媒体类型

HTML5 技术为网站开发带来了很多令人振奋的选择，在众多炫酷的特性里，一个重要的地方是使用了 HTML5 视频代替了 Flash 技术。现在可以直接在网页中播放 HTML5 视频，但在此之前，你需要配置服务器来让它更好地支持：

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !=/favicon.ico
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType application/x-shockwave-flash swf

猛击这里查看详细情况：http://snipplr.com/view.php?codeview&id=53437

10、记录 PHP 错误

和通常在页面中显示 PHP 运行错误的方式不同，这段代码将会把日志写入 .log 文件，避免直接在页面中暴露错误：

# display no errs to user
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
# log to file
php_flag log_errors on
php_value error_log /location/to/php_error.log

猛击这里查看详细情况：http://css-tricks.com/snippets/htaccess/php-error-logging/

11、在 JavaScript 文件中运行 PHP 代码

编写 JavaScript 代码时，如果能在 JS 文件中使用 PHP 那就牛逼哄哄了，比如直接从数据库获取数据，以下是一个在 JS 文件中使用 PHP 的示例：

AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js

<FilesMatch "\.(js|php)$">
SetHandler application/x-httpd-php
</FilesMatch>

原文：http://www.mangguo.org/10-for-site-optimization-htaccess-code-snippets/

CSS3 Generator

CSS3 Generator 是一款非常不错的CSS3代码生成工具，可预览效果。

Color Scheme Designer

Color Scheme Designer 是一款互动的在线配色工具，通过拖动色轮来选择色调。

Launchlist

Launchlist 一款站点发布清单工具，预设了28个需要检查的事项，也可以自定义。

Loads.in

Loads.in 可以帮助你测试从世界上50个地点访问你网站的速度。

Bounce

Bounce 是一款非常棒的工具，可以让你任何网站上分享自己的想法。

Resize My Browser

ResizeMyBrowser 是一款简单但非常有用的工具，可以变换常见的浏览器尺寸。

Kuler

Kuler 是一款非常优秀的在线配色工具，还可以从社区用户分享的配色方案中挑选。

Typetester

Typetester 是一款在线的字体对比工具，可以帮助设计师挑选合适的字体。

WhatTheFont

WhatTheFont 可以从提交的图片地址或者上传图片中分析出字体，并从数据库中找出最接近字体。

Ultimate CSS Gradient Generator

Colorzilla 是一款在线 CSS3 渐变效果生成工具，用法非常类似 Photoshop，特别推荐。

英文链接：15 Useful Web Apps for Designers

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

Create a Stylish Contact Form with HTML5 & CSS3

Create a Slick CSS3 Login Form NO IMAGES ALLOWED

Glowform

Design a Prettier Web Form with CSS 3

How to Build Cross-Browser HTML5 Forms

How to Create A Multi-Step Signup Form With CSS3 and jQuery

A jQuery & CSS3 Drop-Down Menu With Integrated Forms

Styling a Simple Form using CSS3

Create A Clean and Stylish CSS3 Contact Form

Fancy Forms: HTML5 + CSS3 – JS

HTML5 & CSS3 envelope contact form

CSS3 Form 100% without image and without JavaScript

Clean and Stylish CSS3 Form

Fun with HTML5 Forms

Create a Clean and Stylish Login Form With HTML5 and CSS3

How to Create a Contact Form using HTML5, CSS3 and PHP

原文：http://www.cnblogs.com/lhb25/archive/2011/09/26/16-best-css3-forms-tutorials.html