css加精灵图

最新推荐文章于 2022-06-20 09:20:37 发布

哪吒大叔

最新推荐文章于 2022-06-20 09:20:37 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/qq_50304932/article/details/112651904

版权

css加精灵图

1.前言·基础知识

1-1. visual studio code软件

Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
1.Visual Studio Code 下载链接：https://code.visualstudio.com/

1.2Visual Studio Code 安装教程：
https://blog.csdn.net/weixin_37590454/article/details/89436577

1-2 Unicode

Unicode（又称统一码、万国码、单一码）是计算机科学领域里的一项业界标准，包括字符集、编码方案等。Unicode是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。1990年开始研发，1994年正式公布。

2.css加精灵图步骤

1.在浏览器中打开“阿里巴巴矢量图标库”。
2.搜索框中输入需要的图标：例如“相机”
3.将所选的图标加入购物车。
4.点击购物车
→下载代码
→将下载好的压缩包保存在对应的位置（修改并牢记位置）。
5.将压缩包解压
→将demo_index.html与infont.css文件复制到对应位置（修改并牢记位置）。
6.在程序中加入精灵图
6.1头部中用link引入iconfont.css文件。
（更改精灵图文件夹内容可调整精灵图大小font-size:100px;和颜色color:purple;）

<head>
    <link rel="stylesheet" href="iconfont.css">
    <style>
       .iconfont{
            font-size: 400px;
            color: purple;
        }
    </style>
</head>

6.2身体中用span标签加入精灵图。span标签中的具体内容在demo_index.html文件中找。


<body>
        <span class="iconfont">&#xe6b1</span>  
</body>

link标签：程序中引入 .css库

link标签格式：<link rel="stylesheet" href="地址+文件名">

地址+文件名：当前路径：./iconfont.css或iconfont.css
上一级路径：../iconfont.css

哪吒大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css加精灵图

ccs精灵图引用1.前言·基础知识1-1. visual studio code软件Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。1.Visual Studio Code 下载链接：https://code.visualstudio.com/1.2Visual Studio Code 安装教程：http
复制链接

扫一扫