00:01
好,那么项目的基本结构我们搭建完了,接下来我们来开始做我们这个项目,我们这个项目的话,我们要做的话,这设计图已经有了,那其实在做起来就并不并不复杂了,我们就一点点做就行了,那接下来的话,我们先把这个整个一个游戏界面呢,我先给它去搭建出来,那我们在做这个游戏的时候啊,做这种小的游戏的时候,我们其实有两种选择,一种选择就是我们这些结构啊,诶A毛这些东西我统通的都在这个GS代码中设置啊,像div啊这些东西我们都在GS当中去创建,然后通过GS来把这些东西一个一个给它拼出来,这样是可以的,这样的好处就是它的这个呃活我所有东西都写到G,我直接通过G个代码就给他。
01:01
还是这种结构表现行为三者分离,所以我们先来写什么呢?我们先来写这个结构,也就是我们先来把我们整个页面的一个静态结构呢,给它搭建出来啊,然后一点一点的再去写这个,写这个这个这个。GS代码啊,那好回到我们的这个项目当中来,那这里边的话图已经有了,我们就一点点写就完事了啊,这打开我们的index.m啊,这样我启动一下我们的这个开发服务器啊,就是我们一边看呢一边去写它,嗯,这里边我直接来一个这个NPM来一个start啊直接执行,或者呢,刚才说那小技巧,我这不是打开这命令了吗?你直接呢,双击这个start。它就会自动启动那个开发开发服务器了啊,这样也可以来,我们把这个服务器呢放在这儿,那这样我们就得到了一个实时刷新的页面,我们开发起来就哎更容易一些啊好,那现在的话,我们就先来写我们这个页面的结构,哎呀,这这屏幕太小了,现在。
02:06
屏幕太小呢,我们去开发的时候就会麻烦一点,如果你要是自己开发的话,如果你有两个屏幕的话,这就会省事一点,我把这个之前我们写那样式啊,我先给它去掉,之前我那个样式在这个index.la里,之前的样式呢,先给它去掉,待会我们来处理,然后回到N哪里边我们来写,写什么呢?啊写一下结构,首先的话,结构的话就比较简单了,我们快点写吧,但是我还是一步步来,因为我们去定义这结构呢,有有的同学可能这块不太好,基础不太好,所以我写的时候我就一点写,我写一个写一段S,我来写一个CSS,写一段二写一个CSS,这样我希望你能好理解一点啊,首先我们来先来创建我们这个游戏的一个主容器,游戏的一个主容器,也就是我们这个游戏的主窗口,也就是外边这个大黑框啊,大黑框啊,我们在这儿呢,直接来整一个啊,整一个这个div我们就直接给ID了啊,Div一个闷啊,这是我们的主窗口。
03:07
主窗口的话,在这儿我们来设置一下它的样式,设置样式一个个来,首先呢,我们重置一下,诶,清除一下我们这个默认的样式,清除我们这个默认的样式,默认样式的话,在这儿我们直接。诶来一个这个星号,然后我们这直接来一个Mar丁灵拍点灵,把默认钥式清除了,然后的话我们我还要设置一个属性,叫做一个box sing,我要设置一个borderer box,为什么要设置borderld box设置borderer,这就是我们这个改变我们这个盒子模型的一个计算方式,这样的话我设置完了以后,我所有元素的盒子模型计算方式就被改变了,那也就是我再去设置和的时候,实际上是设置了盒子的总大小,这样好处是我在想改变盒子大小的时候,我就不用再算了,还要把什么内容那编加一起,直接一个box,其他你设置完了它就往里挤就激活了啊好,这儿设置完了清除默认样式,然后的话我们来设置我们个容器,嗯,那这块的话来设置我们这个容器。
04:13
诶,我会发现我们这儿还有一个字体对吧,字体的话我们就字体呢,我们待会来设置吧,字体我们应该设置到body上,现在我们先不管它了啊,这我们来写一个下边我们来设置谁呢?哎,我们来设置我们这个主窗口的一个样式,主窗口的话,也就是我们个闷,闷的话,我们说了对应图片里的话,闷呢是我们这个玩意儿啊这个窗口,这个窗口的话我们来看一下,首先它的宽度。宽度是360,你看凉了,连边块360,高度呢是420,也是连边块了,所以在这儿我们直接来一个Y,是一个360像素的,是一个420像素,直接给它指定好,然后呢,有一个背景颜色,背景颜色呢叫做B7D4A8,这个背景颜色我们就直接写上就行了,如果你这个项目复杂一点的话,你也可以把就是这个颜色在很多地方都会用到,你也可以把它设置为一个,诶一个变量去使用也可以,那设置变量的话,我们可以这样写,直接来设置变量,设置我们这个变量,我直接来一个艾特一个BG color BG color呢,我们设置一个井号B7。
05:22
D4A8直接设置变量,设置完了以后,我们这在设置它的背景颜色的时候,我们就可以直接写这个变量了啊,直接写这个变量,那这样的话,我们以后再想重复用这个颜色就不用记了,直接记住这个变量名就行了啊,这是我们Les当中去设置这个变量的一个方式,编译成功了结我这玩意儿刷新一下。哎呀,它编译成功了,但是我们在这儿它并没有并没有给我们生效,对不对,我们来检查一下,看看是不是哪有问题,闷闷它里边的样式。
06:00
我看一下。Background color井号BD,哦,我说怎么没生效呢?我这颜色写错了吧?BD4A8B7D4A8,少了个七啊,少了个七,这回我看你还没有是吧,这个颜色应该有了。好,让他先整着吧,颜色就已经有了,然后整个这块儿啊,我们都居中一下,Marin呢,我们来一个100像素,然后来一个凹凸,也就是它的位置,让它往下一点,然后呢,水平方向是这个居中的,然后再看的话,它外边还有一个边块,边块呢我们来看,边块呢是一个十个像素的,然后有点小圆角,是黑色一个框,所以在这呢,我们直接给它设置一个border border呢是一个十个像素,然后solid,然后来一个这个black,圆角呢,我们来一个borderder,这个radius radius呢,我们来一个十个像素的一个圆角吧,十个像素可能有点小,哎,没关系,我们先看看它这个效果啊,看看效果,这里边我简单写几个注释啊,这是设置我们这个背景颜色。
07:09
背景颜色,其实这都不用设置了,这是设设,这都不应该再写注释了,因为这个东西实在是太简单了,设置我们这个居中。嗯,这个写上吧,上边边框我就不写了啊,这是设置,我们这个设置,我们这个圆角有点小了,有点小呢,我们调整一下,给它来一个来一个40吧,让它稍微大一点。看好不好看,然后的话,其实这设置完了以后,我们这个游戏主窗口的话就已经设置完了,游戏主窗口设置完了,我们接着往里边写,再往里边写的话是我们它主窗口里边实际上分了两部分,一部分呢,是我们这个游戏的窗口,或者说我们这个叫游戏的那个舞台啊stage,就是我们这个蛇,它是在那个框框里爬的,下边一个呢。是我们的这个记分牌对吧,记分牌,所以呢,这里边我们直接设置一下这儿来设置。
08:06
设置我们这个游戏的一个舞台啊舞台我们直接来一个div井号s stage啊叫做一个stage,这是我们游戏的舞台,然后再往下呢,是设置我们个分的话,我们直接来一个score,一个这个panel。子刻的一个panel,这是我们计分的一个面板,这两个div的话,我们就给它设置完了啊,一个是stage,那我们这里面我们给它设置一个这个样式,Stage呢宽304,高呢也是304,那我们就直接写上就完事了。在这儿我们直接来设置井号,一个stage stage你写也可以。或者你写到它里边也可以啊,Stage是一个304 304啊。Height呢是一个304 304,然后呢,我们看这啊,它应该是有一个边框,你看这儿呢,这写了两个像素的边框,所以我们直接来一个borderder borderder来一个两像素,然后呢来一个这个solid,颜色呢就是black,然后呢,下边我们这个这这这这这玩意儿,我们就给它设置完了看看效果。
09:23
稍微等一下,正在变异。诶,是不是这哥们儿就长这个模样啊,诶这个样子,然后再往下我们这个记分牌的话,它里边是有这个文字的,文字的话我们也给他写上吧,记分牌的文字的话,我们看有两个,一个是score,还有一个是level啊,一个是一个是level score level我们怎么给它处理一下呢?就就就就就给它写两个div吧,第一个div里s sc score,然后冒号,我们这写一个SPA,写一个SPA span的score,我们先是一个零分SPA,给他个ID,叫做一个待会我们的时候好一点,然后下边再来一个div的话,我们这是一个level的话,ID呢,Level,然后level的话别从零开始,Level是从这个一级开始啊,一级开始,这样一刷新我们这个字的话,也也就会也就会有了,它先编译着,然后的话,我们看这里边啊,这里边的话,诶,你看字是不是也就出来了,字出来了以后,我们这个level的话,它是字体有要求的,你看字。
10:27
体是这个字体,然后大小是20像素加粗,我们给它设置一个字体,字体的话我们就不再单独设置了,统一设置统一给谁呢?统一设置给我们这个body body的话我们是一个found,放的是首先写加速啊Bo的,然后20像素,然后这个字体叫做Co u这个玩意儿没有new啊,就是这个字体这一保存。然后看效果。稍微等一下,正在编译当中。哎,不过它这个编译OK编译很慢是吧?OK啊,我们这一块是不是样式就出来了啊,样式出来了好,那整个我们这个框的话,还有我们这个框的样式的基本上就没有问题了,没有问题了,但是你会说老师你这个没有问题,咋就没有问题呢,你这玩意儿是不是还没对齐呢,诶对齐我们慢慢来啊,慢慢来。
11:17
那这里边的对齐的话,实际上有很多种方式,他们对齐我这里边的话,我就用一个我比较喜喜欢用的方式干嘛呢?哎,现在我首先我希望这两个玩意儿是不是垂直方向你要居中对吧?垂直方向你要居中,然后然后呢,不是水平方向居中,垂直方向还好说是吧,垂平方向你要居中,所以这里边的话,我更其倾向于直接干嘛呢?开启我们这个就是它负元素,开启它这个弹性核模型,弹性核模型开启弹性核模型以后,我们在这布局的话,就会好布局,好布局一些,直接display flex设置完弹性盒以后,那现在闷,也就是整个外边这个容器就变成了一个弹性盒,设置完弹性盒,然后我们再设置一个这个主轴的一个方向,因为我们这个这个。
12:06
这个这个弹性和默认情况下,我们主轴是横向的,也就是元素是水平排列的,而我们这两个元素这是一个这个stage,还有下边这个叫score pan,这两个的话,我们是希望它垂直排列的,所以这个时候主轴方向我们设置一个flex flow我们直接设置一个这个column,哎,让它是纵向排列,也就是主轴是自上向下的,主轴是自上向下的,然后呢,它是需要主轴是垂直的,这个主轴是水平的,那我们是不是希望它在辅轴上是居中的,哎,居中的,所以在这儿我们来设置一个这个辅轴或者侧轴辅轴。辅助,呃,辅助辅轴或者侧轴啊,侧轴好像好听一点是吧,侧轴的对齐方式,对齐方式侧轴上干嘛呢?要水平居中,我们叫做一个Alan anto,我们直接设置一个center,也就是说先让它水平方向是居中的,然后呢,下边的话就是我们这个垂直方向,垂直方向的话倒不一定是居中,但是他们需要把这个空白的空间是不是在他们之间去平均分配一下,所以这儿来设置我们这个主轴的对齐方式,主轴的对齐方式我们叫做一个content,这个我们想一下给它来一个什么呢?我们试试吧,我们来一个space between,哎,把这个空白空间分配到每一个元素的两侧,然后就是上边距离小一点,下边距离小一点,中间这个距离会稍微大一点,我们看看好不好看。
13:42
哎呀,好难看呀,好难看,那我们就来一个space around。哦,Between,哦,Between,那我还说错了,Between是把这个距离分配到两者之间,而这个around呢,是刚才我说那个是吧,上边分配一点,下边分配一点,然后中间这这这一点这一点,所以中间距离会大一点,OK,我们用around啊,所以这样的话,我们这两个元素的对齐方式就没问题了,然后接下来再看我们这个积分牌,这积分牌也就是我们这个叫什么呢?也就是我们这个score的一个panel score panel啊,这里边我们写一下注释啊,这是我们游戏主窗口,这是我们游戏的舞台。
14:28
下边呢,这个score panel,这个是我们游戏的这个积分牌。积分门记分牌的话,首先我们需要这个两个东西,也是左边一个右边一个你得横着排的,那我首先的话,我需要让这个整个这个panel它的宽度呢,和上边游戏窗口的宽度是一样的,这样它才好看,对吧,所以呢,我给它整一个这个。Y呢,上边是304,它也可以304,但是它其实没有边框,如果你想它在边框里面的话,我觉得直接指定一个300就可以,然后我们希望这两个东西水平排列,水平排列我们就直接display开启一个弹性,开启弹性以后它是不是自动就横向排列了,然后的话它是应该score是在这边,然后level呢是在在这边两侧去排的,所以在这的话,我们可以直接给他设置一个这个设置我们这个侧轴诶别侧诶主轴的对齐方式。
15:26
主轴对接方式,我们就直接来一个这个我们直接来一个space between,把这个空白空间分配到他们两个的之间,那这样等于这两个的距离就给它拉开了,这样会好看一点啊,好看一点,那你说老师我不喜欢用弹性盒,我用这个浮动行不行,浮动的话也可以,那浮动的话你就一个往左浮,一个往往右浮,但是麻烦点就在于你需要单独给他们设置,而用这个弹性盒的话,我只需要给这个负元素设置,然后他们就等于就就都有这个效果了啊,都有这个效果了,好,那这一块我们的游戏的这个窗口就给它设置完了,然后还有这两个东西,还有什么玩意儿,还有我们这个是不是还有这蛇呀。
16:07
说。蛇在这儿呢,然后这是不是还有一个食物啊,哎,食物蛇还有这个食物我们来整一下,嗯,先来整谁呢?先来整这个蛇吧,蛇好整蛇好整蛇的话,应该是在我们这个舞台里面的,在这儿的话,我们来设置我们这个蛇,设置我们的蛇,蛇的话呀,首先你要注意我的这个蛇呢,它是一节一节的,一节一节的,所以我这个它能不能是一个元素,诶,一定不是一个元素,蛇一定是一堆元素,一节一节的嘛,所以在这儿的话,我们在这儿整一个div div井号我们叫做一个这个snake snake这个是蛇,但是它里边我们还要放div,还要放div,为什么?因为蛇是一节一节的么,这个snake就相当于是我整个那个蛇的一个容器一样,然后具体的蛇头啊,蛇身的,那这里边的,嗯,这个snake s snake snake内部的div div,它表示什么呢?表示我们这个蛇的这个各部分啊,各部。
17:09
所以这个时候我们要去设置样式的时候,一定注意我是给谁设置样式,不是给snake设置样式,是给snake里边的div去设置样式,所以你在写样式的时候一定要注意,我们找到index.gs,在游戏舞台这里面,我们这儿来设置,设置我们的样式。设置这个蛇的样式,蛇的样式我们直接来个井号,一个snake snake我们要做的是什么呀?做的是它里边的子元素,里边的div,也就是我们不需要给这个snake设置样式,我要给的是里边的div去设置样式,那你后边直接写snake大于div,这样写也行啊,我就这么写,这样写的话结构会清楚一些啊,清楚一些,所以关于这个代码的编写啊,这个习惯上它没有好坏之分,你自己写,你自己看着书就行了,你写的跟我这个不一样,不一样太正常了,你写的要跟我这一模一样,那证明咱俩心有灵犀,那太不正常了,对吧,所以你写的跟我这个不一样,非常非常正常,所以你写的时候也不如果你就是如果你不熟悉,你可以照着我写,但是如果你就是你想把东西学会了,一定要尝试着自己去独立完成这个东西,好,那这个div的话,我们看蛇啊,蛇舌头大个蛇给你标了,蛇是不是十个像素啊,诶蛇是一个方块,方块的话那应该就是什么。
18:28
这宽度是十,高度的话也是十,背景颜色的话,Background color是一个这个井号一个这个,诶就000是一个这个黑色的蛇嘛,黑色的蛇,那这样的话,我们等会儿它重新编译一下,我们就应该能看到一个黑色方块的一个蛇,这个蛇设置完了啊,但是这个蛇呀,它有点丑,你说老师这蛇有什么丑的,这蛇现在是一个黑漆漆的方块,现在它身体只有一段,当我这个蛇越走越越越吃越多,越吞越多的,身体是不是越来越长啊,身体越来越长的时候,就会出现一个问题,就是每一段身体都是一个黑黑方块,每一段身体都是一个黑方块,这就导致我这个蛇连起以后变成一大黑条,它不好看。所以我们希望的效果是什么呢?就是蛇跟蛇之间是有一个缝隙的啊,有一个缝隙有点间隔,这样显得能好看一些啊,能好看一些,那你说老师我不设置行不行,不设置也行,那这间隔要怎么设置,那你说老师你把舌改小了不行吗?改小了不行。
19:28
记住了,蛇就得是实际大小,就得是十乘以十啊,为什么?因为十乘以十我是一格,我蛇每一次移动一格,是不是就移动十啊,你要把蛇给做小了或者是做大了的话,那有可能会导致出现这种吃不到食物的情况,所以十就是我们十乘以十就是我们的单位,所以注意了,我们十的总大小就是十乘十,那你说老师我怎么让他这个。这个距离体现出来,哎很简单,我们在这儿啊,我给它设置一个边框,直接设置一个borderder borderder来一个一个像素的一个实线背景颜色呢,我用这个它的背景颜色啥意思,我给我的这个蛇设置一个一个像素实线的边框背景颜色呢,和我们这个这个。
20:15
屏幕的背景颜色是一样的,那这样的话,我们得到一个效果,实际上就是我们这个蛇的每一块身体之间是不是出现一圈空白呀,那这样实际上我们这个蛇它外边是有一个边框的,但是由于这个边框和背景颜色是一样的,所以现在我们是不是看不出这个边框的,也就是蛇的站立范围实际上还是十乘以十,但是我们看上去它是不是小多了,待会儿我们再给它加身子的时候,那我们说了,这个身子和后边的身子之间也会隔一个距离,一个缝隙,相对来说能好看一点啊,当然这个灵活掌握,怎么整都行啊,怎么着都行。好,这块弄完了,然后注意一个细节问题,我们这个蛇我最终是不是要移动啊,诶蛇的位置是要改变的,那既然位置是要改变的,所以这里面一定要注意,我们要给它开启绝对定位,你要不开绝对定位,待会儿的位置是不是就定不了了,所以我们来一个position abut开启决定位,那同样我们希望这个蛇的定位,它是不是参照于我们这个屏幕去定位的,所以你给蛇开定位的同时,你要给这个舞台啊,我们整个游戏的这个舞台,我们要开启一个相对定位,直接来一个position,来一个这个relative position来一个relative,开启它的相对定位,那这样我们待会儿的参照物就定了啊好,这就处理完了,蛇是一个事儿,然后的话再来看我们这个实物,实物的话,我们来看一下实物的话,其实就简单了,我们来设置实物。
21:46
设置实物,实物呢,我们来一个div井号,一个负的实物,两种处理方式,如果你想这个实物简单一点,那你就直接写一个负的,在这写一个and,我们来大于号。
22:00
And大于号,我们来一个food food的话Y是一个十,Hi是一个10BACKGROUND color,我们来一个哎,来一个black,然后你也可以给它设置一个一个像素的边框,那这样的话就等于我们这个实物长得跟这个蛇一模一样,给这个食物呢,也开启一个定位,但是现在你这设置完了以后啊,你这个实物你看不见,为什么看不见呢?因为我这个蛇开定位了,食物也开定位了,这食物现在等于是跟这个这没写ID啊,这食物是不是等于跟这蛇是重叠了,哎重叠了,所以为了能看到这个食物,我临时呢给这食物啊设置一个,哎设置一个位置,Life呢是一个40 top呢是一个100,设置一个位置,这样的话我们能看到那个食物的位置它不一样,和这个和这个蛇的做一个对比,稍微等诶编译成功了,怎么还没出现呀。啊啊,这谁写的呀,哎呀,这写的是瞎了心了是吧?什么玩意儿是吧?你看我把这个食物写到哪了,是不是写到这个蛇里边了?哎,写到蛇里边了,食物是蛇里边了吗?不是啊,食物是我们的这个这这这这这这叫什么玩意儿stage里边的啊,你写半天你还是看不见啊,但这个你写不写就都都行了,无所谓了啊,无所谓好写完了以后我们来看效果刷新一下,写的时候啊,不要着急,慢慢写,你看刚才我这一着急把它写错位置啊,这来设置我们这个实物,诶那你看这个是不是就是我们实物的位置,哎,食物的位置,那其实这样的话,作为一个游戏来讲,就已经满足我们这个这个要求了,就没问题了,但是呢,它其实还不够好看,如果我们还希望这个实物能好看一点,像我们这个图里边,你看它像一个这个什么呀。
23:48
给放大一点。哎呀。像一个这个小花瓣一样,是不是这种感觉,你如果你希望这么一个效果的话,那你可能还得需要再去设计,设计这东西怎么做啊,怎么做,其实呢,哎,其实呢,也不难啊,也不难怎么做呀,哎,实际上它其实就是在这个它里边我再放四个小div,四个小div干嘛呢。
24:15
添加四个小div,诶,来设置我们这个实物的一个样式啊,来设置我们这个实物的样式,通过这种方式啊来做这个实物,那这个实物的话,我们这四个小div我们怎么设置,还是那这个时候我们这个样式呢,就不给这个负的设置了啊,我们把这些呢都给它去掉,不给负的设置了干嘛呢?哎,我们来给负的里边呢小div设置样式。因为我们要做造型嘛,对吧,它里边的这个div div我们设置样式的话呢,首先四个小div的话,我们给它外呢都是四像素,Hatight也是四个像素,然后back color我们设置一个black都是四像素啊,都是四像素,那四四呢就占这个16,诶那等于是其实就是变成了四个小的这个黑方块,我们这儿整完了以后的话,我们会发现这四个小的黑方块的话,它会是一个这个一个这个竖线竖线排列的,那我们希望咱们这样啊,我们为了看的清楚一点,给我们这个负的临时设置一个背景颜色,我们来一个red,看一下他们的关系啊,红色的呢,是我们这个负的副元素,然后这个黑色的呢,是我们那里面的这个四个小div啊,我们看一下它们的一个区别。
25:28
Yeah。Background color。怎么觉得这个颜,这个样式颜色没有体现出来呀。稍等一下,我们看一下啊。Compile。哎呀。哦哦哦,负的呀,我没有给它指定宽高,把这事给忘了,Y10还一个十,你不指定宽高,那当然看不着了,对吧,看不着了,把宽高给它设置好,这个时候我们再看。
26:00
哎,是不是出来了,这是这四个小div,然后这个是这个红色那个负的,那我希望这四个小div呢,它在这个里边啊,它是四个角一个这样排列啊,这样排列的,那这个时候我们就需要给四个小div做一个这个做一个排列了啊排列的排列的话,我们就直接display f flagx给我们的这个什么呢?给我们这个开启一个,这个开启一个弹性盒,然后呢,我们叫做一个Lex flow设置一下它的排列的话,还是什么呢?还是横向排列,但是我希望它会换行,也就是当我这一行容不下你的时候,你可以把这个这个行给它换下来,那这样的话,我们看果就是我希望是四个,然后是。哎,这还不叫Alan斯,这叫Alan。叫做一个space between,直接让他们都是把这个空白的空间分配到他们这个二者这个之间,那这样我这个四个小方块是不是分布到这个四个角了,那这个时候,诶,其实这个也挺好看的,把这颜色一分,我们来看看效果。
27:18
把这个背景颜色一去,哎,我们就得到了这样一个食物,哎,这个食物我感觉也还可以对吧,也还可以接受,所以你如果做这样一个食物也可以,也OK,那如果你希望更好看一点,我们可以在这里边让这四个小div,让它转一下transform rotate,让它转什么呢?转45度,让它转一个45度,做一个旋转啊,我看看能不能好看一点啊,这个东西啊,没有什么固定要求,你说老师我我就喜欢那大黑块,那你就可以做成一个大黑块,老你说老师我就喜欢做的这个花哨一点,那你也可以做的花哨一点,这种东西没有固定要求,根据你的个人喜好自行去选择,没有死的要求啊,没有死的要求,越好看越好,但是一定注意,我们这个练习的关键点并不在于我们这个样式啊,关键在于我们待会要写的这个TS代码,所以这个样式这块,哎,你说老师我懂懂,那你就快点写,不懂不懂你遇到不懂的你先把这个样式。
28:19
大概回忆一下,大概去看一下啊,正好趁着现在把我们这个之前的知识,你可以自己做一个这个复习,我这块的话,哎呀这写半天,有些地方没写注释对吧,没写注释的话,我在这。简单写几个吧,写几个啊把这个可能你有不理解的,我们写一下,这是开启我们这个弹性盒。然后呢,这个是设置什么呢?设置我们这个主轴为横向排列,主轴为横主轴,设置我们这个横轴为这个主轴肉嘛横向排列,然后rap表示什么呢?Rap表示会换行。
29:00
就是你我这一行容不下了,它就换成第二行啊这么一个,然后这个两个just content justify content content设置什么呢?设置我们这个主轴和这个,哎,这个侧轴的这个空白空间。分配到分配到我们元素之间。元素之间就润了,你看这不跑他们之间去吗?叫做space between,然后下边这这有一个川字,这个干嘛呢?十使我们这个四个div叫旋转,诶旋转45度,45度转45度斜过来变成一个小花的这么一个,这么一个形状,OK,我们这个项目结构呢,就搭建完了,就这个界面就搭建完了,呃整体来说并其实并不难,你写两遍给他写熟悉一下,那你说老师我这还是不行,你可以不用这个,像我用过用这些flagx样,你可以不用,你说老师我就喜欢用浮动,你可以用浮动,但是其实用f flagx会简单一些啊,还是啊,有不会的,有不懂的,往前捋捋之前的这个知识点啊,好,我们先说这么多,停一下。
我来说两句