文案基础六天.pptxVIP

css基础第六天css可见性overflow:hidden;display:none;visibility:hidden;单词作用overflow：hidden;隐藏超出的那部分display：none;不显示元素visibility:hidden;不显示元素特点总结：1：display:none元素隐藏不占位置2：overflow:hidden;将超出部分的元素隐藏3：visibility:hidden;元素隐藏占位置简单tab导航栏的制作css之内容移除（网页优化）常用于logo优化1.利用text-index:-2000em;2.利用padding挤开盒子并且overflow切割使用text-indent移除文字使用padding撑开盒子，overflow：hidden移除内容精灵图的由来1：上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。2：然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSSSprites）。简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。工作原理CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。精灵图初体验1：使用一张精图，在网页上显示出相关背景小图片2：精灵图用法总结：1：精灵图只能用打开的方式，不能使用导入得方式打开2：使用精灵图的时候注意坐标位置的正负取值精灵图小案例，快快练习一下吧！css滑动门css滑动门技术制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，如下图所示，即为设置了圆角背景的导航。如果使用传统的CSS思想，要想为列表项“技术联盟”设置上图所示的圆角背景，可以对其所在的li标记应用大圆角背景。这种方式固然可以实现圆角背景的效果，但是，如果以后增加或减少列表项中的文字，就需要重新对li定义背景图像，以适应文本内容的多少。简单滑动门案例略微小复杂的滑动门案例滑动门作业