第4章-页面背景特效.ppt

* 第4章　页面背景特效 本章内容 background的用法 CSS Sprites 滑动门技术 本章目标 使用background设置网页背景 使用Sprites制作平滑投票特效 使用滑动技术实现Tab菜单 内容回顾 标准文档流概念 网页布局的默认模式 相对定位遵循流动模型布局规则，跟随HTML文档流自上而下流动 浮动元素元素的特征 浮动塌陷的定义以及解决方法 1. Background属性 　　　在页面设计中，使用哪种标签向网页中添加图像？ 使用img标签插入图像的缺点 HTML请求数目增多，页面浏览速度越慢 解决办法 多张小图片整合为一张图片 ，减少对服务器的请求 通过background属性设置背景 img src=“images/logo.jpg” width=“120” height=“60”/ 1.1 background-image 背景图像background-image属性用来定义图像背景路径. background-image : none | url ( url ) 取值说明： none：默认值，无背景图 url ( url )：使用绝对或相对 url 地址指定背景图像 background-image #idDiv{ width:700px; height:476px; line-height:18px; padding:6px; background-image:url(images/bg.jpg);/*设置层的背景*/ } 在页面中插入一段文本，并为该文本添加背景图像 教员演示制作过程 1.2 background-repeat 设置定义元素中背景图像的重复方式，制作重复的背景图象 background-repeat : repeat | no-repeat | repeat-x | repeat-y 取值说明： repeat： 默认值。背景图像在纵向和横向上平铺 no-repeat：背景图像不平铺 repeat-x：背景图像仅在横向上平铺 repeat-y：背景图像仅在纵向上平铺 background-repeat #book{ background-image:url(images/hrepeat.jpg); background-repeat:repeat-y; width:600px; height:400px; border:3px double gray; } 使用背景平铺属性，制作台历边框效果 教员演示制作过程 1.3 background-position 背景定位属性background-position用来设置背的起始位置 background-position : length || length background-position : position || position 取值说明： length ：百分数 |长度值 position ：top | center | bottom | left | center | right background-position 元素的左上角为背景图像定位的原点，所有偏移相对于该点进行 left top center top center bottom background-position 使用background-position属性，制作黑白与彩色图片交替效果 background-position 第一步：使用ul和超链接制作页面框架 第二步：设置li和超链接的样式属性 第二步：设置超链接的悬停样式属性 ul id=menu lia id=item1 href=# title=Item 1nbsp;/a/li lia id=item2 href=# title=Item 2nbsp;/a/li … /ul ul#menu li { list-style-type:none; float:left; width:100px; height:100px;} ul#menu li a { display:block; width:100px; height:100px; text-decoration:none; background: url(images/01.jpg) no-repeat 100px 100px;} a#item1:hover {background-position: 0 0; } a#item2:hover {background-position: -100px 0;} 2. CSS Sprites 2.1 什么是CSS Sprites CSS　Sprites是一种图片整合技术 通过CSS Sprites方法将多张图片组合为一张图片，可以有效