集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都前端学习路线移动开发基础-字体图标、less、bootstrap入门

发布者: 成都达内     浏览次数:     发布时间:2019-02-22 10:51:13

成都前端学习路线移动开发基础-字体图标、less、bootstrap入门讲解:1.字体图标;1.svg图片不失真;2.svg图标由设计师提供;3.为了减少网络请求,会把svg图标转换成字体图标,放到字体文...

  成都前端学习路线移动开发基础-字体图标、less、bootstrap入门

  1.字体图标

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

  1.svg图片不失真

  2.svg图标由设计师提供

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

  2.制作步骤

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

  2.下载代码

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

  成都前端学习路线移动开发基础-字体图标、less、bootstrap入门

  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文件:

  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.函数(系统函数)

  成都前端学习路线移动开发基础-字体图标、less、bootstrap入门

  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里面如果在动画时样式消失,则可能是类名被覆盖,或标签、样式名被动画修改

  成都前端学习路线移动开发基础-字体图标、less、bootstrap入门

  5.轮播图的图片

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

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

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

  XMind: ZEN - Trial Version

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56