通过实现设计模型中的页面，来深入学习CSS的背景知识以及定位。
设计模型图如下所示：
一、设计要求：
设计是流式的(fluid)或易于变化的，也就是说它的高度和宽度应该能够子的哦哦那个适应用户的浏览器，同时保持所需的比例。具体要求如下：
1）位于左侧的每个图片必须固定在原有的位置；
2）树和LOGO必须能够向右侧移动，即树必须一直与布局的底部相关联；
3）层次上，树不能遮挡logo以及其他板块，必须处于最下层；左侧的图片模块在最顶层。
二、CSS背景的基本概念：
先看一段背景属性的CSS代码：
body{
background: #1299AB url(images/myBackground.gif) no-repeat fixed 10% 50px;
}
CSS的背景可以分解成5个独立的属性：颜色、图片、重复、附加和位置。下面着重介绍重复、附加和位置这三个属性。
1、重复：重复属性规定的是图片的重复情况，它有几个有效的取值：n0-repeat（不重复，图片只产生一次），repeat-x（水平方向上从左到右重复），repeat-y（使图片从元素顶端开始沿着Y轴重复），repeat（属性的默认值，从元素左上角开始平铺整个元素）。
2、附加：附加属性定义“位置”属性的计算是与页面内容相关，还是与浏览器视口相关。所以它有两个有效值，fixed和scroll(默认值)。fixed可以约定背景图片将固定不动，而scroll则约定背景图片会随着页面其余部分滚动而移动。
3、位置：这个属性定义了背景图片起始的X和Y坐标。确定背景图片X坐标的水平方向的关键字有：left（默认值）、center、right；确定背景图片Y坐标的垂直方向的关键字有：top（默认值）、center、bottom；其他的有效选择还有：相对值（百分比）或绝对值（px/em/mm/pt）.
三、HTML页面
回到实例中，根据设计模型，编写实现的HTML代码如下：
<!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" lang="en">
<head>
<!--meta标记定义的字符集是支持中文的gb2312-->
<meta http-equiv=content-type content="text/html; charset=gb2312">
<!--链接外部CSS样式 -->
<link rel="stylesheet" href="deadwood.css" type="text/css" media="screen" />
<title>Deadwood Design</title>
</head>
<body>
<!--页面的logo -->
<h1 id="logo">Deadwood Design</h1>
<!--页面上的介绍信息 -->
<div id="intro">
<p><span>D</span>eadwood design is Australia's 47th best
web design and development agency.</p>
<p>We specialise in awesomeness.</p>
</div>
<!--为排序列表显示图片，理论上是要放入页面作品区portfolio的DIV块中，并将浅色格子作为背景，但是IE对z-index支持不好，所以把这个列表置于div外 -->
<ul>
<li><a href="1.html"><img src="images/portfolio1.jpg" alt="Mountains and Sky"/></a></li>
<li><a href="2.html"><img src="images/portfolio2.jpg" alt="Lampshade"/></a></li>
<li><a href="3.html"><img src="images/portfolio3.jpg" alt="Cat"/></a></li>
<li><a href="4.html"><img src="images/portfolio4.jpg" alt="Bark"/></a></li>
<li><a href="5.html"><img src="images/portfolio5.jpg" alt="Thumbs Up"/></a></li>
<li><a href="6.html"><img src="images/portfolio6.jpg" alt="Flowers"/></a></li>
</ul>
<!--设计一个格子模型延伸横跨整个页面，并位于树的图像之下 ，所以HTML中，portfolio div块先与tree div-->
<div id="portfolio"></div>
<!--在DIV元素中放置页面右下角的枯树图片 -->
<div id="tree"></div>
</body>
</html>
对HTML代码解读的示意图如下所示：
四、CSS代码
为上述页面编写的CSS代码如下：
/*CSS STYLE SHEET FOR [基于CSS进行设置实现的一个首页]
Created by [Serein_Chan]
Email: [Serein_Chan@foxmail.com]
Author Blog:[http://blog.csdn.net/cxwen78]
*/
/*注释 */
/*body的样式 */
/*背景图片水平方向重复，图像的最底端的颜色与背景颜色灰色 #A4A4A4接近，实现效果，适应性高，效率高 */
body {
background: #A4A4A4 url(images/bg_gradient.gif) repeat-x;
}
/*树DIV块的样式 */
#tree {
position: absolute; /*要将DIV固定在右下角，所以采取绝对定位*/
bottom: 0; /*紧贴页面底部 */
right: 40px; /*和页面右侧距离40px */
background: url(images/tree.gif) no-repeat; /*背景图片，不重复 */
/*根据图片大小设置DIV的宽度和高度 */
width: 331px;
height: 400px;
}
/*logo DIV块的样式 */
#logo {
position: absolute; /*要使DIV块与页面顶部和右侧距离固定，采取绝对定位*/
top: 15%; /*采用百分比值使得logo更好的适应显示器*/
right: 40px; /*和页面右侧距离40px */
width: 334px;
height: 36px;
background: url(images/logo.gif) no-repeat; /*背景LOGO图片，不重复 */
text-indent: -9999em; /*HTML中添加h1描述使页面具有意义，这里设置负的text-indent把文本反向转移到页面之外*/
margin: 0;
z-index: 3; /*具有较高z-index值的元素会覆盖值低的元素，即将logo置于tree的上层 */
}
/*介绍性段落的DIV块的样式 */
#intro {
position: absolute;
top: 15%; /*与logoDIV块呼应，将div置于距顶部15%*/
left: 40px; /*距body元素的左边界40px的位置 */
background: url(images/d.gif) no-repeat;/*段落的第一个字母D是图片 */
padding: 5px 0 0 61px; /*为了确保文本不会覆盖这个div的背景图片，分别在图片左侧和顶部添加61px和5px的内边距补白 */
width: 250px;
color: #fff;
font-family: Georgia, serif;
font-size: 0.8em;
}
/*为确保文本Deadwood的完整性，将文本字母D插到span元素中，并将其置于页面之外 */
#intro span {
position: absolute;
top: -1000px; /*将span元素置于页面之外 */
}
#intro p {
margin: 0 0 12px 0;
}
/*页面的作品区，包括6个链接，分别链接到不同页面来展示作品集 */
/*样式要求，设计一个格子模型延伸横跨整个页面，并位于树的图像之下 ，所以HTML中，portfolio div块先与tree div*/
#portfolio {
position: absolute;
top: 35%;
left: 0;
width: 100%;
height: 294px;
background: url(images/bg_checkered.gif); /*用一张40*40的方块图像作为格子背景 */
}
/*未排序列表显示作品集 */
ul {
position: absolute;
top: 35%;
left: 40px;
padding:0;
z-index: 4; /*具有较高z-index值的元素会覆盖值低的元素，即将置于portfolio和tree的上层 */
list-style: none inside; /*列表样式：无标记；列表项目标记放置在文本以内，且环绕文本根据标记对齐。*/
width: 482px;
height: 294px;
margin: 0;
}
ul li {
width: 138px;
height: 138px;
float: left;
margin: 0 18px 18px 0;
background: url(images/bg_checkered_dark.gif); /*设置8*8像素的格子图片做背景，显得颜色更深一点 */
}
/*链接图像区域的设置 */
ul li a {
float: left;
width: 102px;
height: 102px;
margin: 18px 0 0 18px;
}
ul li a img {
border: 0;
}
大功告成，最终的效果图如下：
五、素材图片
