web移动开发总结(二)

总结今天学习的内容:

1. 字体图标生成和原理和使用
2. CSS预处理器概念特性
3. less预处理器的编译和语法
4. 使用less修改微金所头部和导航条样式
5. 轮播图响应式切换
6. 特色介绍立即预约布局

一. 字体图标

字体图标使用都是svg图片(上百度下载,如下载网站:http://www.sfont.cn/)

a.字体图标的生成方法

1. 使用阿里官方提供图标 添加到购物车下载代码
2. 让设计师设计这种图标（必须svg(矢量图放大缩小不会失真)）
3. 把设计师给你 图标文件 上传到阿里图标库里面
4. 在把你上传的图标加入购物车下载代码
5. 把下载的代码复制到项目里面引入来使用

b.图标的组成部分和原理

组成部分:由字体文件 + 字体名称 + 图标编码组成
1. 字体文件 eot svg ttf woff
  字体文件有4个
  1. eot 兼容IE
  2. woff 标准的文件
  3. ttf 兼容谷歌火狐等
  4. svg 兼容低版本的ios浏览器
2. 字体名称： 字体图标的字体名称 需要自定义和使用
  1. 定义字体
      /* @font-face CSS3里面新增的属性 web字体 使用CSS定义一个字体  
      指定你要定义的字体名称  和 字体文件的路径 */
      @font-face {
          font-family: 'itcast';
          src: url('iconfont.eot?t=1543800973803') format('embedded-opentype'), 
          url('iconfont.ttf') format('truetype'), 
          url('iconfont.svg?t=1543800973803#iconfont') format('svg'); /* iOS 4.1- */
      }
  	2. 使用字体
      /*使用一个字体*/
      .iconfont {
        /*使用iconfont字体*/
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
3. 图标编码: content: "\e602";  这种unicode编码 这个编码是网站给你生成的不需要记住
  1. 直接使用编码
      div::before {
          /*1. 使用字体名称*/
          /*font-family: 'iconfont';*/
          /*2. 使用图标的编码*/
          content: "\e62b";
      }
  2. 把编码封装到类名里面
      /*为了方便使用和记忆把编码定义在一个类名里面 使用的时候使用类名即可*/
      .laoren::before {
          content: "\e62b";
      }
  3. 生成的代码里面 帮你封装好的
      /*使用图标的编码*/
      .icon-icon-test:before { content: "\e602"; }

c.字体图标的使用方式

  1. 引入字体图标的CSS文件
  2. 使用对应的图标的类名即可 

二.CSS预处理器

1. 什么是CSS预处理器?

 它是让CSS变的更加丰富 强大 提前写好一些高级的CSS通过特定编译方式再转成CSS让浏览器识别
,写代码只需要写高级的CSS 和 维护高级的CSS 主要就是提升开发和维护效果

a. 常见的CSS预处理器

1. less  less最简单 最热门   
2. sass
3. stylus
3种语言 的特点都类似 学会一种即可

b. less 官网http://lesscss.org

1. 是一个CSS预处理器 能够完全兼容CSS 并且扩展了CSS
2. 语法简洁和CSS类似 上手快
3. less.js 一个官方的编译器文件 (less代码不能被浏览器识别 还是需要转成CSS) 需要一个编译工具 把写完的less代码  编译成CSS 代码
4. 语言特性
  1. 定义变量
  2. Mixins混入 (自定义函数)
  3. 嵌套(跟标签一样的嵌套 外面容器不需要重复写)
  4. 操作(运算符 + - * /)
  5. 转码  把一些CSS代码当成字符串转码到里面
  6. 函数(系统 less官方提供的函数) 数学 字符串 颜色 等等很多自定义函数

c. less是编译和使用

1. 使用Node.js 命令去编译

2. 使用less.js浏览器阶段的编译方式

3. 页面像引入CSS 一样去引入less

4. vscode less编译插件 easy less 安装后重启 写了less代码 保存的时候自动生成对应的css文件
   demo.less > demo.css 修改了代码不断编译和刷新(只需要引入编译好的CSS即可)

5. less.js编译less的原理和过程

   1. 请求 读取 less文件成功 （要发送文件请求 使用ajax发送文件的请求）
   2. 把less文件的代码转成CSS
   3. 把CSS嵌入到页面的style标签里面