移动开发基础-学习笔记二-字体图标、less、boots…
2019-02-17 01:48:58来源:博客园 阅读 ()
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
原文链接:https://www.cnblogs.com/NikoChen/p/10388030.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash