00:00
好了,我们开始啊,开始一块愉快的装逼,来看一下整理啊,我们来说讲一个框架了吧,啊,这个框架啊,你会发现讲UI框架极其的爽,你们之前是不是写过原生轮播图啊,写炸了吧,是不是是不是自己一行行写的OK啊,我给你看一下啊。不需里面去写轮播图,应该怎么玩,UI框架有很多种,好多好多UI框架啊,UI框架的用法,今天我讲完了,你们就知道应该怎么去用啊,啊就用UI框架的时候,你不要管别人的视线。啊,除非在学习的时候可能稍微去关注一下,用的时候提高效率,直接给我肯就要这个标变,能理解吗?来看一下轮播图是不是不不不什么不是需要法什么中文网啊,OK,那不需要吧,里面是不是也有个教程啊,OK,那这是一套比较好的教程,因为整站的不CSS相关的东西都是用写的,懂吗?OK,那他现在稳定的版本在三啊三的一个中文文档。
01:06
好,中文文档的时候打卡啊,他说它里面先给我推荐了嘛,预处理器一个框架,多种设备特性齐全包,这是不是专门的一个特点啊,它有两个版本的,一个是版本的,一个是S版本的啊,我们看他版本的东西啊,这是他get up的一个主页,大家可以去看一下啊,这些有这些使用get去啊这些是什么,不是help去构建的网站,OK,那我们要看什么?起步全局样式组件,假va的插件定制网站实例吧,网站实例名大家可以看一下。带过来看吧,OK,那看一下Java什么插件。很好。这网怎么慢成这样?啊,假如插件这一块,他其实有好多好用的插件,OK,好,这里有点慢。
02:02
中文网不应该这么慢啊,我们可以来看一下吧,这边你看刷一下,这底下是不需相关的优质项目的推荐吗?你看有什么,有不是是不是他自己啊,Tapscript的是不是还有什么。还有PA jary啊,这个就不要看了啊,Node是不是雅ma NP view pencil啊,Roadddesh gate啊,Roll up b啊,Front handbus ste。ES,看见没有,这些都是前端的东西,看见没有?想不想找啊,不可能全部学完的,学不完的很多很多东西处理的都是什么一样的啊,比如说我们这边,你看里面是不是有大,是不是有PA啊,你看还有这个吗?Pencil up是不是还有这个,刚刚讲的这五样东西干的是同一件事情。
03:11
都叫打包工具是不是啊,只不过他们的用法不一样,特性不一样,优点缺点不一样而已啊,前端就是这么复杂,为什么?因为你们身在了前端这个工程化,也不是说工程化就是前端刚刚启示的这个阶段,懂不懂这现在是前端的社区,其实没有其他语言上么成熟啊,所以说很多东西都干嘛,他们在互相的。竞争的最终会有一个东西完全覆盖掉,其他的就是哎,我这个东西最好,设计的最好,我的这个生态最全,就是我的就是用户更多啊,最终他就会干嘛,就会一统天下,懂不懂,可是你们现在是在相当于在一个前端的三国时期,能不解啊,就是啊,就是就是就是那个群雄都在干嘛,就是咱们都在一起,在争这个市场份额的时候呢,像我们框架,你看安格拉还有好多好多跟安格拉一样的框架,只不过是被他们三个干掉而已。
04:12
现在就剩下三个了啊,这三足鼎立的一个时代是不是?OK,那在国内啊,发现这个view干嘛,这个异军突起啊,这个rap安格拉哈,弄不过view了是不是?可是你在印度你会发现啊,印度的印印度的it是极其厉害的啊,印度都叫阿三玛,是不是他们的编码能力极强啊,在印度安格拉特别火啊,在欧洲瑞克特别火啊,在国内只有GC火啊,所以说现在就是。你们你们自己得选择,得选自己的基础站懂不懂,那我们建议的基础战是react加view啊,所以说我们会把react view加的特别的深啊,安的话可能我们不会涉涉及到太多啊,因为整个安格尔技术的学习的话太陡峭了,要你们去学好多其其他的语言太了啊,这样的话,整个学习的一个量的话就太大了啊,所以说我们还是以圆一个view为主,能不能理解啊,OK,那我们来看一下,你看这边是不是夹S插件啊,我们刚说要写个轮播图吧,你看Co和就是什么轮波图的意思么?写轮波怎么写,你看这这是不是个轮播图,写轮波图可以做C。
05:24
看见没有CLCL,你把不的环境打起来,LCL进去就出来。啊,下午我们会去做啊,真的是贼简单啊,OK,这里。好,那这是一些不需要的优质啊网站啊,你们可以来看一下,这些网站肯定都是想应试的,什么叫想应试,大家来看一下网,这里来看一下。看啊,这个动画会不会转不会请你出门左转,OK,来看一下这你这个是不是渐进式的一个什么东西啊,来看一下F12进来。
06:04
啊,跑到移动端整个布局是不是就变了是吧?啊比如说这样,你看随着它慢慢变小的话,这个布局你看肯定没有被我破坏掉。是不是,你看样式是不是发生变化了,你看这个按钮面部按钮一开始是不是在下面的,随着你这个宽度越来越宽的话,跑到这边来了,是不是这就叫小意思,你看明显是不是要素上面有个很大区别。是不是就是不同的分辨率底下,或者不同的设备上,哎,我一套代码可以干嘛跑多个终端,这就叫详形式等等,核心是。媒体查询OK,来看一下,好,那我们说怎么去用不需要的啊,首先你上来这边是不是中文网,打开中文网这个下面应该有一个下载按钮的,来看下载按钮在哪。呃,你呃哪OK,点击你上这个中文的吧,下载婚刷爸爸,我这边我给你们已经下过了啊,我我已经下过一个了,OK,我们来看一下,写一个不同。
07:09
02BOT啊,不算宝宝。ST1POK来看一下这个抓,不是里面的话,我看我这个文档,我我直接先对这个抓,我们先写DEMO啊,OK,待会再来讲他的源码,OK,那DEMO这一块我先把它的源码在哪边看。我记得我有一份呢。好,我去拿一下。好,就是它啊,这两份它的源码CTRLC啊,直接拎过来给大家好,我放到这个代里啊,我放到外面来吧。好,切过来的东西好多是吧,OK。好,OK,那一个叫diss的版本,一个不没有不带diss的版,带diss的是编译完的,你看里面这个CS都会经过压缩的啊,那不带第四呢,就是它的一个原码版本啊,它是这样的,看下都是有一个很好的目录结构的,OK,这里那这些目录结构暂时不给大家去分析啊,因为这里面东西大家都没学过的,什么pas跟NP有关的啊,波啊,Comp啊这个东西啊,不是配置文件啊啊这些都是跟一些什么打包工具有关的,暂时我们先不讲。
08:33
OK,那我们来看好,那怎么去用不算法,是不是啊,OK来看一下,现在我这边是不是有个代码,OK,用不算法,首先你得有几样东西,第一个。不需要把所写的所有的样式,你是不是得得拿到它,所以说你应该有个什么。呃,这样吧,我直接不用SC了。你这边应该有个C的文件。是吧,这个CS文件里面放什么放不是要去给你定那些钥匙,整个给他干嘛。
09:06
扣过来能讲OK,大家看,这里面还有个字体包。字体包用来干嘛的,小小图标字体是不是OK,那个字体也得干嘛英过来,他看里面是不是我写的一个不JS,一个什么块JS啊好OK不,里面的一些JS都是要基于这块,因为它都是用这块的语法去写的,那么讲,所以说你必须要一个什么。减S这个能不能理解啊,OK,那我们来看一下怎么办好,比如说现在我写一个什么。H秒是不是零一,我们说什么?与与不是up的初次邂逅,OK?Str。A与的数次小是不是套路,可被你们猜出来了。
10:07
好,那这里面应该干嘛?首先你得立刻进来什么。CSS底下的什么不是他们点面点点接S吧,这是不是他们给我们提供的样式,也就是说以后我们画界面样式他都已经帮我们写好了,懂吗?OK还算什么?GS是不是OK?OK,什么RC是吧,首先应该拿谁?J底下是什么这块啊,因为我不知是基于这块的是吧,然后拿水不是的点明天点这是吧,OK,然后我们来介绍一下,我们来看一下,其实你这么写完的话,应该有些默认要匙。APP大家看。你上来,你看玻璃身上是不是有很多模拟样式的,是不是只有你吗?你看我是不是只引了两个东两个东西了,这个是什么?这个是我的插件啊,懂吗?好,把这个插件关了啊,可能有时候插件会影响到我们代码的。
11:17
OK,我再刷一下,你看是不是就比较干净了,能不能讲OK2个加码,你看这里面是不是有好多好多的虫子啊,你看上来干有很多事情。不管什么东西,为什么你看。看见没有新book,因为books,可是很明显这个心是没有,没有办法匹配到。五元素的它是不是又加了一条,所有的阿尔跟元素sin也都是不吧,也就说不上来,已经把所有的合物性全部变成变成了。的,这是第一点吧,需要大家去注意的,懂吗?OK,那这个要是从是用的谁的呢?来看下。
12:01
我这是不是有个全局样式来看一下。normal.css为了增强跨浏览器表现的一致性,我们使用了normal less.css这是由他们俩去维护的一个CSS样式重置的库,懂吗?好,你可以去get他上面去啊。收他肯信给他们。好CTRLB说一下,我们来点CSS,你看是不是它点在来,你看29.5K吧,是不是买多了啊,其实应该还有一个叫做SCSS看一下re。E是不是这吗?点CS看见没有。D re,啊re,就3DSS,你看是不是有的不对劲?Most stone。
13:02
有没有?嗯,1.1K。不是这个了,那可能找错了。那怎么办?3W点是吗?点我记得你们看过是吧,当时没有打开来是吧?啊估计这回也C点。啊,这里面其实也是一段时间的重置的代码是吧,感觉它永远打不开了。就是他了。CSS下头,我的天,尴尬。css.com吗?不是点css.com,我的天呐,尴尬,来看看能不能出来啊,这是我们一款啊,刚刚我们看的什么no吧,是不是这是一款CSS下他的代码啊,这是另外一款CSS,就下他的代码啊,OK啊,等他提起来吧,先让他在这边跑吧。
14:04
OK。好,这个是莱什么是吧,你们可以打开来去看一下它的什么啊啊,或者去看一下它什么他啊他就什么版本意思嘛,是吧,你可以你们可以在这边全全部都看到是吧?是比如说这边有很多的什么贡献者啊啊这个什么呃,相关的一些。呃,比较重要的一个版本的一个日志啊,还有什么哎嘛,对大家的一个什么问题的一个讨论啊,全部在这边啊,这是社区啊,大家好的来玩一玩,看一看啊,你看这边也也是什么CSS比什么好,那他写过两本书,他也比较好啊,他谈CSS卷一,他谈CSS卷二。啊,就是这个人写的啊,OK,他也一套,他也有一套,他也有一套下载CS3的代码啊,下载有九万多啊,也蛮多了,就是雅虎的一套啊,你看这边是不是有论文是吧,那么算的才8000多万是吧,所以说这一套应该是比较好的一套啊,你们可以在这边去去拿,可能要输入一个邮箱,最终他会把代码发到你的邮箱里面去了,能理解,OK,那这些都是社区里面给我们提供的现成的东西啊,站在巨人的键盘上,就他在3S3是不要自己去写啊,OK。
15:18
好OK,我们知道这一款在你面是不是帮我做塞呀,好,那这就是我们去搭一个不粉吗?最对啊,简单的一个。框架就是这么去用的,能不理解,OK,那我们来看,那我们来说一下RL里面第一个概念,CTRLCCTRLV02。勇气。好一个叫流体容器,什么叫流体容器?好来看一下不刷里面啊,在不刷里面的话,我们可以来个div啊,Div给一个class,这个class其实干嘛要在它这里面注册过的,对不懂,有一个class叫做contain ID好看它是个什么鬼,比如说干嘛我们来个test走你好比如说。
16:09
这你来看一下F12,这你们来看这个。来,你看这个是不是我们ID啊,你看它是什么,Penny是不是两边有pen是不是right干嘛左右。居中的吗?是不是他有说Y吗?没有说Y,这叫流体容器,什么叫流流体容器?比如说我给他一个背景,大家可以看。死掉,好找到这个。CTRL c.floor ID好这一好,比如说你给他来个背景background way PI,所以你来看一下是下好有没有看到什么叫流体啊,就是一个弹性布局,其实就相当于外资为百分百。这个能不能理解?OK,好,这叫流体布局,应该简单。
17:01
懂吗?好,就相当于外形为百分百啊,OK,这里,那我们再来看还有什么工具。好,我打开另外一个浏览器吧。好,来看一下,OK,一个叫流体容器,好,再来看这个叫固体容器,CTRLCCTRLV03。固定容器好,那固定容器把这个弧度ID给它断掉。就叫固定容器。看一下它在哪只,你你看是不是在哪,好默认我们来看一下,它是一个流体吗?不是它没有在买这个屏幕啊,不叫流体,我们22进来看一下交易。好,首先来看选中它,来看它的样式有没有看到。换了。看到了CSS媒体查询吗?是不是OK,它里面有几个值啊。
18:01
是再次看到三个字啊,Mini为768 mini992 mini为1200,是不是OK,那这边帮你们写点东西。不是啊。还是一瓶。好,首先上来,大家得知道容器。好容器里面我们说它分几种,第一个流体容器。是不是第二个什么固定容器,OK,这个流体容器啊,这个固定容器它有预值。OK,这个阈值大家看哪三个7689921200啊1200,还有什么992195的768 OK,我们来看一下,当你的阈值为1200的时候,你的宽度有多少。定死的吧,17708,当你这个界面越来越小的时候呢。
19:02
OK,我们说你大于什么?这是不是大于等于1200时候,也就是说当你干嘛大于等于1200时,我们说容器的大小为多少1170是不是OK,当这个阈值大于等于1200时个你的整个。Y为多是不是好走?你1170是不是OK?这个代表什么?是不是你看,比如说我稍微小,稍微小一点,你看现在是不是幺三多少啊,1282吧,再往下走,再往下走。OK,我们说干嘛小于,你看小于992的时候。诶不对,你看到992的时候,你看992~1200这个区,这个区间这个宽度有多少。9708是不是相当于什么第于值吗?大于等于多少九九,然后呢,小于等于什么1200。
20:16
应该是小于1200吧,是不是OK,大于等于就是小于120的时候,这个值位大。九九多少九零。Z。好,那还有一个呢,多少。再往走嘛,肯定是小于多少小于992吧,是不大于等于多少七八的时候是七零。是不是,你看这个时候是干嘛,正好是。就量。是不是你看是不是正正好当中的宽度是750。能不能理解好也就什么。我们说小于等于多少?
21:02
不,这边应该是大于等于吧,大于等于多少768。小于九二的时候,整个外道。一个是970,这个是多少?750。这个我们是不是直观,我们看到的是不是OK,那还有没有阈值啊。我问你最面积嘛,那我小于768的时候,是不是又是另外一个状态了,你看小于768的时候是什么?什么都没有吗?相当于为什么?外形,应该会呕吐吧?是不是啊,OKY为o two也是什么?我们的外的默认值为多少?你们看到麦什么为凹凸吧,是不凹凸的时候,你给这个盒子加拍是往里扣的。理解一下。
22:01
你看外是不是凹凸啊,也就是说你外是跟凹凸跟外百分百一样吗。不一样的,外凹凸的时候,你家你家的话是往里扣掉的。懂吗?好,外为百分百的时候,你家的话是在两边给你加上去的,完全两个概念,懂懂你要区分开来,我每次说外为百分百的到底代表什么意思啊?能不能理解我的意思啊,你来看一下嘛,我们说一开始我们刚刚讲了一个什么容器啊。流体容器吧,流体容器上来,我说他的外是不是百分百,我说的是一个。啥意思啊,大家来看,你看他的外有为本吗?没有他的外,为什么?吐啊,讲OK,你看。看他的和不行。你看在这边这叫内容区是干嘛?是抠掉的。懂不懂,如果你的外是百分百的话,是这样的,这是一个外为百分百吧,然后你在两边要加什么排的,最终你会干嘛变成这样,变成这样子上面是pen。
23:11
然后什么。Y啊。是不是到这边,然后后面再来个什么。因为Y思维凹凸跟Y维百分百是有区别的,能理解吗?啊,这种在学基础的时候就应该知道啊,所以说我没有去给你们强调,OK,来看一下,好,我们知道我们现在学的两个容器,一个叫什么容器,不的流体容器外为凹凸的,一个叫的固定容器,它分阈值的几个阈值。三个玉子几个状态,四个状态三个子是个状态吗?是吧,这边什么我们说小鱼到。小于到768嘛,小于768的时候,这个Y置不到凹凸相当于是不是小于768的时候,又是一个流体布局啊。
24:03
能理解吗?OK,那这是里面首先你得知道两点,流体布局啊,流体容器跟固定容器好,然后你要知道第三点,不里面的一个最经典的东西,三格布局啊,你可以叫它三格系统好,什么叫三格系统,我们可以来看看这。好,一般我们都用固定固定容器,很少去使用流流体容器,OK,来看一下,我们写一个CTRLV04。叫三格系统,三个系统来看下这个三个系统。整OK好,我们来看这三个系统啊,来怎么样,这个三个系统大家看我外部是一个什么布局。这是什么?不觉固定容器是吧,里面那个第给一个叫做。
25:02
肉想到了什么?这跟我们flax很像。你会发现三格布局跟flex真的有点像,就是因为有了这个三格布局这个东西之后,才会有了flex啊,这是我个人意淫意淫的啊,没有任何的规范,上面说因为有了三个比赛F,可是我觉得他们俩特别像,好来看一下现在我是不是有一行行里面应该有什么。列嘛,是不是class,大家看我来写个列,Co-LG杠十啊,再来个Co-LG杠二,现在我是不是有一个固定容器里面有一行,一行里面有两列,一列占十份,一列占两份,这些东西我有写任何样式吗?没有,都在。这里面的就不需要你做任何工作哦,我给你API你去用就行了,懂吗?好来看一下,只有你CTRLCCTRLC是不是来我们来看一下。
26:04
好变大你看好现在不能看出什么东西来,是不是,那给它描边框吧,怎么描边框,是不是给出这些点去没变化,那应该用什么属性选择性吗?是不是你的什么class嘛,干嘛以什么开头。Co开头嘛,是不是这些东西干嘛,加一个什么E的边框嘛,是吧,走你看一下。你看是不是就出来了,能解吗?这个选择题没忘吧,啊,这是我们第一天讲的吧,是不是OK,来看一下是不是一个占十分,一个占两分,相当于,其实我们看一行有多,一行有多大。来看一下我们这个行。你看是不是这种行已经被我们占满了,说明一行其实分多少列,12列真不讲,比如说这边我来写个二来看一下只有你。
27:04
看到没有两列两列嘛,其他都给我。空的能理解吗?记住在不在不是里面默认会把三哥分成12块,你好,是不是啊,一行再来一行。OK66嘛,是不是OK66走你你看是不是下面又来一行,OK,如果你这么一直叠下去的话,一个表格是不是就出来了。选一下,比如说干嘛,这个四这个给八是吧,这个给四这个给八是不是走你。L是吧,你看是不。什么鬼哦,你哦。是不是出来了,能不讲OK,好像很简单,是不是啊,来看慢慢变小了,你们看到这个LG,我问你好不好奇啊,肯定好奇吧,来看下整理。
28:08
你看现在我变小的时候,它还有效果吗?没有变成流体了是不是,你看我到一定情况底下,你看慢慢拉过来的,你看这还还是没有,是不是再慢慢拉过来情况底下再看。哎,才会有说明,这个LG是不是相当于是个标识。是不是啊,那我这么讲你们有感觉吗?没感觉肯定没感觉啊,是不是很想知道为什么是这样的,是不是啊?好,那我们接下来就看三个的源码,看它怎么实现了懂不懂,最终我们制定一个闪烁系统。啊OK,来看一下整体,那现在对这个对这个三格应该有个直有一个直观的印象,它得有个容器。然的,然后干嘛有行,然后有列,默认一列分成了12,默认一行分成了12列,而且列上面是有一个。
29:01
叫什么阈值的概念呢?这个LG就是代表我们刚刚这个什么。预值其实啊,应该它有四个状态,懂不懂,最起码到现在应该能知道这能知道这些信息吧,是不是,那我们就来看一下整个三个启动它怎么实现的,OK,那这块就比较重要了,好来看一下。好,那这个视频我先停一下。
我来说两句