1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>设计中文版式</title>
6 <style type="text/css">
7 body{ /*页面基本属性*/
8 background:#FFF;
9 color:#000;
10 font-size:0.875em;
11 font-family:"新宋体", Arial, Helvetica, sans-serif;
12 }
13 h1,h2,h3{ /*标题样式*/
14 text-align:center;
15 margin-bottom:1em;
16 }
17 h2{ /*个性化二级标题样式*/
18 color:#999;
19 text-decoration:underline;
20 }
21 h3{ /*个性化三级标题样式*/
22 letter-spacing:0.4em;
23 font-size:1.4em;
24 }
25 p{ /*统一段落文本样式*/
26 margin:0;
27 line-height:1.8em;
28 }
29 #Summary .p1{ /*第一文本块第一段的样式*/
30 color:#444;
31 margin-left:4em;
32 margin-right:4em;
33 text-indent:2em;
34 }
35 #Summary .p2{
36 text-align:right;
37 }
38 .p2,.p3{
39 text-indent:2em;
40 }
41 .first:first-letter{
42 font-size:50px;
43 float:left;
44 margin-right:6px;
45 padding:2px;
46 font-weight:bold;
47 line-height:1em;
48 background:#000;
49 color:#FFF;
50 }
51 </style>
52 </head>
53 <body>
54 <div id="introduction">
55 <div id="pageHeader">
56 <h1><span>CSS Zen Garden</span></h1>
57 <h2><span><acronym title="cascading style sheets">CSS</acronym>设计之美</span></h2>
58 </div>
59 <div id="Summary">
60 <p class="p1"><span>展示以<acronym title="cascading style sheets">CSS</acronym>技术为基础，并提供超
61 强的视觉冲击力。只要选择列表中任意一个样式表，就可以将它加载到本页面中，并呈现不同的设计效果。</span></p>
62 <p class="p2"><span>下载<a title="这个页面的HTML源代码不能被改动。" href="http://www.csszengarden.com/zengarden-sample.html">
63 HTML文档</a>和<a title="这个页面的CSS样式表文件，你可以更改它。" href="http://www.csszengarden.com/zengarden-sample.css">
64 CSS文件</a>。</span></p>
65 </div>
66 <div id="preamble">
67 <h3><span>启蒙之路</span></h3>
68 <p class="p1 first"><span>不同浏览器随意定义标签，导致无法相互兼容的<acronym title="Document Object Model">DOM</acronym>结构，
69 或者提供缺乏标准支持的CSS等陋习随处可见，如今当使用这些不兼容的标签和样式时，设计之路会很艰难。</span></p>
70 <p class="p2"><span>现在，我们必须清除以前为了兼容不同浏览器而是用的一些过时的小技巧。感谢<acronym title="world wide web consortium">
71 W3C</acronym>、<acronym title="web standards project">WASP</acronym>等标准组织，以及浏览器厂家和开发师们的不解努力，我们终于能够进
72 入Web设计的标准时代。</span></p>
73 <p class="p3"><span>CSS Zen Garden（样式禅意花园）邀请你发挥自己的想象力，构思一个专业级的网页。让我们用慧眼来审视，充满理想和激情去学习CSS
74 这个不朽的技术，最终使自己能够达到技术与艺术合而为一的最高境界。</span></p>
75 </div>
76 </div>
77 </body>
78 </html>
