移动开发基础-学习笔记二-字体图标、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

上一篇:PLSQL_性能优化系列10_Oracle Array数据组优化


下一篇:2.ES6引进的新特性——类Class