几种css设计模式和实例

1.      
background
：用于在元素后面显示图片
 
div{background:url(“heading2.jpg”) no-repeat;
width:250px; height:76px;}
2.      
绝对定位：让一个元素脱离原来的代码中的排序，而让它相对另外一个元素重新定位
*.positioned
｛
position:relative
｝
*.absoluted
{position:absolute; top:10px ; left :10px ;}
3.      
左边距：把一个或多个元素移出块状元素，使其靠近左外边距，这就可以把标题（或注释，图片等）放在左边，而把内容放在右边
*.left-marginal
{position:relative ; margin-left:200px;}
*.marginal-heading{position:absolute;left=-200px;top:0;margin:0}
4.      
外边距图片字母下沉：文本替换
+
左外边距
*.indent
{position:relative; margin-left:120px}
*.graphic-dropcap
{position:absolute; width:120px; height:90px; left:-120px;top:0}
*.graphic-dropcap
span{position:absolute; width:120px; height:90px; left:0; top:0;background-url(“m.jpg”)
no-repeat
；
}