<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Dave Shea" />
<meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display" />
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design." />
<meta name="robots" content="all" />
<title>css Zen Garden: The Beauty in CSS Design</title>
<!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
<script type="text/javascript"></script>
<style type="text/css" title="currentStyle" media="screen">
@import "001.css";
</style>
<link rel="Shortcut Icon" type="image/x-icon" href="http://www.csszengarden.com/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml" />
</head>
<!--
This xhtml document is marked up to provide the designer with the maximum possible flexibility.
There are more classes and extraneous tags than needed, and in a real world situation, it's more
likely that it would be much leaner.
However, I think we can all agree that even given that, we're still better off than if this had been
built with tables.
-->
<body id="css-zen-garden">
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
</div>
<div id="quickSummary">
<p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>
<p class="p2"><span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p>
</div>
<div id="preamble">
<h3><span>The Road to Enlightenment</span></h3>
<p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span></p>
<p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.</span></p>
<p class="p3"><span>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.</span></p>
</div>
</div>
<div id="supportingText">
<div id="explanation">
<h3><span>So What is This About?</span></h3>
<p class="p1"><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym> to 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.</span></p>
<p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym> allows 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.</span></p>
</div>
<div id="participation">
<h3><span>Participation</span></h3>
<p class="p1"><span>Graphic artists only please. You are modifying this page, so strong <acronym title="Cascading Style Sheets">CSS</acronym> skills are necessary, but the example files are commented well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide</a> for advanced tutorials and tips on working with <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>
<p class="p2"><span>You may modify the style sheet in any way you wish, but not the <acronym title="HyperText Markup Language">HTML</acronym>. 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.</span></p>
<p class="p3"><span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a> 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. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</span></p>
</div>
<div id="benefits">
<h3><span>Benefits</span></h3>
<p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-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.</span></p>
</div>
<div id="requirements">
<h3><span>Requirements</span></h3>
<p class="p1"><span>We would like to see as much <acronym title="Cascading Style Sheets, version 1">CSS1</acronym> as possible. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <acronym title="Cascading Style Sheets">CSS</acronym> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <acronym title="Cascading Style Sheets">CSS</acronym> validates.</span></p>
<p class="p2"><span>Unfortunately, designing this way highlights the flaws in the various implementations of <acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display differently, even completely valid <acronym title="Cascading Style Sheets">CSS</acronym> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a> 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.</span></p>
<p class="p3"
CSS禅意花园(源代码)
2星 需积分: 3 108 浏览量
2010-07-21
15:19:46
上传
评论
收藏 3.52MB RAR 举报 
CSS禅意花园(源代码) （561个子文件） 
062.css 15KB 088.css 14KB 057.css 12KB 035.css 11KB 025.css 10KB 068.css 9KB 058.css 9KB 037.css 8KB 096.css 8KB 044.css 7KB 022.css 7KB 036.css 7KB 094.css 6KB 097.css 6KB 083.css 6KB 090.css 6KB 028.css 6KB 013.css 6KB 064.css 5KB 009.css 5KB 070.css 5KB 019.css 5KB 029.css 5KB 093.css 5KB 017.css 5KB 001.css 5KB 069.css 5KB 005.css 5KB 102.css 5KB 024.css 4KB 031.css 4KB 085.css 4KB 041.css 4KB 026.css 4KB 095.css 4KB 030.css 4KB
longgarden.gif 89KB NavBG.gif 60KB CSZenLogo.gif 57KB bloodlust.gif 44KB whitebg.gif 37KB top.gif 37KB ContentBG.gif 33KB RoadToEnlightmentBG_2.gif 31KB txt_upgrade.gif 27KB bg-central.gif 27KB rightside_bg.gif 17KB cr-tr.gif 16KB nutitle.gif 15KB head.gif 14KB leftside_bg.gif 14KB paper_mid.gif 14KB logo.gif 14KB bg_02.gif 13KB zengarden.gif 13KB flwr.gif 12KB link_background.gif 11KB ch1.gif 11KB ch2.gif 11KB fade.gif 11KB ch5.gif 11KB ch3.gif 11KB ch4.gif 10KB bottom.gif 10KB flora.gif 10KB z_cont.gif 10KB z_twig.gif 10KB Dragon.gif 9KB bg_tree.gif 9KB green.gif 9KB pen.gif 8KB noStandards.gif 8KB paper_clip.gif 7KB sticky.gif 7KB paper_top.gif 6KB header.gif 6KB z_bgrnd.gif 6KB quicksum_bg.gif 6KB leftback.gif 5KB enlightment.gif 5KB cr2.gif 5KB zh3_select.gif 5KB zh1_combo.gif 5KB bg_rel-one.gif 5KB reqtext.gif 4KB green_top.gif 4KB beneftxt.gif 4KB pretext.gif 4KB sowhat.gif 4KB whatistext.gif 4KB parttext.gif 4KB road.gif 4KB what.gif 4KB cssdemo.gif 4KB fleur.gif 3KB zen_logo.gif 3KB subtext.gif 3KB csszengarden.gif 3KB green_bottom.gif 3KB zen.gif 3KB共 561 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
chris_yu70452012-04-19这本书很好 这个例子还是不全的
