关于我们课程设置学子心声疑难解答活动剪影软件下载在线留言联系我们
汇丰电脑会计少儿培训中心
留言咨询
网上报名
疑难解答
认证项目
如何考证
考证动态
扬州会计网上报名
扬州会计网上成绩查询
扬州会计专业技术资格考试报名、会计职称考试网上报名
扬州汇丰电脑培训、会计培训、英语培训
关 键 字:
搜索字段:
证书类型:
团体培训
教学优势
 
[扬州网页设计培训]Div样式总结(二)
来源: 扬州汇丰电脑培训学校    阅读数:3087  添加时间:2012-7-7   类别:平面设计
 

二、一些特殊效果:

1、cursor:设置DIV上光标的样式。

2、clip:设置剪辑矩形。

例:

复制代码

<div style="font:16px 宋体;width:600px;height:200px; cursor:help; clip:rect(0px 100px 20px 0px); line-height:20px; overflow:auto;background-color:Yellow;position:absolute">
div样式测式how areyou.
</div>

复制代码

说明:clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。看以上效果。

3、filter:滤镜效果。

例:

复制代码

<div style="width:450px;height:200px;background-color:Blue;">
     
<div id=”tdiv” style="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;
float:left; width:200px;height:200px;"
 >
     
</div>
     
<div style="background-color:Yellow; width:200px;height:200px;float:left;">
     
</div>
</div>

复制代码

说明:设置透明度:opacityvalue (FF专用,value的取值为01之间的小数)filter:alpha(opacity=value)(IE专用,value取值:0100)

如果要有JavaScript改变DIV的透明度可用下面的方法:

FF中:document.getElementById('tdiv').style.opacity='0.9';

IE中:document.getElementById('tdiv').style.filter='alpha(opacity=90)';

 

以下是滤镜综合的例子,将以下代码复制到一个网页文件中就可看到其效果,所以就不要加以说明了。

例:

 

复制代码

<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>
复制代码

关闭窗口】 【打印本页
合作伙伴
友情链接
扬州市财政局 全国会计资格评价网 江苏省财政厅 江苏工程造价信息网 仪征地税 安徽会计网 江苏教育考试院 电脑培训 会计服务 扬州人才网 扬州城市招贴 扬州家教网 易培训 江苏润泰工程项目管理 天空交换链 扬州人事考试网 扬州万杨物业 扬州万里行 网站之家 长沙湘瑞教育培训中心 扬州114 扬州家教吧 扬州培训网 广州金莎学院 会计从业资格证培训
申请链接
更多链接>>
学员作业   |   就业指导   |   诚聘英才   |   加盟合作   |   交换链接
版权所有 2002-2011 © 扬州汇丰电脑、会计、英语专业培训学校
地址:扬州市文昌西路283号金都汇商务楼6层(西区大润发西豪客来旁)
电话:0514-87868672 学校邮箱:hf_edu@qq.com 在线咨询QQ:83069659
教学质量投诉电话:18952784378 邮箱:taoxiazhi@126.com   备案序号:京ICP备07502448号

扬州汇丰职业培训学校是最专业的:电脑培训,会计培训,少儿培训学校.培训项目:平面广告培训,家装设计培训,网站设计培训,软件开发培训,扬州会计培训,扬州会计上岗证培训,扬州会计从业资格考试培训,扬州初级会计师培训,计算机等级考试培训,电脑组装维修培训,网络工程培训,扬州少儿英语培训,奥数培训,语文阅读与写作培训,美术培训,书法培训等