第4章 页面背景特效

第4章页面背景特效本章内容background的用法CSSSprites滑动门技术本章目标使用background设置网页背景使用Sprites制作平滑投票特效使用滑动技术实现Tab菜单内容回顾标准文档流概念网页布局的默认模式相对定位遵循流动模型布局规则，跟随HTML文档流自上而下流动浮动元素元素的特征浮动塌陷的定义以及解决方法1.Background属性在页面设计中，使用哪种标签向网页中添加图像？使用img标签插入图像的缺点HTML请求数目增多，页面浏览速度越慢解决办法多张小图片整合为一张图片，减少对服务器的请求通过background属性设置背景imgsrc=“images/logo.jpg”width=“120”height=“60”/1.1background-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.2background-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:3pxdoublegray;}使用背景平铺属性，制作台历边框效果教员演示制作过程1.3background-position背景定位属性background-position用来设置背的起始位置background-position:length||lengthbackground-position:position||position取值说明：length：百分数|长度值position：top|center|bottom|left|center|rightbackground-position元素的左上角为背景图像定位的原点，所有偏移相对于该点进行lefttopcentertopcenterbottombackground-position使用background-position属性，制作黑白与彩色图片交替效果background-position第一步：使用ul和超链接制作页面框架第二步：设置li和超链接的样式属性第二步：设置超链接的悬停样式属性ulid=menuliaid=item1href=#title=Item1 /a/liliaid=item2href=#title=Item2 /a/li…/ulul#menuli{list-style-type:none;float:left;width:100px;height:100px;}ul#menulia{display:block;width:100px;height:100px;text-decoration:none;background:url(images/01.jpg)no-repeat100px100px;}a#item1:hover{background-position:00;}a#item2:hover{background-position:-100px0;}2.CSSSprites2.1什么是CSSSpritesCSSSprites是一种图片整合技术通过CSSSprites方法将多张图片组合为一张图片，可以有效减少HTTP请求次数使用background属性完成所需图片的准确调用2.2CSSSprites的优点CSSSprites通过整合图片，减少对服务器的请求数量，从而加快页面加载速度CSSSprites能减少图片的字节页面中有三张图片，每张大小为4k，共计12k，服务器请求次数3次；利用图片整合技术将三张图片的内容整合成一张，大小为4k，服务器请求1次2.3Sprites的应用制作门户网站中出现的图形平滑投票效果思路分析：使用ul和超链接搭建页面结构设置ul的宽度及背景属性，背景采用第一个五角星，在水平方向平铺定义li为浮动元素，全部向左漂浮设置第一个li.current_rating为当前投票总数，定义其宽度，并设置left为0，背景采用第二个五角星，设置z-index为1，保证current_rating覆盖所有的li定义超链接为块状显示，设置宽度和高度为一个五角星的大小；定位方式为绝对定位，不设置背景超链接悬停时，设置超链接的背景图像为第三个五角星，改变超链接的宽度，宽度大小从左到右依次递增14px，left设置为0超链接在链接状态下和z-index要大于悬停状态下效果演示Sprites的应用页面框架：star_rating样式代码ulclass=star_ratingliclass=current_ratingstyle=width:35px;Currentrating:/liliahref=###title=1票class=one_star1/a/liliahref=###title=2票class=two_stars2/a/li…/ul.star_rating{list-style:none;margin:-1px00-1px;padding:0;width:70px;height:12px;position:relative;background:url(rating_stars.gif)00repeat-x;overflow:hidden;}.star_ratingli.current_rating{background:url(images/rating_stars.gif)024px;position:relative;height:12px;display:block;text-indent:-9000px;/*文本缩进，采用负值可隐藏文字*/z-index:1;left:0;}Sprites的应用超链接样式代码.star_ratinglia{…z-index:20;position:absolute;…}.star_ratinglia:hover{background:url(images/rating_stars.gif)012px;z-index:2;left:0;}.star_ratinga.one_star{left:0;}.star_ratinga.one_star:hover{width:14px;}…小结Background属性常用参数有background-image、background-repeat、background-positionBackground-position属性以元素左上角为原点(0,0)偏移定位CSSSprites是一种图片整合技术，结合background-position属性实现背景定位3.滑动门技术3.1什么是滑动门技术滑动门可以利用两个独立的背景图像实现，分别居于左右，像两扇可滑动的门，根据文本内容的多少缩放背景3.3滑动门的应用采用滑动门制作导航菜单，要求菜单的长度根据菜单文本的内容多少自适应根据内容多少自适应背景长度滑动门的应用实现思路：准备两张图片，分别为菜单左侧的背景图像tableft.gif和右侧的背景图像tabright.gif菜单的结构采用span标签和a标签制作a标签的背景采用tableft.gif，span标签的背景采用tabright.gif背景图像不重复ahref=#title=首页span首页/span/a滑动门的应用页面框架ul样式代码divid=tabs1ulliahref=#title=首页span首页/span/a/liliahref=#title=新闻span新闻/span/a/li…/ul/div#tabs1ul{list-style:none;…}#tabs1li{display:inline;…}滑动门的应用超链接和span标签的样式#tabs1a{float:left;background:url(images/tableft1.gif)no-repeatlefttop;…}#tabs1aspan{float:left;display:block;background:url(images/tabright1.gif)no-repeatrighttop;…}调用整合图片中的左上角图像调用整合图片中的右上角图像滑动门的应用定义菜单鼠标悬停下，超链接和span标签的样式#tabsa:hoverspan{color:#627EB7;}#tabs1a:hover{background-position:0%-42px;}#tabs1a:hoverspan{background-position:100%-42px;}设置鼠标悬停时sapn的背景设置鼠标悬停时超链接的背景3.4滑动门的实现标签结构设置a的背景为背景的左半部分，span的背景为右半部分ahref=#span文本内容/span/aA标签的背景span标签的背景总结background属性作用是设置页面元素的背景，该属性的参数有：background-image、background-repeat、background-position等background-position属性用于设置背景图像的定位，其值可以是长度单位、百分比及对齐方式，如left、right、center、top、bottom、middleCssSprites图片整合技术，可以减少客户端对服务器的请求，提高页面访问速度滑动门技术用于制作背景自适应宽度，如导航菜单随文本的多少自适应