移动开发基础-学习笔记二-字体图标、less、bootstrap入门

1.字体图标

1.字体图标都是用svg图片

• 1.svg图片不失真

• 2.svg图标由设计师提供

• 3.为了减少网络请求，会把svg图标转换成字体图标，放到字体文件中，通过字体库的方式使用

2.制作步骤

• 1.上传字体图标到在线制作网站：阿里图标库或iconmoon

• 2.下载代码

• 3.注意点：在上传之前要把图标的名字改好，不然类名会带有后缀

3.原理

• 1.css3语法引入字体：@font-face

• @font-face {

• font-family: "自定义字体名";

• src : url() format(),

• url() format()

• }

  • 1.自定义字体名：后面需要使用该字体名

  • 2.引入多个url：兼容各种浏览器

  • 3.format：声明资源格式，方便浏览器识别

• 2.将字体用类包装在类名中 ，方便赋予样式

  • 1..icon { font-family: "自定义字体名" }

  • 2.高级方法： [class^="icon-"],[class*=" icon-"]{ font-family: "自定义字体名" }

• 3.将图标编码包装在类名中，方便赋予样式

  • 1. .icon-名字 ｛ content: "unicode转码" ｝

  • 2.html转码在下载的文件中就有

2.预处理器

1.作用：让css变得更加简洁和强大

2.原理：预先写好一些高级的css，通过特定编译方式再转成css让浏览器识别

3.常见的预处理器

• 1.less：目前最流行

  • 1.引入less

    • 1.引入less文件：<link type="stylesheet/less" src>

    • 2.引入less编译文件：less.js

      • 用于编译less文件，应该就是获取上面的less文件，然后通过正则表达式将less文件转换成css代码，放在head里面，作为内嵌式。所以需要放在less文件后面

• 2.sass

• 3.stylus

• 4.相似，只要学会一种，其他的就都会了

3.less

1.特点

• 1.完全兼容css，并且扩展了css

• 2.语法简洁，与css类似，容易上手

• 3.使用less.js编译

2.语法

• 1.变量

• 2.mixins混入（自定义函数）

• 3.嵌套（跟标签一样嵌套，外面容器不需要重复写）

• 4.操作（运算符+-*/）

• 5.转码（把一些css代码当成字符串转码到里面）

• 6.函数（系统函数）

3.具体使用

• 1.编译

  • 1.使用node.js编译（暂时不学）

  • 2.引入文件进行编译

    • 1.引入cdn托管的静态资源

    • 2.引入自己的less.js

    • 3.需要使用服务器打开

  • 3.vscode有编译插件

  • 4.开发中，使用less.js；上线用编译完之后css文件

    • 用less.js会在html页面上报错

• 2.变量

  • 1.定义变量

    • 1.@变量名：变量值

    • 2.命名规范和js差不多，只用一个差别：中间可以有横杠

  • 2.使用变量：@变量名

• 3.嵌套

  • 1.嵌套的选择器是css中的选择器，一般情况下，嵌套中的一级括号相当于css中的空格

  • 2.嵌套中的&表示上一层的选择器，与js中this作用相同。一般用在伪类，伪元素，交集选择器中

• 4.运算符

• 5.引入其他less文件：@import 路径

• 在哪里写这句代码，目标文件的内容就引入到那里。

• 一般在最前面引入

• 6.使用细节

  • 1.在一个选择器a中写另一个选择器b，可以将选择器b中的代码带入这个位置

  • 2.通常把变量和自定义函数分别封装在特定的文件中

    • 1.变量：variables.less

    • 2.函数：mixins.less

  • 3.

• 7.less.js工作原理

  • 1.通过rel请求less文件

    • 需要服务器

  • 2.通过js中的正则表达式将less转换成css文件

  • 3.将css代码动态添加到style标签中

• 8.编译

  • 1.开发环境中使用less.js，因为这样在less中有错误时，html页面胡报错

  • 2.在生产环境中使用已编译好的css文件

4.选择器

1.下一个兄弟选择器：+。选中下一个符合条件的兄弟元素

.box1 + .box2 选中.box1下一个且类名为.box2元素

2.后面兄弟选择器：~。选中后面所有符合条件的兄弟元素

.box1 ~ .box2：选中.box1后面所有类名为.box2的兄弟元素

3.一般用于排除第一个兄弟元素

1.补充知识

1.以后开发中大部分都是用border-box

2.栅格系统中的所有元素都加了相对定位

3.不推荐给父元素加高度，用子元素撑开

4.bootstrap里面如果在动画时样式消失，则可能是类名被覆盖，或标签、样式名被动画修改

5.轮播图的图片

• 1.大中小屏幕使用大图片，且宽高不应该随屏幕宽度的变化而变化，因为这样会让图片难以看清。这时候的图片应该作为背景，背景居中，然后轮播图高给定，宽度自适应。

• 2.宽度自适应，超小屏幕使用小图片，并且宽高自使用就行了，因为小屏幕的宽高变化不大

6.对一整个句子如果会换行，则应该使用padding让文字居中。如果一整个句子不会换行，就使用行高居中

XMind: ZEN - Trial Version