网页设计与制作（HTML5+CSS3+JavaScript）（第2版）课件 第9章 CSS应用技巧

第9章CSS应用技巧《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》学习目标/Target掌握CSS精灵技术，能够归纳CSS精灵的概念和作用掌握CSS滑动门技术，能够描述滑动门的概念掌握margin设置负值技巧，能够说出margin值设置为负数的作用学习目标/Target掌握CSS精灵的应用，能够在网页制作中熟练使用CSS精灵定义背景图片掌握CSS滑动门技术，能够运用滑动门技术制作网站导航掌握margin负值的设置方法，能够使用margin负值设置压线效果章节概述/Summary通过前面几章的学习，我们已经掌握了CSS的基本原理和使用技巧，但是在实际制作网页的过程中，有时需要使用CSS的一些特殊的技巧，如使用margin负值制作压线效果、CSS精灵技术等。由于这些技术之间并不存在特定的关联，因此本章将分别对这些CSS应用技巧进行详细讲解。目录/Contents9.19.2CSS精灵技术CSS滑动门技术9.3margin设置负值技巧CSS精灵技术9.19.1.1认识CSS精灵什么是CSS精灵技术？9.1.1认识CSS精灵运用CSS精灵技术可以提高加载速度网页中的小图片大家随处可见上网导航信息查询网上预订9.1.1认识CSS精灵CSS精灵（也称CSSSprites），是一种处理网页背景图像的方式。在网页设计中，CSS精灵会将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。9.1.1认识CSS精灵当用户访问一个网站时，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。9.1.1认识CSS精灵CSS精灵技术的工作原理只需发送一次请求将页面内所有零星图像制作成一张精灵图使用CSS定位属性9.1.2应用CSS精灵如何制作一个简单的精灵图然后，通过使用CSS的background-position属性进行背景的精确定位注意控制图片的坐标位置CSS滑动门技术9.29.2.1认识滑动门什么是CSS滑动门技术？9.2.1认识滑动门CSS滑动门技术究竟是什么？上网时，网页元素中特殊形状的背景随处可见按钮查询网站导航留言簿9.2.1认识滑动门如果为列表项“技术联盟”设置一个圆角背景，可以对其所在的<li>标签应用一个大圆角背景。但是，如果以后增加或减少列表项中的文字，就需要重新对<li>定义背景图像，以适应文本内容的多少。9.2.1认识滑动门为了使各种特殊形状的背景能够自适应元素中的文本内容，可以用CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。9.2.1认识滑动门CSS滑动门技术的切图方法？9.2.1认识滑动门滑动门技术需要将一个不规则的大图切为几个小图（通常为3个），然后将每一个小图用一个单独的HTML标签来定义，最后将这几个小图拼接在一起，组成一个完整的背景。CSS滑动门技术原理：9.2.2使用滑动门制作导航条margin设置负值技巧9.39.3margin设置负值技巧为什么应用margin负值？9.3margin设置负值技巧制作网页时，为了拉开元素之间的距离，常常给元素设置大于0的外边距margin。其实，在实际工作中，为了实现一些特殊的效果，如上图所示的元素重叠效果，经常需要将元素的margin设置为负