2.2 CSS禅意花园作品赏析（上）

一、郊野——两列布局

两列布局是所有网站中最常见的布局形式，也是禅意花园的作品中最常见到的。这种布局结构清晰，对访问者的引导性非常好。《郊野》是这类作品的代表，由意大利设计师Mario Carboni设汁。在这个作品中，页面划分合理，并且颜色搭配平和而协调，点击下面的网址查看。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=149/149.css，设计师的个人网站是http://www.mariocarboni.com/。

二、像素画——三列布局

这是193号作品，由英国设计师Jon Tan设计。这是一个很典型的三列布局设计，设计师专门制作了精致的像素画，作为页面的标题图像，效果相当吸引人。

三列布局也是一种非常常见的布局形式，通常一个宽列放置主要内容，两个窄列放置导航链接等内容，访问这个作晶的网址是http://www.csszengarden.com/?cssfile=193/193.css，设计师的个人网站是http://www.gr0w.com/。

三、百合池塘——三列布局变体

这是201号作品，如湖2.8所示，由澳大利亚设计师Rose Thorogood设计，这是一个三列布局的变体形式，在顶部和底部，相邻的两列进行了合并。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=201/201.css，设计师的个人网站是http://tulips4rose.com。

四、郁金香——多列布局

禅意花园征集作品要求使用固定的HTML，这个限制使大多数设计方案都采用两列或三列布局，而实际上也可以制作出非常好的多列效果。在收录的作品中，也有一些非常优秀的多列布局作品，088号作品就是典型代表，由美国设计师Eric Shepherd设计。lodidance.com

访问这个作品的网址是http://www.csszengarden.com/?cssfile=088/088.css，设计师的个人网站是http://arkitrave.com/log。

五、日与夜——包含圆角的设计

CSS的框模型限制，使得在使用CSS设计页面的初期，大多数作品都是方形的，缺少圆形和曲线的配合，显得比较呆板。实际上，使用CSS同样可以设计出完美的圆形图形元素的作品。这里展示的这个作品就使用了包含圆角的设计，由比利时设计师Colas Schretter设计。

访问这个作品的网址是http://homepages.vub.ac.be/~cschrett/zengarden/dayandnight，设计师的个人网站是http://homepages.vub.ac.be/~cschrett。

六、Si6——包含倾斜的设计

绝大多数网页的布局都是横平竖直的，而禅意花园网站中可以看到一些包含了倾斜元素的设计作品，不但没有破坏页面的整体平衡感，而且还为页面增添了独特的气质，使访问者感到耳日一新。比较典型的倾斜设计作品是044号作品，它是由美国设计师Shaun Inman设计的。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=044/044.css，设汁师的个人网站是http://www.shauninman.com。

七、清茶时光——装饰性设计

再好的设计如果忽视了对细节的把握，也会太打折扣的。使用CSS不但能够布局，还可以为网页添加很多装饰性的元素，使页面看起荣非常精致，细节更加突出。这里展示的124号作品是由奥地利设计师Michaela Maria Sampl设计的，她通过使用一系列协调的装怖性元素，使页面的效果和谐而美观。充分体现女性设计师作品的柔美风格。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=124/124.css，设计师的个人网站是http://www.frausampl.at。

八、爱之空气——流体布局

目前，绝大多数网站，尤其是正规的商业网站，都使用固定宽度的布局．CSS禅意花园的作品也是如此，但是仍有一部分适应宽度的作品，或者称为“流体布局”。例如这里展示的170号作品，是由德国设计师Nele Goetz设计的，页面分为两列．总的宽度会撑满整个页面，左列宽度会随浏览器宽度而变化，右列宽度固定。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=170/170.css，设计师的个人网站是http://www.april-design.de。

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