在本教程的第2章中，我们介绍了一些“CSS禅意花园”的精美作品。在那时，读者还刚剐开始了解CSS，无法深入进行介绍和实践。

而现在，读者已经经过了十几章CSS和HTML案例的磨练，相信在这个过程中既感受到了思考的辛苦，也感受到了成功的喜悦。

在本章中，就结合前面所有章节介绍的技术，利用CSS禅意花园的网页和作品，进行一些综合的练习。

在本章中，介绍禅意花园的侧重点与《the Zen of CSS

design》一书的区别在于，本书将更重视一个方案是如何做出来的，使读者更容易地理解其结构。在学习完本书后，还可以花一些时间，结合自己的创意，做出更多的禅意花园作品。如果读者制作出了令自己满意的作品，欢迎读者发给网页学习网，共享读者收获的心得。

首先介绍一下Dave

Shea设计的这个HTML文档，因为所有CSS都是基于这同一个HTML文档的。该文件位于本书光盘“第15章/no-css.htm”。

/p>

"/TR/xhtml1/DTD/xhtml1-strict.dtd">

css Zen Garden: The Beauty in CSS Design

@import "9999.css";

css Zen Garden

The Beauty of CSSDesign

A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

Download the sample html file and css file

The Road to Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSSsupport.

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSPand the major browser creators.

The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.

So What is This About?

There is clearly a need for CSSto be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.

CSSallows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.

Participation

Graphic artists only please. You are modifying this page, so strong CSSskills are necessary, but the example files are commented well enough that even CSSnovices can use them as starting points. Please see the CSSResource Guide for advanced tutorials and tips on working with CSS.

You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.

Download the sample html file and css file to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. Send us a link to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.

Benefits

Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for CSS-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.

Requirements

We would like to see as much CSS1as possible. CSS2should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSSand not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSSvalidates.

Unfortunately, designing this way highlights the flaws in the various implementations of CSS. Different browsers display differently, even completely valid CSSat times, and this becomes maddening when a fix for one leads to breakage in another. View the Resources page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.

We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.

This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSSunder a Creative Commons license identical to the one on this site so that others may learn from your work.

Bandwidth graciously donated by DreamFire Studios. Now available: Zen Garden, the book.

xhtml css cc 508 aaa

Select a Design:

Retro Theater by Eric RogéLily Pond by Rose ThorogoodIcicle Outback by Timo VirtanenZen Army by Carl DesmondThe Original by Joachim ShotterFloral Touch by Jadas JimmyElegance in Simplicity by Mani SheriarDazzling Beauty by Deny Sri Supriyono

Archives:

next designs »View All Designs

Resources:

View This Design’s CSSCSSResourcesFAQSubmit a DesignTranslations

提示：您可以先修改部分代码再运行

在不使用任何CSS时显示效果请读者观察一下。

读者只要知道这个页面中的内容分为3个部分，这3个部分的id分别为“intro”、“supportingText”和“Iinklist”，它们都放置在一个id为“container”的div中。每一个部分又分为若干个div，每个div都有各自的id，以便使用CSS设置它们的样式。

如果仔细读一下HTML代码，就会发现它和一般的网页HTML代码有一定的区别。例如下面摘录的一小段代码：

折叠展开XML/HTML

代码复制内容到剪贴板

TheRoadtoEnlightenment

Litteringadarkanddrearyroadlaythepastrelicsofbrowser-specifictags,incompatibleDOMs,andbrokenCSSsupport.

Today,wemustclearthemindofpastpractices.WebenlightenmenthasbeenachievedthankstothetirelesseffortsoffolkliketheW3C,WaSPandthemajorbrowsercreators.

ThecssZenGardeninvitesyoutorelaxandmeditateontheimportantlessonsofthemasters.Begintoseewithclarity.Learntousethe(yettobe)time-honoredtechniquesinnewandinvigoratingfashion.Becomeonewiththeweb.