- 1、本文档共17页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
让IT教学更简单,让IT学习更有效 让IT教学更简单,让IT学习更有效 让IT教学更简单,让IT学习更有效 让IT教学更简单,让IT学习更有效 ? 目录 让IT教学更简单,让IT学习更有效 ? 本章小结 第八章 CSS高级技巧 CSS精灵技术 精灵图的制作 CSS滑动门技术 margin负值的应用 8.1 CSS精灵技术 8.2 CSS滑动门技术 8.3 Margin负值的应用 8.1 CSS精灵技术 8.1.1 需求分析 上图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites)。 8.1 CSS精灵技术 简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图,如下图所示为搜狗网站中的一个精灵图。 搜狗网站精灵图展示 8.1 CSS精灵技术 8.1.2 工作原理 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。 8.1 CSS精灵技术 8.1.3 阶段案例 通过前面两个小节的学习,相信初学者已经对CSS精灵有了一定的认识。为了加深初学者对CSS精灵的理解,下面将应用CSS精灵技术制作传智播客设计学院首页中的精品课程模块,其效果如下图所示。 8.2.1 需求分析 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,如下图所示,即为设置了圆角背景的导航。 如果使用传统的CSS思想,要想为列表项“技术联盟”设置上图所示的圆角背景,可以对其所在的li标记应用大圆角背景。这种方式固然可以实现圆角背景的效果,但是,如果以后增加或减少列表项中的文字,就需要重新对li定义背景图像,以适应文本内容的多少。 8.2 CSS滑动门技术 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 8.2 CSS滑动门技术 8.2.1 需求分析 8.2 CSS滑动门技术 8.2.2 工作原理 滑动门技术的关键在于图片拼接,它将一个不规则的大图切为几个小图,每一个小图都需要一个单独的HTML标记来定义。以下图中的圆角背景为例,切图方法如下所示。 完成切图工作之后,就需要用HTML标记来拼接这些图像,方法为定义3个盒子,将所得的3张小图分别作为盒子的背景。 其中左右两个盒子的大小固定,用于定义左右侧的小圆角背景。 中间的盒子不指定宽度和高度,靠文本内容撑开盒子,同时,将中间的小图平铺作为盒子的背景。 8.2 CSS滑动门技术 8.2.2 工作原理 8.2.3 阶段案例 通过前面两个小节的学习,相信初学者已经对滑动门技术有了一定的认识。为了加深初学者对滑动门技术的理解,下面将应用滑动门技术制作一个梯形导航,其效果如下图所示。 梯形导航 8.2 CSS滑动门技术 8.3 Margin负值的应用 需求分析 制作网页时,为了拉开元素之间的距离,常常给元素设置大于0的外边距margin。其实,在实际工作中,为了实现一些特殊的效果,经常需要将元素的margin设置为负值,如下图所示的元素重叠效果。 元素的重叠效果 8.3.1 同级元素应用负margin 对同级元素应用负margin时,会出现元素重叠的特殊效果。其效果如下图所示: 如上图所示,两个盒子发生了重叠,由于对右边蓝色的盒子设置了负的左外边距,它相对于原来的位置向左移动,压住左边红色盒子的尖角部分。 8.3 Margin负值的应用 8.3.2 对子元素应用负margin 对于父子关系的盒子,当对子元素应用负margin时,子元素通常会压住父元素的一部分。其效果如下: 如上图所示,子元素压住父元素的左边框。这是因为对子元素设置负的左外边距时,它将向左移动。 8.3 Margin负值的应
文档评论(0)