TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷

2020/12/31

TDK优化
标题logo优化
模块化开发思想结构拆分
阿里巴巴矢量图库 https://www.iconfont.cn/
- 选择图标是ui做的
- 引入方式推荐font class方式（点击官网“使用帮助” 有如何引入字体图标的教程）
  - 方法一：
    第一步：拷贝项目下面生成的font-face
    @font-face {font-family: ‘iconfont’;
    src: url(‘iconfont.eot’);
    src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘iconfont.woff’) format(‘woff’),
    url(‘iconfont.ttf’) format(‘truetype’),
    url(‘iconfont.svg#iconfont’) format(‘svg’);
    }
    第二步：定义使用iconfont的样式
    .iconfont{
    font-family:“iconfont” !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
    第三步：挑选相应图标并获取字体编码，应用于页面
    3
  - 方法二：
    第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

         第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

- 方法三在线引入：在官网生成代码 使用引入链接的方式

使用在线引入方式小缺点：不是存在本地会有风险。
- 开发过程中使用在线引入，上线前下载到本地。

tip:

css文件引入顺序：

1.base.css 清除默认样式

2.引入第三方的类库的css文件

3.common.css公共样式

4.页面自己的样式
涉及到用户敏感信息的页面是不需要seo优化的
触发外边距塌陷问题解决方法：

第一种元素加属性float：left; 浮动脱标的元素是不会触发外边距塌陷的

第二种父元素设置overflow:hidden;

第三种父元素设置padding;(使用了怪异盒模型不用再改宽高)

TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷相关推荐

项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目,下载到本地. 将下列几个文件添加到项目在main.js中引入 import '../src/assets/scss/iconfont/iconfont.css';
微信开发工具及Hbuilder中引用阿里巴巴矢量库（步骤一样）
第一步:创建一个阿里巴巴矢量库项目,将图标加入项目中,并生成一个在线的css文件第二步:在微信开发者工具中新建一个.wxss文件,把第一步中的复制好的代码粘贴到这个文件中,如果将来有新的图标放置项目 ...
全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用阿里巴巴矢量库使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
阿里巴巴矢量库IconFont__使用小录
使用阿里巴巴矢量库方法虽然不难,但本人记性不好,遂在次记录几笔阿里巴巴矢量库地址:http://www.iconfont.cn/plus 阿里巴巴矢量库图标好处: 1:图标矢量化 2:自己总结:ic ...
uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...
阿里巴巴矢量库的用法
阿里巴巴矢量库的用法: 1.将选中的图标下载到本地然后把文件解压 , 里边的文件放在自己项目的font文件夹下 2.Unicode 使用步骤如下: 第一步:拷贝项目下面生成的 @font-face ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
自动组卷系统C语言,模块化思想在试题库组卷系统中的应用--以C语言程序设计课程为例 (1).pdf...
2014年6月伊犁师范学院学报 (自然科学版) Jun．2014 第 8卷第 2期 JournalofYiliNormalUniversity(NaturalScienceEdition) V0| ...

TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷

TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷相关推荐

最新文章

热门文章

TDK优化 模块化思想 阿里巴巴矢量库 css文件引入顺序 外边距塌陷

TDK优化 模块化思想 阿里巴巴矢量库 css文件引入顺序 外边距塌陷相关推荐

最新文章

热门文章

TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷

TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷相关推荐