当前位置:首页 > 主打产品 >

HTML5与CSS3设计模式

作者:永年县聚联紧固件制造有限公司    发布时间:2017-09-06 10:04:57

HTML5与CSS3设计模式


[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>


,可视化专题,专题系统

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:黄冈SEO http://huanggang.4567w.com

  • 上一篇:Ant、Gradle、Python三种打包方式的介绍
  • 下一篇:最后一页
  •