HTML5与CSS3设计模式

[html]    一、背景设计模式

    <style type="text/css">

    div { background:#f00 url（"images/divbg.jpg"） no-repeat; width:200px; height:66px; }

    </style>

    <h1>Background Image（背景设计模式）</h1>

    <div></div>

    二、绝对定位设计模式

    <style type="text/css">

    *.positioned { position:relative; }

    *.absolute { position:absolute; top:20px; left:20px; }

    </style>

    <h1>Absolute（绝对定位设计模式）</h1>

    <div class="positioned">

    <span class="absolute">Sized Absolute</span>

    </div>

    <style type="text/css">

    *.positioned { border:1px solid red; height:80px; background-color:#ff0000; }

    *.absolute { border:5px solid green; background-color:#000000; }

    </style>

    三、文本替换设计模式

    <style type="text/css">

    #h2 { position:relative; width:240px;height:66px; overflow:hidden; }

    #h2 span { position:absolute; width:240px; height:66px; top:0; left:0; background:#ff0 url（"images/divbg.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>