這次的小作品選用了百合花圖片作爲文檔top的背景圖。
本作品完整代碼：點擊查看本作品完整代碼
作品效果：
代碼框架結構：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Zen Garden: CSS設計之美</title>
<link rel="stylesheet" media="screen" href="029/029.css">
<meta name="author" content="Changjiu Huang">
<meta name="description" content="展示CSS設計的美麗。">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="page-wrapper">
<section class="intro" id="zen-intro">
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2><abbr title="Cascading Style Sheets">CSS</abbr>設計之美</h2>
</header>
<div class="summary" id="zen-summary" role="article">
<p></p>
<p></p>
</div>
<div class="preamble" id="zen-preamble" role="article">
<h3>開悟之路</h3>
<p> </p>
<p></p>
<p></p>
</div>
</section>
<div class="main supporting" id="zen-supporting" role="main">
<div class="explanation" id="zen-explanation" role="article">
<h3>這是關於什麼？</h3>
<p></p>
<p></p>
</div>
<div class="participation" id="zen-participation" role="article">
<h3>參與</h3>
<p> </p>
<p></p>
<p></p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>益處</h3>
<p></p>
</div>
<div class="requirements" id="zen-requirements" role="article">
<h3>必要條件</h3>
<p></p>
<p> </p>
<p></p>
<p></p>
<p></p>
</div>
<footer>
<a href="javascript:void(0);" title="檢查網站的HTML是否合乎標準" class="zen-validate-html">HTML</a>
<a href="javascript:void(0);" title="檢查網站的CSS是否合乎標準" class="zen-validate-css">CSS</a>
<a href="javascript:void(0);" title="檢視本網站的創用CC版權聲明：姓名標示-非商業性-相同方式分享" class="zen-license">CC</a>
<a href="javascript:void(0);" title="閱讀關於本網站的親和力說明" class="zen-accessibility">A11y</a>
<a href="javascript:void(0);" title="在GitHub建立本網站的分支" class="zen-github">GH</a>
</footer>
</div>
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">選擇一項設計：</h3>
<nav role="navigation">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
<div class="design-archives" id="design-archives">
<h3 class="archives">資料彙整：</h3>
<nav role="navigation">
<ul>
<li class="next">
<a href="javascript:void(0);">
下一個設計 <span class="indicator">›</span>
</a>
</li>
<li class="viewall">
<a href="javascript:void(0);" title="瀏覽所有設計。">
瀏覽所有設計 </a>
</li>
</ul>
</nav>
</div>
<div class="zen-resources" id="zen-resources">
<h3 class="resources">資源：</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</aside>
</div>
</body>
</html>CSS樣式部分：
/* basic elements */
body, html, div {
padding: 0;
margin: 0;
}
body {
font: 8pt/16pt 仿宋, geneva, arial, sans serif;
color: #000;
background: url("../images/1bg.gif") repeat-y;
}
ul li {
list-style: none;
}
a:visited {
color: #672;
}
a:hover {
color: #ABBC47;
}
a {
color: #230;
}
/* page-wrapper div*/
.page-wrapper {
width: 760px;
padding: 0;
margin: 0;
border-top: 1px solid #230;
border-right: 1px solid #230;
background: transparent url("../images/topbg.gif") repeat-x;
}
/* intro div */
/*----------------------------*/
.intro {
width: 760px;
margin-top: 20px;
background: transparent url("../images/lsh.gif") no-repeat 687px 231px;
}
/* header div */
header {
position: absolute;
left: 0;
width: 355px;
height: 201px;
}
header h1 {
float: left;
width: 355px;
height: 201px;
margin-top: 0;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
background: transparent url("../images/centerpiece.jpg") no-repeat;
}
header h2 {
display: none;
}
/* summary div */
.summary {
width: 332px;
height: 200px;
border-right: 1px solid #ABBC47;
border-top: 1px solid #ABBC47;
margin: 0 0 0 355px;
background: #ABBC47 url("../images/quicksumbg.gif");
}
/* footer of summary*/
footer {
position: absolute;
left: 0;
top: 230px;
width: 340px;
margin: 0 30px 0 400px;
font-size: 10px;
text-align: right;
}
.summary p:last-child a,
footer a {
color: #fff;
}
.summary p:first-child {
padding: 100px 30px 2px 30px;
font: bold 11px/14px 仿宋;
color: #fff;
}
.summary p:last-child {
position: absolute;
left: 0;
top: 230px;
margin: 0 30px;
font-size: 10px;
color: #fff;
}
/* preamble div */
.preamble {
width: 344px;
padding: 40px 30px 30px 30px;
border-right: 1px solid #ddd;
margin: 30px 0 0 355px;
text-align: left;
background: transparent url("../images/endsection.gif") no-repeat bottom;
}
.preamble p:nth-child(2) {
width: 270px;
}
.preamble h3 {
width: 270px;
height: 36px;
border-bottom: 1px solid #ddd;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
background: transparent url("../images/h3preamble.gif") no-repeat bottom;
}
/* supporting css */
.supporting {
width: 344px;
padding: 50px 30px 30px 30px;
border-right: 1px solid #ddd;
margin: 0 0 0 355px;
text-align: left;
}
.explanation, .benefits,
.participation, .requirements {
padding: 0 0 20px 0;
margin-bottom: 20px;
text-align: left;
background: transparent url("../images/endsection.gif") no-repeat bottom;
}
.supporting h3 {
width: 343px;
height: 36px;
border-bottom: 1px solid #ddd;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
.explanation h3 {
background: transparent url("../images/h3explanation.gif") no-repeat left bottom;
}
.benefits h3 {
background: transparent url("../images/h3benefits.gif") no-repeat left bottom;
}
.participation h3 {
background: transparent url("../images/h3participation.gif") no-repeat left bottom;
}
.requirements h3 {
background: transparent url("../images/h3requirements.gif") no-repeat left bottom;
}
/* sidebar css */
.sidebar {
position: absolute;
left: 0;
top: 252px;
width: 195px;
padding: 50px 30px 0 130px;
border-right: 1px solid #ddd;
background: transparent url("../images/lsh.gif") no-repeat;
}
.sidebar .wrapper {
padding: 0;
overflow: hidden;
}
.sidebar h3 {
width: 200px;
height: 36px;
border-bottom: 1px solid #ddd;
margin: 0;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
h3.select {
background: transparent url("../images/h3select.gif") no-repeat left bottom;
}
h3.archives {
background: transparent url("../images/h3archives.gif") no-repeat left bottom;
}
h3.resources {
background: transparent url("../images/h3resources.gif") no-repeat left bottom;
}
.design-selection ul {
padding: 10px;
margin: 10px 0 0 0;
}
.design-selection ul li {
display: block;
min-height: 40px;
padding: 5px 0 5px 25px;
margin: 5px 0;
border-bottom: 1px solid #eee;
background: transparent url("../images/bullet.gif") no-repeat 0 7px;
}
.design-selection li a {
display: block;
font-weight: bold;
white-space: nowrap;
}
.design-selection li a.designer-name {
display: inline;
text-decoration: none;
font-weight: normal;
}
.design-archives ul,
.zen-resources ul {
padding: 10px;
margin: 0 0 0 10px;
}
.design-archives ul li,
.zen-resources ul li {
display: block;
padding: 0 0 0 25px;
margin: 0;
background: transparent url("../images/bullet2.gif") no-repeat 2px 7px;
}
隱藏標題，並用背景圖片代替標題：
width: 150px;
height: 10px;
text-indexnt: 100%;
overflow: hidden;
white-space: nowrap;
background: transparent url("") no-repeat left bottom;在實際開發中，爲了使HTML文檔能適應更多的CSS樣式表，建議將圖片等放置於CSS樣式表中。HTML文檔中只保留純文本
