HTML5与CSS3设计模式

6次阅读

[html]    一、背景设计模式
    <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>