00:00
好,那我们继续来上课,那么这节课呢,我们再来了解一下我们的三格系统布局的原理及应用啊,好了,那咱们来看一下咱们三格系统也叫做网格系统啊,Great是最强大的CSS布局方案,它可以将网页画成什么呢?画成一个个的小网格,然后可以任意的组合不同的网格,那么做出各种各样的布局,比如像这种布局,那么对于网格布局就是它的强项啊,那么如果要是对于我们这个像我们之前上节课讲的这个深折格呢,我们甚至它是相当于轴线的布局,对吧?对于一行或者一列没问题,但是对于这种结构是不是就要比较费劲呢?我就要考虑什么呀?你看好了,我就要考虑这里面应该是什么,应该是。两个元素对吧,左边一个元素,右边一个元素,那给它做成什么伸缩的,然后在这个元素里边,其中有一个大元素,有一个小元素,那里面的小元素左右一个。是不是在这么划分呢?哎,所以他就比较麻烦,而对于这个要是我们要是用谁呢?用这个呃格瑞的他就会比较容易,这是它的拿手戏啊,也他的强项,那么他说了葛瑞的布局与非,呃那个非布局呢,有一定的相似性,都是可以指定容器内部有多少个项目及它的位置,但是它也存在着重大的区别,什么区别呢?呃,这个费用式布局呢,它是轴线性的布局,对吧?刚才我也说了,那么只能针对项目,这个只能指定项目是针对轴线的位置,对吧?可以看作是一个一维布局啊,也就说我们伸缩格就是一个一维布局,但是网格呢,格瑞的布局呢,它是将容器划分成什么,划分成行跟列,然后产生什么单元格啊,就相当于我们表格一样啊,有多少行多少列对吧,有的单元格,然后指定项目所在的单元格,可以看出是什么,是一个二维的布局啊,这个gradeid的布局原比较强大,但我们一般都不会用布局,但都什么布够快形。
01:47
提升到框,比如说我们后期是一个布局,这就是由的布局实现,那我们来看。在这个布局之前,我们必须要了解一个基本的概念,什么概念一个是像,一个是容器啊,必须要了解这两个概念才行。那么什么叫做容器呢?容器看好了,容器是什么?是网格布局的区域,也就相当于比如说这里边有div,包含了这么多div对吧?那么最外层这个div它就是什么,它就可以当做容器,因为我要给它做什么,做一个网格的布局,那它就是我的容器啊。那么什么叫项目呢?Div里面的每一个子的div看到了吗?Div里面是包含子的div啊。
02:26
哎,这里面每一个叫叫做项目,那么这还要注意是还P那项目呢,P项目是项目,什么叫这里我说能容器的资源。DNA溶剂的话,那么这元素是不是就是,那么是不是它的这个元素啊,这不能包含什么,不能包含这个项目的子元素,谁的项目子元素,这里面的P是不就是项目的子元素对不对?所以这里边也说了,P元素就就不是项目啊,而且格瑞的布局只对项目生效,只对项目生效,所以大家记住我只要是干嘛把它啊,把这个容器定义好以后,那么接下来只是对里边项目进行什么进行生效啊,而且它。
03:13
这里咱们说了,在这个格格里,它什么跟行呢?这里面标这个标行,这个蓝的是列。那么一行的你看有网格对吧,比如说条线,二条线,第三条,第四条线,OK,是不是三行,第四这么产生长个一两三行,那么同样我要有有列一条线,两条线,三条线,然后四条线,那么四条线的再生是不是会产生123列。对不对?哎,这就是咱们的网格布局,你比如说像我们下面这幅图,你看好了,这幅图里边变这个做的什么123456789,对吧,这种效果用网格布局就特别快啊,那如果要用深入布局的话,那可能是我们要怎么去看怎么看的,对吧?第一我们要量好它副类的这个宽度,然后副类里边可以干嘛呀,只能容纳三个子类对不对,然后它这样可以排,但是大家知道既然是伸缩核弹性盒嘛,我浏览器一伸缩样式肯定会变。
04:19
哎,所以他再去做任务是怎么样,比如说如果深和招片一个里就让各容器里三个项目。这一个对吧,三再来一个三又一三对吧,再来一个三又三,是不是这么做才能做出这样的一个效果,但如果用网格布局呢,那就不用了啊,咱们来看啊,我给大家演示一下网格布局。在这里面。新建一个。叫做呃。GRI。好了,这里面写了网格不局啊。网格不好,OK,然后这里边咱们一样有个selection叫做井号BOX1,然后在这里边呢,有三,我我换一下吧,有三个div对吧,Div分别是一。
05:04
23OK,先写三个啊,那么现在咱们来看目前啊,我们现在。刷新是不是这样一个效果,好了,那接下来干嘛?我给它来设置一下style标签井号BOX1,我给它来一个BDR包的一像素实现的红色,好了,那么现在我们来看棕泥。OK,你看这里边是不是每个元素占一行,因为都是div,对吧?那么接下来我可以给干嘛进行网格布局,它是不是就是我们的容器对吧?这里边每一个是不是就可以当成项目,那好了,我给他做display。I,好了,当我设置完以后,现在你再来看刷新。有变化吗?没有吧,哎,因为我说了,在做网格布局的时候,你虽然声明这个这个容器是网格了,对吧?网格布局,那么你必须要指定什么,指定它的行与列啊,指定它行,那好,我们需要通过这两个属性来指定行,一个叫做GR temp。
06:01
Co它是来指定什么指定列,我这里面需要有几列,你看我123如果并排来算的话,我这里三列,那OK,我就告诉他,我这里边要有三列,那么每一列叫做100像素。100像素,100像素,每一列我给他100像素,那现在你看我再来刷新。你看看不出来什么是吧,我们给他一个背景颜色啊,来井号FO1里面的div,我们给他一个B,给他一个yellow,呃,Pink吧。这个紫色也行,好了,现在我们再来看啊,刷新你看。每一个div是不是看不出来啊,好像都挨着了是吧,我们给他单独的去设置一下吧。Div。冒号first child,这是第一个是紫色对吧?再来井号BOX1里面的div冒号叫做last-child。这里边再来一个,呃,Background yellow green,然后再来一个井号b fo裹SE里面div里边的NTH杠的给他第二个,第二个我们给它设置什么颜色,比如说设置一个红色好了,那现在你看啊,我这里边每个颜色已经加以区分了,对不对,哎,那么这只是设置了什么,你看我每一个。
07:17
行行对吧,因为其实这里面不叫行啊,你注意这每个元素这么大是不是就列,也就是说它这个列是不是就一百一百像素,对吧,那么接下来还有我是不是还要设置到行高,那么行高。GR。ID-tmp。行肉啊设置行高,注意我这里面几行,我是不是只有这一个元,这一行元素,那就是一行呢,那这一行我是不是只设置一个就行了,一行嘛,100像素来走,你你看现在我当前这里边是不是就有个100乘100像素了,对不对,哎,当然我也可以给他,比如说我给他付类。让它宽,呃,这个高一点吧,高度给他200平啊。
08:00
懂你。OK,点错了吗?He?IGD啊,好嘞,让它高一点你看。哎,这是不是咱们就挨着了,哎,而且它很快看到了吗?那么咱说了,像刚才那种九宫格的方式,那这里边CTRLCCTRLVCTRLV,然后这里边应该什么123456789对吧?哎,我这里面总共九个,但我分成三列,这没问题对吧,高度先取取消了啊,高度取消以后这回再来看走你。你看啊。456。789看到了吗?这个九注意啊,这个九是不是变成什么了,变成最后一个元素了,所以我这里面设置最后一个元素的时候,它是什么,它是变色的,那OK,咱就别设置它了啊,给它取消掉吧。这个也取消掉,我重新统一设置一个得了来,叫做刀了。哪有刀了,井号?不是一。BV给他一个BGRN,那直接给他一个PRPV紫色,然后呢,我让他这个呃,Marr减马九,上下左右都为十像数,顺便他们拉开点距离来走你。
09:09
你看好了啊,现在各位是不是只有456789,你看他是不是没有高度,为什么没有高度,因为他说了这里面咱们只给了一行对吗?所以我需要给他几行,给他三行一百一百是不是这么给才行啊。那现在你看刷新是不是才可以。你看这个九宫格我是不是马上才做出来。对不对,而且咱说了做这种九宫格确实要比什么,比我们这个用深中和的方式要方便,对不对,哎,这就是网格布局的这个。实例啊,网格布局实例当然啊,咱们说了,那这种网格布局啊,你看我每次比如说我要是多点列呢,比如说咱们来看啊,我不要这么多列了,我说我再来100,我要五列吧,啊再来100,再来100是不是五列,哎五列的话,现在行,我先不给注释掉了啊行不给注释掉,那现在你来看来刷新。来,你看好了,这是不是五列?我总共九个嘛,啊对,九个的九宫格吧,九个啊,你看上面摆五个,下面摆了四个,没错吧,那么一样,我这回再给行呢,那给行数吧,是不是就给两个就行了,那这里边你相当于再来一个GR RD template-temp。
10:15
Rose,两行嘛,每行是100对不对,那现在你看好了来刷新是不是这样的,哎,但是如果我要有九行,我有九行,我要写九根。这个是不是有点太麻烦了,哎,有没有简单点的方式呢?有看好了,怎么叫简单方式啊?叫做GR,然后呢。杠tmp。Time p。TPLA杠这个对吧,排它的列,那么列怎么排呢?你看repeat,这个repeat是一个函数,那么我们可以干嘛呢?去调用这个函数,往里面去传参数,它接收两个参数啊,那参数叫什么呢?一个参数叫做。呃呃,重复的次数,比如重复几次,我说重复九次啊,第二个参参数呢,是重复的值,你要每一个对吧,每重复这一个你要多少像素,我说100像素好了,那现在你来看我整个整个九宫格是不是已经占一行了。
11:13
看到了吗?哎,那同样这个时候,比如说我让他阳他乘100乘100呢,那G点这个close Rose直接给,因为本来就是一行嘛,我就直接给一个100是不是就可以了。你看现在是不是一行下来有这个九个单元格看到了吧,哎,那么OK,那他能这样还可以怎么样呢。我还可以自动填充啊,什么叫自动填充呢?这里边我需要也是需要,需要配合一个这个东西啊,叫做GR,我需要配合一个关键字,呃,不对,不是,行了,我还是以列为单位啊,Colu。MNF好了,然后这里面还是用repp的,那么前面的参数叫什么呢?叫做auTo Bill什么意思呢?自动填充,自动填充,然后后面多少个呢?比如说后面我要五个啊。
12:02
嗯。啊,不能500啊,100PX100PX好了,那这个时候我们来看。刷新。有变化吗?All to fair,然后我们给他100PS来再刷一下。不行,我的这个容器太宽了啊,因为你看自动填充嘛,它我这里边才九个对不对,我肯定是什么,肯定是这个要填满以后才行啊,我这样我把什么呢?把这个负的元素缩小一点来WT,比如说我就给他800常数啊,那这个时候肯定是不够的,对不对,因为我这个总共九个嘛,再加上有这个内间距也肯定是超过800了嘛,来这回你看刷新。刷新以后,你看我的下一行是不是自动下来了,对吧?哎,它自动填充填充满了,就是在你的第一行给它填充满了,看到了吧?哎,这就是咱们自动填充啊,那么自动填充完成以后,还有什么样的,其实我们还可以在这干嘛再进行设置,比如说。
13:01
呃。这里边我把它注释掉了啊,我用换另外一个叫做GRR。ID这里面我可以给什么呢?给他这个。R这个关键字啊,这个关键字是什么意思呢?就是表示一个片段啊,一个片段也就是说,比如说这里边我要有我看啊,我这有这么多列啊,那我就设置两列啊,比如说第一个1FRFRFR啊,然后第二呢,2F好了,那现在我们先看啊,先看来。刷新。你看好了啊,12345678到九,你看好了,我第一列我说了ER对不对,ER,那不管是它多大,它是一个相对单位对吧,它就是这么一个片段,那么我2FR它一定是一的二倍,看到了吗?哎,那同时比如说我121我也都可以给这种F2的方式,那你看它们两个就什么就相等了。看到了吗?哎,就是也可以给F2的方式啊,当然我这是一直给的是什么是列接RD,我可不可以给行呢?也可以给行呢,行,我这里面几行,这里边有这行太多了是吧,那OK,比如说我这里边就F2给一个啊,那现在咱们来看。
14:10
刷新。诶一二给行让行做相对没有用啊,给100只能针对列。OK,你看我的一是不是100。对吧,哎,这个高度相当于高度是100了,对不对,但是宽度呢,它是占满的啊,宽度占满,所以在这里边列是不是相当于一直我们是针对元素的一个宽度,对吧?而这个行呢,是不是相当于我的高度,因为行我给了100像数,是不是就这个元素高是100啊。哎,这就是咱们网格布局啊,常用的这几个属性,当然啊,网格布局要用的属性很多啊,可不是就是这么几个,你比如说。像我们这里边啊,其实包括这个东西,它有很多写法对吧,就是加ID杠,呃,Time杠还是行啊,还是列C。U Ms,比如说这里边我这么给他给这么给呢,比如我还有repeat吧,然后我给两个两行两边的这个两。
15:05
重复两次啊,然后呢,重复两次,然后第一个呢是100,第二个呢是。朴实,第三个呢?第三个60吧,好了,那你看这是什么意思啊,来你看好了,走你自己来找规律啊,你看第一个是100,第二个是50,第三个是60,我说了是不是重复两次,两次你看这个第四个是不是就相当于这个,这个是又100,然后又50又60对不对,那如果我重复三次呢。走你这些是不是都跟着上来了,然后每一个你看50,然后这是不对,这是100,这是50,这是60吧。看到了吗?哎,就是它有很多种设置方式啊,这个大家注意了解就行了,当然我没给大家介绍那么多啊,你只需要知道行跟这个列,这这是列啊,列跟行怎么来设置就可以了啊,只需要知道这些就可以了,包括我们设置的EFR,设置这个PX对吧,包括用函数我还能怎么样,我也可以设置百分百百百分比啊JID,比如说这个列我要它多少呢?我让他repeat,我直接还有repeat了啊三个,然后每个是什么,每个是比如说这个33.33%。
16:13
是不就平均了,哎,那现在你来看啊,我来刷新你看33.33对吧,那么有它还有什么,还有这个行的GR。ID。杠,TP杠。Rose对吧,哎,它的高度,那么高度我是不是也可以repeat一样,还是形成三个,然后33.33也是33.33%,那现在你再来看走你走你诶注意为什么高度不好使啊,因为高度注意你有它,它有高度吗?当前这个元素只有宽度有高度,没有高度对吧?没有高度,你这个百分之三十三三是谁呀。你百分之跟谁比的百分比啊,是不是没有这个,哎,所以这里面比如说我要给他一个高度啊,给他多少呢?给他一个这个300像素的高度,那么这个时候咱们再来看走你。
17:01
你看它的高度是不是就有了,哎,3.33%高度是不是就来了,看到了吗?这就是咱们的网格布局啊好,那咱们来看一下,那么咱们使用网格布局,当然啊,这里边我们给大家演示这么多,我这块是这个间距,行的间距跟立的间距,我是不用Mar和patternyon给的,哎,那么网格布局里边也一样可以去干嘛做它位置的摆放啊,那么大家知道有这些有就行了啊,我们不需要去实际了解了,那么要注意一个什么呢?设备网格布局以后,容器的子元素,也就是这个项目的float这play啊,还有什么Facebook playout table以及这些属性设置通通失效啊,也就不再好使了啊,所以一旦使用网格以后,大家就不用再去使用这些属性了,因为用也不好使了啊,好,这就是咱们的网格布局啊,那么网格布局我们了解到这里就可以了,那么接下来呢,我们就开始以我们这个深收合的方式进行我们项目页面的实战布局,好,那这节课我们先到这里。
我来说两句