CSS使用设计模将-背景图片。
把所有可能的块状、定位和浮动布局和一些基本的文本样式属性，把它们相互组合，这样一来，就可以用它们来创建内联布局了。所提到的多种模式与某些特别的属性和元素相结合，那些属性和元素都是用于为块状元素、列表、图片、表格和表格列赋予样式的。总的来说，这些模式都是通过把45种常见的css属性与4种元素（内联、内联块状、块状和表格）和5种定位方式（静态、相对、绝对、固定、浮动）结合而创建的。这便是设计模式的强大威力。
利用基础的模式并将它们组合来构造出更加复杂的模式。这样学习css更加容易，使用css也更加有效率。这些设计模式来创建流动布局、字母下沉、强调框、引用和提示框。为了说明设计模式的简易与强大，下面5个例子将展示如何利用一些基本的设计模式并把它们组合生成更加复杂的模式。你无须知道每个模式的细节——只要了解组合模式的过程即可。这个例子展示了对background履性的运用。background是css内建的一种设计模式，用于在元素后面显示图片。把background属性与一个div元素相结合。div的大小为250px×76px，所以它会显示出一个完整的背景图片。
HTML
<hl>背景图片</hl>
<div></div>
css
div { background:url("heading.jpg") no-repeat: width:250px; height:76px; }
&">nbsp; （如图所示）
CSS演示了绝对定位设计模式。
绝对定位设计模式中的核心思想为，让一个元素脱离原来代码中的排序，而让它相对另一个元素重新定位。由此．css 提供一条position：absolute规则．当position：absolute与top和left属性结合后，你就可以把元素定位于相对于离它 最近的已定位祖先元素的顶端和左侧任意距离的位置。我用position：realative来为那'i'div定位，因此它将会成为离span最近的已 定位祖先。然后我把这个span放在了离div一端和左侧10像素的位置。
HTML
<hl>绝对定位</hl>
<div class="positioned">
<span class="absolutei">设定尺寸的绝对定位元素</span>
</div>
css
*positioned {position: relative; }
*absolute { position: absolute; top: 10px; left:10px: }
／*隐去了不必要的代码*／
（如图所示）