第8章-CSS高级技巧.ppt

让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负值的应