DIV常用样式
一、常用属性:
1、Height:设置DIV的高度。
2、Width:设置DIV的宽度。
例:
<div style="width:200px;height:200px;background-color:Black;"></div>
<div style="background-color:Black;width:500px;height:500px;"> <div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;"> </div> </div>
<div style="padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;"> <div style="width:200px; height:200px;background-color:White;"></div> </div>
<div style="padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;"> <div style="width:140px; height:140px;background-color:White;"> </div> </div>
<div style=" font:bold 14px 宋体;background-color:Yellow"> 明月几时有?把酒问青天。不知天上宫阙、今夕是何年?我欲乘风归去,惟恐琼楼玉宇,高处不胜寒.起舞弄清影,何似在人间? 转朱阁,低绮户,照无眠。不应有恨、何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共蝉娟。 </div>
<div style="border:dotted 2px black; background-color:Yellow; width:100px;height:100px;"></div>
<div style="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll; overflow:auto"> <div style="width:2px;height:1000px;"></div> </div>
<div style="background-color:Yellow; background-image:url(mw3.jpg); background-position:right bottom; background-attachment:scroll; width:600px;height:200px;"> </div>
<style type="text/css"> #paneldiv div { background-Color:yellow; height:200px; width:200px; } </style> <div id="paneldiv" style="width:230px;height:2300px; background-color:Blue;"> <div style="filter:alpha(opacity=0,finishopacity=80,style=1, startx=10,starty=10,FinishX=100, FinishY=100);opacity:0.5;"> alpha效果:<br /> </div> <div style="filter:blur(add=1,direction=100,strength=5);"> blur效果:<br /> add为1代表字有阴影,0代表字全部模糊。 abcdefghijklmnopqrstuvwxyz </div> <div style="filter:chroma(color='#ff0000')" onclick="this.style.backgroundColor='#ff0000'" ondblclick="this.style.backgroundColor='black';"> chroma效果:<br /> 原为黄色,单击变成红色变成透明,双击变成黑色。 </div> <div style="filter:FlipH;"> fliph效果:<br /> ABCDEFGH<br /> IJKLMNOP<br /> 此属性在设置宽高后有效 </div> <div style="filter:FlipV;"> flipv效果:<br /> ABCDEFGH<br /> IJKLMNOP<br /> 此属性在设置宽高后有效 </div> <div style="filter:gray;"> gray效果:<br /> abcdefghijklmn </div> <div style="filter:invert; text-transform:uppercase;color:Red;"> invert效果:<br /> 背景色变成相反颜色,如黑变成白。 </div> <div style="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)"> wave效果:<br /> Add:一般为1,或0。(0表示上下波浪) Freq:变形值。(指定多少个波浪) LightStrength:变形百分比。(变形后的阴影。) Phase:角度变形百分比。(弯曲的角度) Strength:变形强度。(数值越大,DIV变形就越大。) </div> <div style="filter:Xray"> xray效果:<br /> sfasdfasdfasdfsadf </div> <div style="filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');"> progid:dximagetransform.microsoft.gradient效果:<br /> endendendendendendendendendend </div> </div> <div style="filter:DropShadow(color='#666666',OffX='3',OffY='3', Positive='1');width:200px;height:200px;"> dropshadow效果:<br /> 此效果只有在不设置背景色时有效,这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色,为1时color只是文本投影的颜色。 </div> <div style="filter:Glow(color='#0000ff',strength='3'); width:100px;height:100px;"> glow效果:<br /> strength的光的强度0--100;此时不能设DIV的背景色。 </div> <div style="filter:mask(color='ff0000'); width:100px; height:100px;text-transform:uppercase;color:black; "> mask效果:<br /> 没有明显效果,不能设背景色。 </div> <div style="filter:shadow(color='0000ff',direction='100'); width:100px;height:100px;"> shadow效果:<br /> abcdefghijklmn </div> <div style="filter:Xray;width:100px;height:100px; background-color:red;"> xray效果:<br /> sfasdfasdfasdfsadf </div> <div style="filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=100, StartColorStr='#B5CCFA', EndColorStr='#ffffff');width:100px;height:100px;"> 渐变效果。 endendendendendendendendendend </div> <div style="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;"> lsksalsslalalalalalalal </div> <div style="filter:alpha(opacity=100, finishOpacity=0,style=2); width:100px; height:100px;background-color:Yellow;"> </div>