移动开发基础-学习笔记二-字体图标、less、bootstrap入门
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.将图标编码包装在类名中，方便赋予样式
-
.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