第7章CSS布局与美化.pptVIP

CSS滤镜属性只能用在HTML空间元素上。HTML合法的空间元素包括BODY、BUTTON、DIV、IMG、INPUT、MARQUEE、SPAN、TABLE、TD、TEXTAREA、TFOOT、TH、THEAD、TR等 CSS滤镜属性的选择符是filter，只要进行滤镜操作，都必须先定义filter，其他和普通CSS语句一样 （1）Chroma滤镜 【7_19.html】 设置一个对象中指定的颜色为透明色 filter: Chroma(Color=color); CSS滤镜图案文字 （2）Dropshadow滤镜 （IE版本限制） 为对象添加下落的阴影效果 filter: Dropshadow(color=color,offx=offx,offy=offy,positive=true/false); （3）Wave滤镜 【7_20.html】 为对象添加竖直方向上的波浪效果 filter:Wave(add=add,freq=freq,lightstrength=lightstrength,phase=phase,strength=strength); CSS滤镜图案文字（续） 7.6.1 背景控制 7.6.2 图像样式设计 7.6.3 CSS滤镜图案 7.6 用CSS设计背景和图像 （1）背景颜色【7_21.html】 其CSS语法如下： background-color: transparent|color 背景控制 （2）背景图像【7_22.html】 【7_23.html】 其CSS语法如下： background-image: none|url(url); background-repeat: x-repeat/y-repeat/no-repeat; background-position: top/center/bottom/% left/center/right/%; 利用CSS的固定背景属性，还可以建立不滚动的背景图像，页面滚动时，背景图像可以保持不变，其语法如下： background-attachment: scroll|fixed 背景控制（续） （1）图像边框 在CSS规则中，可以通过【边框】分类中的【样式】下拉列表中选择边框的样式外观，并可以设置边框线的宽度和颜色 【 7_24.html 】 图像样式设计 （2）图片缩放 CSS也可以像HTML一样，通过width和height两个属性来控制图片的大小，但CSS中可以使用更多的值。例如，设置width为75%时，图片的宽度将调整为父元素宽度的四分之三 【 7_25.html 】 注意：如果只是设置了图片的width属性，而没有设置height属性时，图片本身会自动等长宽比缩放，如果只是设置了图片的height属性效果也是一样。只有同时设置了width和height属性时才不会等比例缩放 图像样式设计 （3）图文混排 在CSS中主要通过给图像设置float属性来实现图文混排效果，还可以通过padding属性设置图片和文字的间距 【 7_26.html 】 图像样式设计 （1）Alpha滤镜 Alpha滤镜用来设置透明度 filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY) 通过【CSS规则定义】对话框中的【扩展】分类上的【滤镜】下拉菜单中选择Alpha滤镜，输入参数值创建滤镜样式 【 7_27.html】 CSS滤镜图案 （2）Flip翻转滤镜 FlipH代表水平翻转，FlipV代表垂直翻转 filter:FlipH或filter:FlipV ，无参数设置 【 7_28.html】 CSS滤镜图案（续1） （3）Gray滤镜 将一张彩色图片变成黑白图片 ，语法filter:gray （4）Invert滤镜 反色，相当于照片底片的效果 ，语法filter:invert （5）Xray滤镜 给照片添加X光照射的效果 ，语法filter:Xray 【 7_29.html】 CSS滤镜图案（续2） 在传统的表格布局设计中，通常都是利用表格、文本加超链接来完成导航的设计 在CSS布局中，可以使用ul列表来制作导航。实际上，导航可以理解为导航列表，导航中的每一个栏目都是一个列表项 7.7.1 项目列表 7.7.2 导航菜单 7.7.3 超级链接 7.7 网站导航与超链接 通常的项目列表主要采用ul或者ol标记，同时配合li标记罗列各个项目 如果希望设置项目符号采用图片的方式，可以使用list-style-