2.1 “CSS禅意花园”简介

在网站设计，特别是在css设计领域，有一个世界范围都非常著名的网站——CSS Zen Garden，中文名称为“CSS禅意花园”。这个网站以最有效、最优美的方式展示了CSS的最高境界。

任何一个学习CSS的人都不应该错过对CSS禅意花园的研究。本章将从禅意花园网站上的近千个作品中精选16个作品进行介绍，它们的HTML结构和内容是完全相同的，通过不同的CSS设置，就做出了完全不同的效果。

CSS禅意花园是一位加拿大没计师Dave Shea创建的，他在网站设计的实际工作中逐渐认识到CSS的巨大潜力远远没有被发掘出来。为了推动CSS设计的发展，他在2003年建立了“CSS禅意花园”这个网站（网址是http://www.csszengarden.com）。他知道仅仅依靠自己的力量是无法发掘出CSS的全部潜力的，因此采用了征集作品的方式，通过大家的努力来展现CSS的魅力。

首先Dave Shea精心设计了一个网页，把这个网页的HTML结构和内容固定下来，为这个网页设计了5个完全不同主题风格的CSS样式，然后通过网站的发布，邀请全世界的广大设计师参与CSS禅意花园的作品设计，征集作品。

对征集的作品要求是必须完全使用他提供的这个HTML结构和内容，不能做改动，要保证通过调用设计师提供的CSS文件来展现作品。

读者在网址http://www.csszengarden.com的后面加上编号，就可以查看相应的作品，例如要查看看005号作品，输入网址http://www.csszengarden.com/?cssfile=005/005.css即可。

一、网站作品简介

Dave Shea自己制怍的是001-005号作品。其中OOI号作品名为“Tranquille”（安静）．这个作品几年来一直被作为CSS Zen Garden网站的首页，点击以下网址查看。lodidance.com

http://www.csszengarden.com/?cssfile=001/001.css

002号作品名为“Salmon Cream Cheese“（鲑鱼奶油奶酪），点击以下网址查看。

http://www.csszengarden.com/?cssfile=002/002.css

003号作品名为“Stormweather”（暴风雪），点击以下网址查看。

http://www.csszengarden.com/?cssfile=003/003.css

004号作品名为“arch 4.20”（拱门），点击以下网址查看。

http://www.csszengarden.com/?cssfile=004/004.css

005号作品名为“Blood Lust”（血色欲望），点击以下网址查看。

http://www.csszengarden.com/?cssfile=005/005.css

从006号开始，都是世界各地的设计师的作品。目前在csszengarden.com上收录了1000多个作品．它们都充分体现了设计师的丰富的创意，给无数学习CSS的人带来了启发。

二、为何选择CSS禅意花园

在网页学习网制作CSS教程时，我们想到如果能够从CSS禅意花园的作品中挑选出典型作品案例，分析并介绍它们的设计思路和制作方法给广大读者，对读者的帮助将会是很大的，这样读者可以学习这些特定案例的设计方法。更重要的是能够熟悉并掌握设计思路，可以从其他数百个作品中寻找并获得灵感。

在本教程中，共安排了4章内容与禅意花园相关，分别是本章和全教程的最后3章。

本章中将介绍一些各具特色的作品，为大家解读CSS禅意花园的作品设计方法，使大家通过这些作品更好地了解CSS的巨大潜力。这些作品的设计师来自欧美近10个国家，在每个作品中都附有创作者的个人网站信息，读者如果有兴趣，可以进一步了解他们的工作和生活。

本教程的最后一章将挑选其中的典型作品，进行深入的分析，在学习完本书之后，禅意花园中的绝大部分作品读者都应该可以自己制作出来。希望读者在学习完本书之后，能够设计出自己的“禅意花园”作品，甚至被收录为禅意花园的“官方作品”（目前亚洲还只有新加坡和日本等国家的设汁师的很少的几个作品被收录）。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表