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 backgrou ...
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>
