3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hidden:   将超出部分隐藏(部分隐藏) display:   none;   元素隐藏(全部隐藏)(隐藏元素不占位置) display:   block;   显示元素 visibility: hidden:  隐藏元素(全部隐藏)(隐藏元素占位置) 然后就是关于滑动门的讲解,现在的页面中好多地…

有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一步:去淘宝镜像地址(http://npm.taobao.org/)里安装cnpm. $ npm install -g cnpm --registry=https://registry.npm.taobao.org 由于npm安装插件是从国外服务器下载,受网络影响很大,所以我们可以选装淘宝的cnpm…

在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带宽和资源. 雪碧图插件一般还支持快速引用小图标,例如当我们需要在html中放入service.png这张图片时,我们只需要使用<i class="icon icon-service"></i>这样的简单引入方式,省去了繁琐的引入图片的样式编写,大大提升效率. 在Vu…

什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中,这样一来,当访问页面时,就只需要下载1张图片了,这显然大大减低了服务器请求压力. 这个技术加速网页响应速度,加速的关键,不是降低质量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.…

一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描述了每一个文字的形态,一般中文文件大,英文文件小,因为中文字符数多:在控制面板中可以找到文字文件夹,在C:\Windows\Fonts下也可以直接找到.另外如果想让自己的电脑上有更加丰富的字体,可以下载新的字体文件后复制到改位置. b).我们在文档中显示的字体应该在系统中能找到才会正常显示,比如你在…

CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position"来实现背景图片的定位技术. 二.图片整合的优势: 1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度. 2)通过整合图片来减小图片的体积.   2.CSS Sprites的实现方法 3.图片整合原则 1)边切图边整合. 2)定位时避免使用bottom,right等,用具体的数值,…

CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置.   CSS 雪碧图技术不是什么新东西,在网页应用中已经有几年了,现在的网页开发在图标图片的应用上已经趋向于使用字体图标,这是一种比CSS雪碧图技术更优雅的图标应…

V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视…

在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更优的解决方案是:雪碧图sprite. 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image.background-positon属性完成图片的定位. 为此,我做了个Demo. 在学习的过程中,遇到了背景图片定位的问题,也就是b…

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的.…