一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就请求过来了 二.overflow 1.值hidden:超出就隐藏 2.值scrol:出现滚动条 visibility:hidden:可见的(消失但是占用位置) display:none:消失但不占用位置 三.title中的小图标 1.如何实现浏览器title中的…

background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求 ser href url 2.overflow (1) 值hidden 超出就隐藏 (2)值scroll 出现滚动条 visibility:hidden 可见的(消失但是占用位置) display:none 消失但不占用位置 为什么要使用雪碧图 因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就能请求过来,然后使用 background-position 调位置,从而减少了该页面想服务…

<title>标签中不能添加图片,但是可以添加小图标. 步骤: 1.做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透明背景的16 X 16像素PNG格式的小图标,再在AWiconsPro软件中导入这个PNG图标,再另存为ICO格式.注意:文件名一定要保存为favicon.ico. 2.把favicon.ico图标文件上传到你的网站根目录即可.下次浏览这个网站时网页的标题栏就会显示这个小图标.注意:如果没有显示,可能是浏览器缓存问题,此时按Ctrl+F…

webpack.prod.conf.js 这个文件中: 引入代码const path = require('path') :下面是进行配置: new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', favicon: path.resolve('./favicon.ico'), inject: true, }), webpack.prod.dev.js这个文件中: 引入代码:const path =…

一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪碧图,以及工作中的实际应用. 一 .为什么需要使用雪碧图 比方说现在经理要我们给页面添加一个侧边任务栏,效果如下:  呵呵,作为一名资(too)深(young)的前端,我刷刷刷为页面增加ul还有几个然后再给每个li添加背景图片,哈哈,任务就这么完成了,然后commit了一下自己的代码.此处应该要有代…

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

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

CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 静态图片,不随用户信息的变化而变化. 小图片,容量比较小(2~3k). 图片加载量比较大. 目的 减少Http请求数量,加速内容显示.因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的. 使用 使用雪碧图之前,我们需要知道雪碧图中各个图标的位置. 从上面的图片不难看出雪碧图中各个…

更多代码详情:github.crmeb.net/u/LXT 简介 由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不同分辨率.不用担心模糊和锯齿.同时还能更改图标的填充颜色. CSS雪碧图和SVG雪碧图 传统的CSS图标可以分为图片图标和字体图标. 图片图标是将所有的icon整合到一张图中,然后通过定位获取其中的某个图标.优点是管理简单,网络请求少.缺点是在高像素屏幕上图标和周边内容相比会显得比较模糊:大小固定:大多数样式无法修改,单个图标使用场景有限. 相对来说…

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