html5 css3 织梦,HTML5与CSS3设计模式-优快云博客

本文介绍了几种常用的CSS布局设计模式，包括背景设计模式、绝对定位设计模式、文本替换设计模式、左旁注设计模式及旁注式图片下沉设计模式。通过这些模式可以有效地解决网页布局中的常见问题。

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

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

div { background:#f00 url("images/heading2.jpg") no-repeat; width:250px; height:76px; }

Background Image(背景设计模式)

二、绝对定位设计模式

*.positioned { position:relative; }

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

Absolute(绝对定位设计模式)

Sized Absolute

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

*.absolute { border:4px solid green; background-color:white; }

三、文本替换设计模式

#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; }

Text Replacement(文本替换设计模式)

heading 2

四、左旁注设计模式

*.left-marginal { position:relative; margin-left:200px; }

*.marginal-heading { position:absolute; top:0; left:-200px; margin:0; }

Left Marginal(左旁注设计模式)

Heading

You want to excerpt an element and move it into the left again.

五、旁注式图片下沉设计模式

*.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; }

Marginal Graphic Dropcap(旁注式图片下沉设计模式)

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.