第14节CSS样式表(三).ppt

* * 第14节　CSS样式（三） 课前分享 雨后，一只蜘蛛艰难地向墙上已经支离破碎的网爬去，由于墙壁潮湿，它爬到一定的高度，就会掉下来，它一次次地向上爬，一次次地又掉下来……第一个人看到了，他叹了一口气，自言自语：“我的一生不正如这只蜘蛛吗？忙忙碌碌而无所得。”于是，他日渐消沉。第二个人看到了，他说：这只蜘蛛真愚蠢，为什么不从旁边干燥的地方绕一下爬上去？我以后可不能像它那样愚蠢。于是，他变得聪明起来。第三个人看到了，他立刻被蜘蛛屡败屡战的精神感动了。于是，他变得坚强起来。 有成功心态者处处都能发觉成功的力量。 项目概述： 洛阳艺龙网络设计主要从事网站建设营销策划推广等服务，本着 “力求非凡创意，更多用心服务” 的口号，为洛阳各大部门创建了网站，并实现了网络的推广。 今天网页美工设计人员张林接到一个项目，要求为镇江新区超迪散热器有限公司做一个网站。 项目概述 项目展示 项目分析 本节重点 制作流程 总结提升 作业布置 要求：1.体现公司简介、荣誉证书及新闻动态 2.充分展示公司产品，体现人力资源内容 3.以静态为主，加载相应的flash动画 4.模式统一，美观大方，充分展示企业形象 5.体现留言页面及联系我们，便于与客户的沟通 6.体现公司版权信息 项目展示 项目分析 工作思路： 运用模板进行整体布局——运用层进行相应动画的设置——利用框架与代码结合制作鼠标响应动画——利用CSS样式进行网站的整体美化 今日工作：利用CSS样式进行网站的整体美化 ※重点问题：css各类滤镜的使用方法。 ※难点问题：css滤镜的参数。 一、css滤镜的应用 　css滤镜通常是在不改变原图的基础上，加以滤镜处理，在预览的时候达到自己预期的目标。 样式表滤镜不仅对图象起作用，同时也适用于文本。 二、各类滤镜的案例欣赏以及参数讲解 “扩展”样式属性包括过滤器、分页和光标选项 “分页”打印期间在样式所控制的对象之前或者之后强行分页。 “光标”当指针位于样式所控制的对象上时改变指针图像。 “过滤器”对样式所控制的对象应用特殊效果（包括模糊和反转） 视觉效果：光标有15种形式，一般用于以下四种：hand：当鼠标移上时为手形crosshair：十字形text：文本I形 wait：等候沙漏形 css滤镜： Alpha：透明(opacity代表透明度水准。默认的范围是从0 到 100, 0代表完全透明，100代表完全不透明 . finishopacity“是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。 style“ 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形 STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标.一般我们设置为StartX=0, StartY=0（这样就是表示的透明效果是从图片的左上角开始的。） FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。) 2.Blur：模糊 add:在模糊时是否显示原对象， add=0：不显示原对象，某些图象使用效果较好; add=1：显示原对象，文字使用效果较好。 direction：用来设置模糊方位角，向上为0，取值范围顺时针0-360，45为一单位，所以实际上只有八个方向值,默认值270向左。 Strength:用来设置模糊半径，代表有多少个像素的宽度成为阴影， 3.FlipH：水平反转 FlipV：垂直反转(fliph() flipv():先水平反转，再垂直反转) 4.Wave： 使对象产生水平或垂直方向上的正弦波形 “add”：表示是否要把对象按照波形式样扭曲 “freq”：是波纹的频率 “lightstrength”：参数可以对于波纹增强光影的效果。 “phrase”：决定波形的形状，值取0至360之间. “strength”：表示波形的振幅大小 5.Chroma：作用： 将图片中的指定颜色变成透明 6.Dropshadow： 7.Glow： 在对象的周围产生光晕而模糊的效果8.Gray： 把一个彩色的图象变成灰色调图象 9.Invert： 让对象产生照片底片的效果10.Light：在一个对象进行灯光投影11.Mask： 利用一个HTML对象在另一个对象上产生图像的遮罩 12.Shadow：阴影效果13.Xray： 让对象轮廓突出显示 总结提升 今天我们学习的内容 1、css样式的滤镜效果类型 2、特殊css样式的设定 基本作业 提升作业