一、背景设计模式

 

　　[html]

 

　　一、背景设计模式

 

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

 

　　二、绝对定位设计模式

 

　　*.positioned { position:relative; }

 

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

 

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

 

　　四、左旁注设计模式

 

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

 

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

 

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

 

　　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.

 

　　版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。

 

　　如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。