00:00
我们再来讲点啊,OK,讲点什么呢?今天啊,今天我们是不是要用抓去写一个东西了,OK教。好,我们把这个实例给它写出来啊,那我觉得这应该是极其简单的啊,你们会发现写这个东西好像看上去如果让你用。原生去写,原生CSS,原生加去写,我估计得写到。是不是啊,你光写一个轮廓组都不知道写到什么时候,是不是啊,可是你没发现是不是现在我这个需这个需求比较简单啊,我不需要你用干嘛原生去写吧,就是我的我的什么,我的那个不知道吧,他是有能力干嘛通过搭积木的形式把这些东西全部给你搭出来。啊,我们来看看咋整,而且它是个小零食。看到没有想去的吧,这里特别是看这面,这就这应该就是个三个。是不是啊,所以那这些东西怎么做。
01:02
怎么做?OK啊。来看看我们怎么做啊,不要笑啊,有同学好开心,这个对,又要CTRLCCTRLV了,确实看着OK,怎么CTRLCCTRL,首先给我打开官网。啊,官网给我打开一份,找到什么,找到中文文档是吧,待会我们频频繁的来这边找组件。能不讲OK,就你怎么玩,首先看头部这部导航,把这个导航咱们先做了是吧,导航怎么整,首先写的时候你要先看一下,先去全局,为什么要先来全局这边有干嘛。好,不应该有一个起步,起步这块大家看有个基本模板,是不是啥都不要管,把这个基本模板干嘛,CTRLC给我贴过来,这是你写页面的时候,你干嘛必须要有的东西,懂吗?好,拎过来我们看看都有些啥。
02:02
啊,这个今天的课一点都不难,那这里来看一下打开了什么index HT是不是OK,其他什么东西没有,Ctrl a ctrl b干掉是不是OK,大家看它这是一个title吧,啊,我们干嘛1208。是吧,OK,走,你上面是不是有三个的标签啊,是不是一个是跟什么。编码有关系的一个呢,啊,让这个I的表现跟什么跟这个一见差不多,是他的最新款的一款器,懂懂就让I的表现稍微好一点,懂不懂这个美标签呢?啊,我们说在移动端必须要有这个美标签是不?我们可以给他补补权us user-cle是吧,等于no啊好,所以然后呢,这是不的一个样式表是吧,那这个表我是不是给他拿过来的,是不是得建一个CS文件嘛,CSS文件去拿他的样式表吧,走,你拿样式表。
03:14
一般是在地里面的,懂不懂这个叫发发布版本嘛,是吧,去拿什么。不要找这面干嘛找压缩版本啊,这是带主题的,咱们不要主题,那就应该拿它,那这个压缩版本懂吗?OK,这里你过来看他还有什么。OK,这你这是不drop需要的一个样式是不是,这你下面看是不是引了两段GS,而这个GS是不是在一个什么画里面去引的,相当于是不是这个什么意思啊,这是为了让IE9以下的浏览器去兼容什么第一个兼容HT5的标签。啊,像什么雨雨花标签这些鬼对不懂,第二个让A9加627支持小子。
04:00
对不对?OK,所以需要引这两个解,而且你会发现正常浏览器是不会干嘛读到对方代码的。I9才会什么,这不是I90哈克吗?懂吗?OK,所以你那干嘛,这两个段是不是也得拿过来,哎,而且你看他赢的是不是一个CCDN的地址啊,看一下什么叫CDN啊。就是把这些资源放到放到什么,放到网络上了,让你去引用懂不懂,OK,那我们现在需要去引用和DS吗?不需要,当然你也可以干嘛。用自己的嘛,是不是OK,你去哪?好,这个文件我帮你们也下了一份了,全在这边收到,那你可以把这个JS文件干嘛直接拿过来。OK,那我们眨眼这边我们直接什么。是不是我们说是GS底下的什么。这个玩意OK,那我们直接把它变成什么减S是吧?OK,我们是不是没有面量没有面是吧?OK,这个也是啊。
05:01
JS急,叫什么?点吧,没有版本。是不是因为这个版本被我删了,对不对,那我是不是一料这个加值就可以了,OK,那这里这块肯定是要要的,是不是OK,我们说找一下他也是拿的什么C,拿的什么CD,上面CD这个事情我放到后面,我会给你答什么详细说啊JS什么。杰瑞点点是吧,而且这个杰块RY版本最好要稍微的高一点,最好是二点几的版本,懂不懂有可能不drop他。不支持啊,在他官网上面,他应该有,他应该有说。好,OK,我们来看一下。啊的插件全部依赖于什么。是不是OK?因此铁块必须在不之前引入是吧?有没有说版本的问题?啊。列出了几块所什么支持的版版本吧,我们来看一下。
06:03
OK,找,找一找。往哪找去找它的配置文件。好,他这边有一个配置文件合起来。是他OK,看里面这块的版本。呃,1.9.1到三啊,所以说咱们的版本应该在这什么这个里面,这叫依赖啊,我们这个也会讲到懂不懂啊,他说不是我们推荐你使用这块的版本是1.9.1瓦往上的,最好能理解吗?啊这里。好,那咱们现在是不是基本的架子搭完了,基本架子搭完先干嘛,跑一下看一看呗,是吧,看看这个东西有没有坏掉呗,没有坏掉咱们就开发了呗。是不是OK,那走起是不是现在画什么?投呗是吧,找找去哪找,肯定找主见。是吧,找有没有导航条,有导航跟导航条吧,点击导航条来看有没有跟我们这个导航差不多的,就是他了。
07:03
是不是里面有些样式,我们稍微改改吧。是不是那把它干嘛。啊,CTRLC开不开心走来。把这个干嘛干掉。CTRL,过来吧,Ctrl s OK,只有你。好像写了好多好多东西啊,你啥都没写?OK,这是我们说先做一个导航。看这个导航怎么办?来看一下,那这个导航是不是应该就出来了,只有你确实出来了。看到没有,只不过跟我们这个干嘛,差距还有点。大是不是啊,OK,我们说我们这个是不是黑色的手机,而且一些文本样式,你看上面还有胶布的,OK,来看一下它上面有没有交火,有能不能用一模一样的嘛,看到这种东西我最开心了,是不是,可是我们说这个颜颜色是不是不一样,要么你自己去写颜色是吧,其实它里面也给你提供了,来看一下,你只要把这个文档好好的看一遍啊,你总能找到什么。
08:15
找到彩蛋反射的。导航是不是就是我们这个颜色添加什么。本质上他就给这个类指定那个白光的。为一个颜色吗?不就可以了吗?可是他不需要你去写啊,干嘛?CTRL可以把这个DEF干嘛。删掉是吧,来看一下行不行。说一下我买god出来没有出来了吧,是吧?OK,你发现他稍微有点圆角呢是吧?咱们在咱们在先不管是吧?来看一下,那我们应该是什么现代浏览器博物馆吧?OK,那是把这个棒的改掉就行了,OK,找到这个棒子吗?哎,还有一个问题,大家看这是不是一个流体啊。
09:01
我们是流体吗?我们是流体吗?明显不是流体啊,你看两边空这么多呢,你看它。是不是只空了什么5PX啊,超快了一半嘛,说明它的容器拿的是一个什么评的ID吧,咋整啊。So easy啊,是不是只你你看是不是过来了,是不是把八改成什么。找到班长是不是在这边啊,是不是你需要去,现在需要去看中它里面的每个标签是干嘛的吗?啊疯了,你找到相应的位置不就行了吗?不是你你需要搞,哎,我这个SPA是干嘛的,需要吗?你你其实你要是对自己稍微干嘛,就是你可能好奇心重一点,你可以看一看懂不懂,其实这个其实这其实这你看很明显就是按钮嘛,可是这个按钮一开始它是不会给你展现的啊,因为它是响应式的。
10:00
啊,你F上的时候,你看它就是这个东西,就是你这个div啊,这个八层啊,就是这边这个面包按钮能不能讲啊,看源码你肯定能看到。懂吗?啊,可是这些逻辑我感觉。可以把它当成一个黑盒,因为没有那么重要,不像我们的三格布局是不是啊,你要是不看三个源码的话,你是看不懂的,是不可是你看到这个什么,看到这种东西的话,你干嘛,应该知道差不多他是怎么做的。是不是啊,能理解吗?怎么了?卡了,你们说啊,是不是你干嘛呢?吓我一跳,现在有吗?有了是吗?OK,那你看我F12这个是不会折你,我们再看看F12,你看是不是会有这个,这个玩意儿能理解吗?OK,这你啊,其实就好写,把这个棒的话,把这个棒子换成什么现在。浏览器博物馆是不是啊,好,你写不的时候最好去他的官网上面找东西啊,OK再来看,那我现在这个一起。
11:12
好,这里我们来看一下,刷一下是不是就变掉了,OK,变掉了之后,嗯,这种感觉我把这个东西也CRLC分好吧。拿到这边来吧。求,所以是不是来对比一下,是不是把这个link什么全部换掉,这些我要吗?后面这个框我要吗?框不要干掉他们找到他能不能找到矿找不到怎么办。简直就是什么凤嘛,是不是找到凤嘛,能不能找到凤嘛,只要不杀基本上应该能找到,是不是怎么CRL大括号啊,把这个风给他删掉。是不是OK来看一下你没了吧,OK,后面这两个也不要吧,找到他后面后,后面这两个在哪审查一下。
12:02
Ul吧,这个ul是前面那个吧,是不是把最后那个UI给它删掉,好删最后一个ul。就这个128是不是OK ctrl大括号。CTRL加号好这个结构给它删掉,是不是结构不要算错了,你做做这个做你用标要画页面的时候,把最烦的就是你删节构的时候删多了,少删一个div,多删个D,那就要调大了。懂吗?OK,走你说一下,你看就过来了,是不是有外库就是这么用啊,不要问我为什么就是这么用的,来看一下把这个改掉,中速减速特点吗?关于吗?改谁啊,你有没有发现这里面结构好是好像还是比较乱吧,看不懂吧,是不是,其实你看是不是三个L。有没有看到,你看这是不是,你看我是整个一个导航嘛,导航里面分两个结构嘛,上面啊,里面是一个容器吧,容器里面分一个什么头部嘛,一个是头部吧,这是什么鬼啊。
13:07
这这个是什么鬼啊啊,来看一下我是不是分离了一个头部啊,来看一下,找找这个头部在哪。容器吧,看这是不是就那个头部是吧,为什么里面的结构那么多,响应式的,到了移动端里面有有些结构要他要让它干嘛,Display block的要让他干嘛,显示出来的暂时你们看不到,哎呀,能不理解,OK,那这块结构是不是就干嘛。诶,这是我的头部吧?这是个什么鬼?怎么有这个鬼了?就你点下来看这是不是U,这是外面这个报过区吧,咱不管是不是这个UUR里面是不是三个啊,很明显的吧,我们是不是应该有四个,那再给他干嘛加一个吧。是不是默认你看是中数减数特点,关于啊咋写啊。
14:04
应该把这个link换掉吧。是不是去把这个另一个换掉,换这个换什么综述。是不是什么中枢啊,简述特点,关于中枢啊。减速。OK特点底下是不是有下拉列表的,OK,那应该是用它,你看嘛,下面是个下拉列表吧,是不是啊,OK,这个应该是啊,放到下面去吧,是吧,这个叫关羽吧,关于那些放到下面的嘛,走你叫什么。关于是不是OK,是不是特点,我们还没写啊,来看一下应该写在哪。差不多应该能找到,找A标签后面有没有文本,有文本是不是他你看现在不是叫drawdown吗?这个改成什么。特点吗?眼神好一点就能赚钱吗?只有你上说过来了,OK,点开这个特点下面你看是不是那么多框,是不是那么多框在哪,不就是UU结构吗。
15:03
懂吗?你们是不是发现好像前一个月学的东西压根都不用学,是不是我告诉你们前一个月学的东西基本上用不到啊,那就是给你们打打基础的轮播图,可能自己画嘛,你疯了啊,来看一下走你你看是不是后面是不是这里面有两个线的,OK,把这个线干嘛。很明显他们就是线是吧,你要是不懂怎么办?你你查你还不会啊,是不是是不是给他干掉。干掉先干掉,OK,那是不是就没有线了。没有线了吗?我们这里面干什么吗?我们要几个五个,正好五个吧,是吧,把它改成是不是,然后呢。会拼F吗?火狐嘛,是,然后呢,S怎么办F?
16:13
这个S先留着,Sa fair,还有什么open是不是op o PA是不是不会拼?I,你不会拼,你就出门左转走,你出来了。刷一下做完是不是是不是就做完了,简不简单,我没有写任何东西吗。写的啥就写点文本吧,OK,把这个F换一换啊,OK,好,那我们先讲到这啊,之后我们再来画下面的什么。轮播图啊,这些东西,你发现这些东西肯定也是去贴的是吧?啊周你来看一下这个给大家点掉好,你看所有的JS交互也也不需要我们去写吧,可是简单的都可以不用写是不是啊,如果遇到一些比较UI库没有办法提供的功能怎么办?你还得自己写懂吗?所以你得看懂人家这些东西去改改,要么就直接去写,然后你干嘛点的时候你干嘛去掉这个方法不就行了,就你自己写的方法吗?懂不懂?所以一般我们会在uf上面还去加自己好多功能的。
17:26
能理解吗?啊,可是我们一定要借助于UI库去打底啊,OK,好,大家先下课。
我来说两句