HTML5与CSS3设计模式
一、背景设计模式<style type="text/css"> div { background:#f00 url("images/heading2.jpg") no-repeat; width:250px; height:76px; }</style><h1>Background Image(背景设计模式)</h1><div></div>二、绝对定位设计模式<style type="text/css"> *.positioned { position:relative; } *.absolute { position:absolute; top:10px; left:10px; }</style><h1>Absolute(绝对定位设计模式)</h1><div class="positioned"><span class="absolute">Sized Absolute</span></div><style type="text/css"> *.positioned { border:1px solid red; height:100px; background-color:#ffee00; } *.absolute { border:4px solid green; background-color:white; }</style>三、文本替换设计模式<style type="text/css"> #h2 { position:relative; width:250px;height:76px; overflow:hidden; } #h2 span { position:absolute; width:250px; height:76px; top:0; left:0; background:#ff0 url("images/heading2.jpg") no-repeat; }</style><h1>Text Replacement(文本替换设计模式)</h1><h2 id="h2">heading 2<span></span></h2>四、左旁注设计模式<style type="text/css"> *.left-marginal { position:relative; margin-left:200px; } *.marginal-heading { position:absolute; top:0; left:-200px; margin:0; }</style><h1>Left Marginal(左旁注设计模式)</h1><div class="left-marginal"> <h2 class="marginal-heading">Heading</h2> You want to excerpt an element and move it into the left again.</div> 五、旁注式图片下沉设计模式<style type="text/css"> *.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; margin:0; top:0; left:0; background:url(images/m.jpg) no-repeat; }</style><h1>Marginal Graphic Dropcap(旁注式图片下沉设计模式)</h1><p class="indent"> <span class="graphic-dropcap">M<span></span></span> arginal Graphic Dropcap. The letter M has been covered by the dropcap is image.Screen readers read the text and visual users see the image.If the browser cannot display the dropcap image, the text becomes visible.</p>