HTML5与CSS3设计模式

本文介绍了五种使用CSS实现的不同布局设计模式,包括背景设计模式、绝对定位设计模式、文本替换设计模式、左旁注设计模式及旁注式图片下沉设计模式。通过具体的样式设置和元素定位,展示了如何灵活运用CSS来满足多样化的网页布局需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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










评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值