HTML5与CSS3设计模式
导读：收集整理的这篇文章主要介绍了html5教程-HTML5与CSS3设计模式，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 [htML] 一、背景设计...
收集整理的这篇文章主要介绍了html5教程-HTML5与CSS3设计模式，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 [htML]一、背景设计模式
style tyPE="text/css">
p { background:#f00 url("images/heading2.jpg") no-repeat; width:250px; height:76px; }
/style>
h1> Background Image(背景设计模式)/h1>
p> /p>
二、绝对定位设计模式
style type="text/css">
*.posITioned { position:relative; }
*.absolute { position:absolute; top:10px; left:10px; }
/style>
h1> Absolute(绝对定位设计模式)/h1>
p class="positioned">
span class="absolute"> Sized Absolute/span>
/p>
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 2span> /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>
p class="left-marginal">
h2 class="marginal-heading"> Heading/h2>
You want to excerpt an element and move it into the left again.
/p>
五、旁注式图片下沉设计模式
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"> Mspan> /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>
[html]
一、背景设计模式
style type="text/css">
p { background:#f00 url("images/heading2.jpg") no-repeat; width:250px; height:76px; }
/style>
h1> Background Image(背景设计模式)/h1>
p> /p>
二、绝对定位设计模式
style type="text/css">
*.positioned { position:relative; }
*.absolute { position:absolute; top:10px; left:10px; }
/style>
h1> Absolute(绝对定位设计模式)/h1>
p class="positioned">
span class="absolute"> Sized Absolute/span>
/p>
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 2span> /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>
p class="left-marginal">
h2 class="marginal-heading"> Heading/h2>
You want to excerpt an element and move it into the left again.
/p>
五、旁注式图片下沉设计模式
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"> Mspan> /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>
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5与CSS3设计模式
本文地址： https://pptw.com/jishu/586468.html