less
css预编译工具
文件 .less
使用less书写css,把less编译成css文件 需要使用vscode的Easy LESS插件
1. 如何使用不可导出的less文件,如base.less,其中有如下注释:
// out:false 禁止导出
less文件导入 : less文件最上面
@import url(./base.less);
@import url(./normalize);
2. 修改less文件的编译目录:
vscode设置搜索less,找到easyLESS,修改"out": "../css/",后面的双引号中填路径。
官网有详细使用教程:less官网
字体图标
图标,但可以和字体一样用font-size调大小,用color调颜色。
选择想用的图标,加入购物车后,下载代码,解压后文件夹重命名为font放在css同级目录下:
先引用再使用:
<link rel="stylesheet" href="./font/iconfont.css">
使用方法:
- 打开demo_index.html文件,可以找到图标对应的代码:如

像这样:<span class="iconfont"></span>
- 也可以在iconfont.css中找到图标对应的类:如
icon-a-16-23_fuzhi-06
像这样:<span class="iconfont icon-a-16-23_fuzhi-06"></span>
对图标加样式可以在这个元素中在添加一个类:
<span class="iconfont test"></span>
<span class="iconfont icon-a-16-23_fuzhi-06 right"></span>
.right{
font-size: 40px;
color: #44f2f0;
}
.test {
font-size: 200px;
color: red;
}
精灵图
精灵图的诞生:
页面中每张图片的显示是先由浏览器发送请求,然后服务器接受请求,返回请求内容。如果一个页面有上百张图片,哪怕是很小的图标,都需要经历一次这样的过程。那么,毋庸置疑,肯定会由于请求数量的增加让整个页面的加载速度降低。
正应为如此,精灵图(sprite)应运而生,图片整合技术,将大量的小图标整合到一张图,从而减少服务器接收和发送请求的次数,提高页面的加载速度。
就是将多个小图拼在一个大图上面,将这个大图作为背景图片显示,调整到定位到需要使用的小图的位子。
background: url(./img/pwd-icons-new.png) -47px -94px;