首页 / 知识

Vue从入门到精通第一阶段介绍

2023-04-11 13:45:00

　　H5新特性是必须要掌握的。如果你不需要自己绘图，则canvas等知识点了解即可。要做移动端，浏览器对css3几乎不存在兼容问题，各种流畅的动画效果会为手机端加分不少。移动端常用到的知识点包括：

　　盒子模型：box-sizing样式；

　　css选择器：属性选择器；

　　css布局定位：flex

　　css动画、过渡：transform、animation

　　ES5：我并没有去详细的学习ES5的新特性，因为在实际工作中，经常会用到ES5的相关特性但并没有意识到这是ES3还是ES5的范畴。所以，我的建议是，遇到没见过的js语法，可百度现查现学之。有几个新特性还是比较常用的，如下：

　　响应式布局，概括来说就是页面中元素的布局、尺寸会随着浏览器窗口的大小而改变。html和css3提供了许多支持响应式布局的特性，上文中说到的flex布局、box-sizing盒子模型都是其中之一，但这还远远不够。

　　推荐教程《网页设计视频教程-响应式手机网站》，

　　提取码： 5g1c

　　提取码：q2mh

　　Bootstrap可以理解为是一套响应式布局的css库，默认只引用一个css文件即可。当然如果你需要用到它的一些控件样式，还需要引用一个js文件。教程的话，Bootstrap中文网中写的很详细了，这里不再赘述。其教程中也包含sass/less相关的内容，用不到的可以不看。

　　我咨询过很多做前端的朋友，做布局时，如果你有扎实的css布局基础，布局还是自己写的比较好。用第三方的难免会增加根据项目进行定制的苦恼。

　　如果你的网站图标几乎都是扁平化的单色图标，则字体图标或许是更好的选择。有以下几个有点：

　　@font-face {font-family: "iconfont";

　　src: url（'iconfont.eot?t=1483761608434'）;

　　src: url（'iconfont.eot?t=1483761608434#iefix'） format（'embedded-opentype'），

　　url（'iconfont.woff?t=1483761608434'） format（'woff'），

　　url（'iconfont.ttf?t=1483761608434'） format（'truetype'），

　　url（'iconfont.svg?t=1483761608434#iconfont'） format（'svg'）;

　　}

　　不用担心太多，阿里iconfont商店的式的将需要的图标添加到购物车，之后一键导出后的压缩包里有这四个文件和示例代码。

　　注：

　　字体图标的编码使用NCR编码的16进制。如下：

　　。icon-ditu:before { content: “\e601”; }

　　有时，我们需要写成：“”。

　　你不需要了解NCR编码，网上相关资料也较少，只需知道在你的字体文件中，每一个（字符）图标都由一个唯一的NCR16进制码表示。

　　ES5：

　　ECMAScript5.1中文版，该规范涵盖了所有ES5的特性，而非单列出了新特性，可作为规范参考书用。