今天生肖开奖结果查询|今期生肖开红花打一肖
主頁 > 知識庫 > 網頁基礎 > HTML >

HTML5與CSS3設計模式

來源:中國IT實驗室 作者:佚名 發表于:2013-04-16 13:21  點擊:
[html] 一、背景設計模式 style type=text/css div { background:#f00 url(images/heading2.jpg) no-repeat; width:250px; height:76px; } /style h1Background Image(背景設計模式)/h1 div/div 二、絕對定位設計模式 style type=text/css *.positioned {
[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>

    有幫助
    (7)
    53.8%
    沒幫助
    (6)
    46.2%
  • 上一篇:HTML5 websocket實驗
  • 下一篇:沒有了
  • 今天生肖开奖结果查询 福彩欢乐生肖走势图 采购比会计赚钱吗 九亿娱乐手机端 刺激战场ag怪人灵敏度 九龙娱乐网 AG海底漫游app 盛世润成怎么赚钱 pk10软件代理 捕鱼达人3d怎么赚钱 《侏罗纪世界》游戏下载