几种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 ； }