Web前端入门教程 27 CSS教程 22 组件 学习猿地原创

现在是半瓶吧，小瓶。全屏了吗？好了。然后咱们来看一下这个。网格布局啊。那么这个网格布局呢，这个一般都叫他什么，这叫念啥三对吧，甭管叫三格系统布局，但它真正发音它叫大格系统布局。栅栏它是炸出来的，还记不记得，我刚开始给大家介绍HTML的时候，我说了，以前在去我们以前就是3.2版本的时候用的这个布局，就是使用的什么表格布局，对吧？还记得吧，当然我说了，我说表格布局有一个有一个B端是什么呢？就是它的这个代码的冗余量太高了，对吧，因为你看我们要写表格，咱们只要要写行列，它必须是相等的。

对吧，然后呢，我们可能要进行哪一行啊，或者哪一列的跨行或跨列的一个合并，对吧，然后最后呢，就是勒出那样的网页啊，所以这个三格呢，也类似于这样的一个情况啊，那么咱们来看一下。网格布局啊，格瑞是最强大的CSS布局方案啊。那么它将网页划分成一个个的网格，可以任意的组合不同的风格啊，不同的网格，然后做出各种各样的布局，那么以前咱们只是通过复杂的这个CS框架去达到效果，现在呢，浏览器内置了，就是浏览器支持了啊。那么格瑞的布局与这个F布局有一定的相似性，就与我们的深热核布局有一定的相似性，都可以指定容器内部多少个项目的位置，也就是说在我们去使用这个格的布局的时候，同样也会涉及到什么呢？涉及到容器和项目，对吧？在我们之前去讲这个fix布局的时候，我们也说了，我们一定要清楚，你使用这个生和布局的时候，你一定要清楚什么是容器，什么是项目。

对吧，那么在这里边也一样，也存在着这个概念，你要清楚到底谁是容器，谁是项目啊，但是呢，现在基本上页面布局要么就是纯的是使用fix布局，要么是什么呢？就是用网格勒出大块来。类出大块以后，里边的所有内容都是fix布局，就都是盒，明白什么意思吧？啊，都是这种方式，因为网格布局里边要计算的内容比较多，它的代码也比较比较多，比较长，然比较复杂，所以呢，现在很多没有，就是如果去写原生的情况下，没有是使用格瑞的布局的，都是fix布局。那么一般我们要结合成框，结合到框架里边的话，那么框架里面是已经把这些代码做了一个封装啊，那么可能我们就是一呃一个命令就代表着这一个布局就能实现啊，所以他会精简说，一般的时候我们在去布局的时候，都是用框架来做布局。

然后呢，这布局这里边说fix布局是属于轴线布局，对吧，因为我们都是切到积到一个水平线上，你比如说在这里边我有这么大诶。有这么大一块能看到吧。能看到吗？画的，然后呢。有这么几个盒子，这是不是一个轴线呢，一个横线的布局啊，对吧，而这里边。你看它只能针对项目，只呃，它只能指定项目针对轴线的位置，可以看出什么是一个一维布局，而格瑞的布局呢，则是将容器划分成什么呢？划分成行和列。看到了吧，画完这行和列画只要产生出行和列就会干嘛，就会产生出单元格吧，对吧，你想一想我在这里面，比如我说三行。对吧，两列那是不是只要我这么一连完，这是一个单元格，这是一个单元，这这也是这也是，这也是，这是不是单元格就出来了，对吧，就是这个意思啊，然后。

然后指定项目所在的单元格，可以看作是一个什么二维布局，格瑞的布局远比这个生布局要强大很多啊，那么一样，但大家记住，只要它强大，那么我们要写的代码量就一定会增加的啊。那么咱们往下来看，这里边有一个容器项目，这里边有个基本概念对吧？那么采用网格布局的这个区域称为什么称为容器啊？谁是容器？就是它外层，比如说我要给它进行网格布局，那么这个div是容器，谁是项目呢？它里边的每一个子元素是项目。能明白吧？那么同样这里面还被包含了一个PP，是项目吗？不是对P只是什么？只是这个项目里面的一个标签而已，对吧，只是这个项目里的一个标签而已，所以大家一定要区分开谁是容器，谁是项目，只要把这个区分开，那么这对于你们自己去看手册，去照着手册练网格布局都会都够了。明白吧，这里面就是强调这么一个概念啊，然后这里边说了上面的代码最外层的div元素就是什么，容器内层的三个div元素就是什么，就是项目，那么要注意的是，项目只能是容器的顶层子元素，你看这个div是不是就是这个容器的顶层子元素，注意啊，里边三个这这三个小的div是不是这个。

这个div容器的顶上子元素能区分开吧？哎，然后呢，不包含项目的这个子元素，比如上面代码的这个P元素就不是什么，就不是项目啊，格瑞的布局只是对什么对项目生效，所以它只是用来做布局了啊，那再往下来看容器里边呢，你看水平区域会称为什么称为行。看到了吧，然后呢，垂直区域会称为什么称为这个列，看水平的这个三色域就是我们所说的行垂直区域就是我们所说的列，对吧，那这个旁边有这个，这叫什么，这叫线，这叫什么色的线，灰色的吧，对吧，这一条条线，这叫什么呢？就被我们称为叫做网格线，网格线，那么最终网格布局就是通过这些网格线把它勒出来这些格子，然后我们开始去往里面去填写内容的。

明白什么意思吧，哎，那么这里边说。你看一下这里边我给大家录了一个简单的这么一个小图片，那么对于以前我们要想做这种123456789这样的一个图片的话，我们在用深盒的话，需要怎么去做呀？生活怎么做？让它换行是吧，首先呢，给它变成生成和，变成生成和以后呢，我把最外层的负类给它设置一个宽度，比如说这个一就是100乘100的，二也是100乘100的对吧，那么我就给他设置为的话，设置为这个这个这个300是吧，然后让他干嘛呢？让他强制换行呢，他就会123456789这么排列下来了，对吧？但是如果用网格的话呢，它更它就会更方便一些，咱们来看啊在这里边。

Leson lesson，幺零。

好。好，新建一个文件，比如说我们叫做index。小不小？字看的小不小。不小不挑了。好，给他缩进一下。然后比如说我外层有一个selection对吧，然后里边我套的是div。乘以几个九个div是吧。一。然后二。345678还少一个。Div这九个OK，总共九个div啊，一个外层一个元素，那么现在咱们来看，如果我要想针对他像刚才那个看到那个效果进行布局的话啊，死掉标签，当然啊，我们就不用网格布局也能不出那样的效果，对吧？咱们有各种办法，你是用浮动也行，你用定位也行，对吧？用那个呃，Display也可以对吧？或者是用这个生核也行啊，那现在咱们来看啊，这里边咱们说了谁是容器，Selection是容器对吗？那对于这个容器，也就是它的这个负类，我给它一个宽高，为了大家能看到啊，比如说我给的宽度的话，多少给他800像素吧。

900。900像素啊，然后呢，高度。高度不给了，高度不给了，它里面的子元素是不是会给它撑开啊，对吧，然后呢，同样在这里边，也就是点不用点是selection里边的这个div，我们给他设置一下width宽度100。高度也是多少100对吧，然后BA background我们设置，比如说都给它设置，统一设置红色的啊，那么咱们来看啊，现在的块它长什么样子。

好了，你看123456789是不是一个纵向排列的对吧，那副类呢，我再给它加一个边框啊来BD啊，包两像素实现的blue蓝色边框。好了。那是不是在这呢？那么咱说了，如果说这个时候我要用网格布局，咱们来看在这里边this play等于这个great。保存保存完以后啊，我们先去看啊，看它的这个不断的这个变化，现在只是说明我它是网格的，但是我有。做横向和纵向的划分吗？还没有对吧？那么好了，我现在开始给他来做横向和纵向的划分。瑞的GRRD杠。嗯。这个这个。

Rose。Rose是横。扣子是列对吧，那我就先横向吧，横向咱们一排是不是三个对吧？哎，那OK，三个的话，我要给他多大呢？他要占多少呢。想想这个时候其实我还是挺难算的，对吧，因为刚才我们说比如说把它占成100乘100的，那么这个1234这几个div，其实我已经给它设置成100乘100的了吧。这几个是不是我已经给它设置成一百一百的了，对吧？哎，所以说在这里边，那比如说我再设置一下，横向的就是一百一个单元格呗，一百一百我是不是要三个对吧？那么纵向的呢也一样，GRRD-complete Co，比如说我也先给他一百一百一百好了，保存，保存完以后，现在我们看这边是不是就有了。对吧，只是这几个颜色是什么呀，是不一样的，不是都是一样的，对吧，那咱把颜色给它变一下啊嗯。

来咱们先看啊，我把这个先给他去掉。窗高不要了，不要以后注意这块有变化吗？没有对吧，因为这块我已经给他勒出了100乘100的格子，所以这一个div它就是100乘100的对吧，所以框高我不要了，然后第一个div。咱们冒号first的就是红色了啊。To selection，然div冒号。NTH。刚脆的吧。第二个。然后ec。然后刚才你们在考试的时候是不是问了我第八题写的为什么不加分号？对吗？有人问过我吧，那么你看啊，如果在这里边我就不给他加分号，因为这里边就这一行问题，那是好使的，你记住最后一句，就你前面写再多这些东西，最后一句我不加分号，它依然是好使的，看到了吗？

啊，所以你一句的时候是可以不加分号的，你多句的时候，那么每一个后面你一定要加分号，但是记住最后一句也可以不加，为什么？因为浏览器当执行到这个括号以后，他会认为这是这一句的结束了。明白什么意思了吧，啊，那再往下来第三个，第四个ec select，然后div冒号NTHNTH-Q的第四个。我好像不用写那什么吧，不用写这个selection都可以帮我选择到了吧。对吧。

但是你注意我现在用了网格以后啊，网格在布局以后，它有这个显示，就是这个内容是不是没有，还是属于居左上的对吧。NTH杠的第七个。然后SEC。NTH。刚测的第八个。还有最后一个。第九个。好给这个颜色，OK，那么现在九块我也搞搞定了对吧，那么搞定以后一样，那我能不能让这个元素的内容也在这里边变成这个叫什么呢？就是变成这种。

嗯，水平和垂直都让它干嘛，都让它居中的方式也是可以的啊，就是跟跟伸缩和是一样的，你伸和怎么变的，咱们在这里边也可以一样，但是他给谁设置，是不是我要想让所有的都去变化的话，我是不是直接给这个。啊对，给这个负类设置是不是就可以了，对吧，所以就是。等于你看水平方向，诶对吗？谁居中了。是不是整个和居中了，对吧，那再来还有什么呢？还有a alone at time。啊，我也给他一个center，但是这个给center就看不出来了，哎，能看出来它会变小，因为啊，我没给对，我没有给这个高度啊，我只是拿格勒的对吧，那你现在看，但是这里边啊，你可以去算一下。基本上我们100乘100单元格是这么高。对吧，它是不是相当于在这里边是居中的，对吧？哎，那OK。

这两个。一样啊，他所支持的属性我给他还原回来啊。Just，我就拿这一个测试吧，我们之前在生成盒里边都学过哪些什么star对吧？是不是开始错，还有什么呢？呃。结束结尾出吧，对吧，然后还有什么，还有这个，呃，开始结尾居中就不用说了，对吧，应该还有一个。这里面可没有这个啊，哎，有啊，还能真爽，我记得这里面没有这个了，这里面是有一个叫做。Just content。有一个默认的这个。这就是默认的，呃，默认的情况下并不是这个叫什么STT，默认时候并不是STT，默认的时候是这个STCH，这是默认值，明白吧，然后这里面呢，既然有这个比between，它也一定会有什么呀，Around。

对吧，两边对齐，中间留有空白，是这样吧，但一般在去做伸缩，如果做网格布局的时候，这样的属性它会很少去用，因为网格布局它有那个，刚才我给大家看的不是有那个线嘛，对吧，它会用那个线去指定它在第几格，第几格去显示啊，你比如说后期我们学到这个，呃，波拉框架的时候，那基本上比如它会默认啊，把一个横向看做多少呢？看做12个小的单元格。12个小时单元格，那么你想让你这块占几个，比如说你看这不是容器吗？对吧，我想让它占两个，那我直接给个Co杠二就代表了，它是代表两个单格大小，就是这个意思，明白什么意思吧，但是呢，在这里面其实。也一样啊，就这里边你看我在划分的时候，我给的什么东西，我给的是它100像素对吧，就是每个格子代表是100像素，那实际上我能不能不去划分100像素呢？你比如说我用个百分比啊，咱们来看它的宽度我给的是多少。

啊，900这对吧，那如果给了900的话，你看好了，在这里面我不用了，咱们不就三个嘛，三个是不是就是33%。33.33呗，对吧。33.33。你看我给个百分比，看看行不行，来33.33。百分号。没有错吧，好了，保存，保存完以后，现在你再来看它的格子。三十三点三三三三点三三三三是多大呀。我给的是。好。这个也给了33.3。

CC，我把这个底下这个也给了。对，我这个给的是裂了。好了，这回是不是拉出横向来了，30%伤害多大呀？是不是是100的这个不是100，是900的这个1/3对吧，我纵向还是给100啊。重要我还是给他100，你看这是不是900的这个1/3了，对吧，哎，你可以去这么设置，甚至我还可以怎么去设置呢。他这里边还给提供了一个单位G杠。叫一。二。1F21F2好了。保存一下。保存完之后，你看跟我刚才的33.33%是不是一样的。看到了吗？啊，就是说这个一个ER代表什么，代表就相当于是百分之三十三十三对吧，它的就是它会把这个属性总宽度，它会干嘛呢？平均给你分成多少，分成三份是这样吗？那同样那我这块能改吗？比如说我这块改成2F2。

那你看整个注意啊，我改的这一个这个表格原理是一样的，只要有一个列变了，是不是整个这个宽度都会变了。看明白了吧，啊，这就是这样网格布局，它只是这里边多了这么一个，就是这么一个属性而已啊，当然了，它还有好多啊，比如说嗯。叫做。G。I。它也有，它也有那个阴烂，大家记不记得我在去讲play DNS p，然后这个flex的时候，是不是还说了一个叫做阴杠fle，记得吧，哎，他也有啊，他也有这个我就不给大家演示了啊，没什么用啊。这里边你可以随便去找任意一个play，这个百度文库布局也行，你是看哪个都可以对吧，或者是你看这个这个CDN博客也行，对吧，看哪个都可以，你随便找一个进去，进去以后你上这里边来去看。

嗯，他这里面只是案例啊，也有介绍。看到了吧，这里边也会给我们去介绍啊，每个比如说100像素的，然后这个repeat什么意思，就是代表了评分三份，每个是100像素。看到了吗？啊，平分三倍，每个repeat是一个重复的函数，啊，是一个重复的函数。这个介绍呢，我记得有一个介绍的挺细的，叫。

打开知乎吧。Repeat的函数。还有这个auto to fair out fair干嘛呢？就是自动填充了。你看啊，还有这个，呃，Min max函数这个呢，他是干嘛呢，是设置这个网格，它从一个最小值到一个最大值。啊，一个最小值，它这里面接触两个参数，一个最小值，一个最大值，你看这会给了吗？最小值300，最大值多少，2F2，那2FR多大谁也不知道。对吧，他需要干嘛，根据你的实际情况去看啊，根据你实际情况去看。你看这里边不也布局了这个阴烂的格瑞的，你看如果正常我们用的格瑞的是长这个样子的，对吧，我上面的内容，上面的内容在上面，下面内容在下边，但是我一旦使用了这个阴兰格瑞的时候，它就变成什么了，是不是就变成横向的了，看到了吗？左中右是变成这样，它就不会怎么样，不会独占一行了吧？哎，就是这个这个这个区别啊。

剩下的就是你的各种划分了。好像都看过了呢。它有一个属性可以设置。摆放的。With。你看啊啊，这两个这两个属性啊，你看可以设置这个扣的表示什么呢？表示先列后行，就先以列为单位，你看one two，它是纵向的，看到了吧，One two这么去排列的，One two three four嘛，然后因为这个six是不一样的，Six是比较大的嘛，你看five six six完事以后在seven，它是直接上到这里边来了，看到了吧，就是这这个的区别啊，然后呢，那么还有一种是什么呢？还可有什么先行互列，先行互列就是Rose。

呃。这个。哦，那我怎么没看到他设置在哪设置呢。这儿呢？然后你看啊，这里边是one two three four five seven seven seven这块正常应该放谁呀？是不是应该放six对吧？但是这个位置能放下six吗？放不下，Six挪下来了，但是这块还有空，所以seven会上到这边，这是什么？先以行为主，再以列为主，看懂了吗？但是这些呢，其实你了解就可以了，因为这些用的都比较少啊。然后这个just I咱们用了吗。

咱们刚才用的是哪个是的吧，啊just time咱们看一下啊，这个属性演示地址单元格，看好了属性设置单元格内容的水平位置。看到了吗？然后是左中右对吧，然后呢，是这个垂直的位置，就是什么上中下对吧，那咱们把这几这两个属性加上一样，我还是加到了哪儿啊，加到了这个。负类里边给他一个center，然后我们看一下我们自己的。是不是他因为我没我本身没有给公告。对吧，本身没有给框高，但是它是这个元素，相当于在这里面是居中的，对吧，那同样再来还有一个。不对，是鹅愣了吧？那就没有了。啊，这就相当于整个它在这个元素里边，因为他没给框高嘛，整个在这里边是不是都是居中的，对吧，那给个框高你再看。在这里边SEC selection里边的div，给他一个100也为100好了。

它是不是也一样，设置什么设的是这个元素的，不是叫元素，应该设置的是这个容器啊，不是容器是这个项目的位置，对吧，并不是说项目里边内容的这个位置能明白吧？啊，它并不是项目里边内容的位置，那内容位置怎么能调出居中啊。啊。对，两种方案啊，要么你把它也变成项目，把把它变成什么，变成容器，对吧，就相当于我们在做深轮核的时候，深轮核的时候，有时候我们要用深入和居中，是不是也会这样呢？比如说把它再变成什么，再变成深入核E-F是这么去设置的，对吧？然后里边呢，我再用它什么用什么S去去调整，是不是这样的，对吧？所以它也一样，也是这么回事啊，要么呢，就是什么呢？因为它本身还是一个快数，你也可以直接在这里边test杠。

Center是不是也能居中看到了吧，然后还有什么，哎，对，最原始的方式LALA。害的。意外是不是也能让它垂直居中，看到了吧，就是方式有很多种，你可以选择去用深入壳的方式去给它设置居中，你也可以不用深入方式去去用，看你自己再去用的时候，你想怎么去用，好吧，能清楚啊，什么意思吧，哎。呃，属性呢，大家不用去记那么多，它这里边深入核的属性比较多，你下来以后，你要是愿意自己看的时候呢，你可以自己看一眼，你不看呢，你只需要知道我笔记里边给你记的这三个属性就够了，四个属性看到了吧，只需要知道这四个属性就足够了啊，然后呢，这里边说了要注意的什么呢？就是设置网格布局以后容器的子元素，也就是我们所说的这个项目。项目是谁呀？是不是这里边的每个div对吧，他们的一些属性将会失效，哪些属性呢？Fla的属性跟play属性将会设置失效。

明白了吧，啊，就是你一旦用了这个网格以后，那么这些属性就用不了了。能理解什么意思吧，啊这个要记住啊，所以你再去自己再去设置的时候，你一旦设置了这个，你别设置，再再去尝试用它，你说这个不好使，这个不好使是有原因的啊，人家已经告诉你了，只要是他变成了这个网格的话，那么浮动和这个的这种这些就不好使的。能明白啊，所以说你在用的时候要注意啊，注意这块就可以了，剩下的基本上就没什么了，网格的话你就记住这几个啊，这四个就够用了。知道吧，因为在后期写的时候，你根本写不到这些东西啊。我们根本学不到这些东西，这些东西都会被封装好了，所以这种原生的东西呢，你就了解一下就可以了，能理解吧，嗯。好了，那再往下来，我们再来看什么呢？再来看一个这个。哎，不能赛。我们的这个。主。

然后呢，这里面每一个我都给大家去带了这个主件的地址啊，当然啊，不是都是，我不是都选用了一个这个主件裤子，我是选了好几个主件库啊，然后呢，我先带大家看一下这个主件的地址。也就是说以后我们在做项目的时候，那么一定会用到按钮对吧，就像咱们之前布局页面的时候也用到了按钮，那么那个时候按钮都怎么办，都是我们自己去写的吧，对吧，各式各样的，然后每个人写的也不同。诶，为什么打不开。有就是慢。

嗯，这个慢。

这个快。这个进来的啊，VNT是基于vuee的一个这个生态啊，那么一样，你看这里边也有，比如说八塔按钮看到了吗？这是各式各样的按钮，比如说主要按钮，成功按钮，对吧？默认的按钮，然后危险按钮，警告按钮看到了吗？然后还有这种朴素的对吧？还有这种禁用的，你看禁用的放上去以后就用不了嘛，对不对，然后还有这种加载状态呢，然后方形的圆形的，你看是不是各式各样的，然后这个尺寸，你看尺寸有大方按钮，普通按钮，小型按钮，看mini按钮是不是都有啊对吧？那你不知道怎么用的，你可以看这边啊，这边有个代码演示，只要是说你前面这个标签你不用看啊，这个标签咱还没学过呢，这是vuee里面自带的标签，跟咱现在没关系啊，你就可以理解为这个标签就是一个div好吧，然后呢，只需要加一个class等于这个的就行了。

明白我说什么意思吧，就是只要他加一个class等于这个就变成什么了，变成主要按钮加一个class等于这个就变成什么了，成功按钮加一个class等于这个就变成什么，默认按钮，明白我说的什么意思吧，啊所以说你想这些按钮它都给已经做好了，那你想用哪个按钮，你只需要干嘛呀，你只需要把它的这个。哎，这个类型给它加上来就可以了，就是这个意思。能明白吧。所以咱们要做的时候也要做这些，我看这里边出没出出来了。我截的图截的就是这里面的啊。然后你看这里边一样也有什么禁用的按钮对吧，然后有这个呃图通的对吧，还有这种图标的，那图标的话大家都知道啊，图标那个按钮的话，肯定是你要给什么自体图标才可以才能变对吧？那这个时候你就需要去下下载一些这个阿里的自己图标库下来了啊。

然后这里边还有这个图标按钮，它这边也有图标按钮，按钮组的话咱不有，然后加载的，你看不同尺寸的是不是都有啊，看到了吧啊，当然了，它这里面是可以给你提供一些参数去改的啊，但是咱们现在没学GS，我们改不了，我们就只能把它做死了。明白什么意思吧，哎，那OK，那你大概看过这个就可以，就是这里边的主角都是在这里面去找的，你比如说呃，按钮完事以后是什么这个。标签对吧，那。我看一下他给的标签在哪呢，切记。看到了吗？啊，都在这里面找的，你点过来，你看就是这样的标签对吧，然后包括以后你们要做表格的时候，你看表格，你各式各样的表格都有了，看到了吧？啊所以说不用你去写，你比如说你想做一个开关，你看这开关。

人都是给你做好了，你直接拿过来用就行了。明白后面是什么样的情况了吧，但是你要想在复制它之前，你肯定得把底底子打好，才能有这个复制的资本，是这样吧，哎。然后比如说你想用这个时间的选择，你看这都有。对吧，这些不用你自己去写，看到吗？所有的都有，然后还有什么滑块的。滑块表单学过吧，对吧，人家直接给我们做出了这样的样式来，你可以任意的去选择去啊，然后什么上传的。对吧，你看同样上传的照片墙的缩略图的各式各样的，你看全都有啊，包括这个评分的看到了吗。啊，这个评分呢，我也也给大家截了，但是我忘了我是截的是哪个里边的了，是不是里头我忘了啊，是不是这个element里的我忘了。这个下面肯定有。啊，这这了吧，看到了吧，这个这个东西是是哪来的，就是一个字体图标。

啊，自图有没有星星，有没有心对吧？哎，正正常情况下，那就是你这肯定是通过GS来做的啊，你鼠标经过了几个，就是或者你点了几个，它让它前面的所有的都变色，是这个意思明白吧，那咱们做的话，你就直接给他三个变色，三个变色，三个变色。明白我说什么意思吗？直接控制好这三个变色就可以了，就这个意思啊。半个的话，它是改变了吗？改变了这个半个他给他拼的嘛。有啊，你淘宝上评分评不了半个分吗？能吧，三星三星半可以的啊，这些都是改的，后期咱们都能做啊。然后十位是开关对吧，还有滑块，然后再一个就是有的时候大家在做的时候啊，可能说不知道这个怎么点，这个他点不了看到了吧，这个点不了，这个是满星。看到吗？他办办不了半星的，他一定是拼凑的，他是两个拼凑出来的，明白吧，你一个就是一个一个字体了嘛，你怎么可能像他说我怎么可能能拼出半个来。

不两个元素呗，各截一半吗？各结一半吗？你这个只让他写，比如说这是一个div，这个div里面我只写了这一半，或者我写了这一个都行，对吧，然后那边这边我就是相当于一个div里面。这一个div里边我是不是可以放多个元素对吗？我一个元素放了这么大，那个元素我放了这么大，这不就是一半一半吗。能明白了吗？然后。这一下给我打乱了，我这有笑脸的，我刚才要说到哪来着。忘了。One。我看有没有我要强调的。

这里边有一些大家是做不出来的。你比如说这个。呃。好了，你比如说这个我点击自定义内容，你看到了吗。但是点击出来的看到了吧，那你就要考虑咱们现在点不了怎么办，Power power对power用power来做，就是how能实现的咱们就how实现好，实现不了的我们就直接做这个效果图。明白了吗？就是包括里边不还有其他组件吗？如果你好实现不了的，你直接把这个效果图给我做出来。能理解什么意思吧，啊，比如说像像像哪个的话啊。你比如说这这样的吧，这种情况下，这种情况它是一个遮罩层，对吧，只是说这种是单独的就是一个遮罩啊，你点开它就是一个遮罩，这种呢，是一个遮罩缝里面带点内容，就是你可以干嘛，可以往里面去去写东西的，来这里面找一下。

遮罩。看到了。这呢，来。你看啊。显示这射层，你看它就是一个折皱，看懂了吗？那这种情况下，如果你做不到点击的时候怎么办，你鼠标移动上来应该也不好使。应该是不好使，因为你要把因为咱们鼠标移动，让其他元素显示，必须是这个增成的子元素才可以吧，对吧，所以怎么办，这个时候你就直接把这个效果做出来。明白我说什么意思吗？啊，那包括这个呢，嵌入内容也一样，你看嵌入内容，嵌入内容它这个白色区域，代表这个白色区域是可以往里面去写内容的。

对吧，然后这个遮罩依然是遮罩，所以说你就直接做出这样的效果就可以了。明白我说什么意思吧，啊，就是不是说所有的效果你都能完完全全实现，现在还做不到，因为咱们还缺了GS，你像这些都是GS配合的啊，所以说前端的核心基础嘛，HTMCSS加JS是这三个，三大块必须都完成啊，咱们现在只是完成了两块，但是可以去伪一些效果了，你比如像这样的，我们直接做这个效果是没问题的，对吧？剩下只是差什么呢？差一个就是点击弹出的效果了。能明白什么意思吧，那OK，然后我们来看一下，我就以这个第一个为例啊。通过所学的HT和csi技术完成常见的五类按钮，如下图，这是一类两类，三类四类五类对吧？然后要求在这呢，看好了吗？根据文字的字数和大小，按钮大小随着发生变化，那么咱们说了做按钮的情况下，咱们来看啊，在这里边我创建一个目录叫做B8。

然后在button这里边，你要看好我是怎么创建的，你也要这么创建啊，Button这里边我们来一个DEMO做一个演示的，对吧，那同样在这里边他需要有什么，他的这个，呃，错了。诶，对，他的CSS。对吧，当然了，你这里边不光还有CSS，还有可能有什么，还有可能有放呢，对吧，然后还有可能有什么呢？还有可能有这个。呃，GS，但是这个GS咱现在肯定是没有的，对吧，那现在就是也就是说你在创建一个一个这个组件的时候，你这里边至少是要有我删除的，你至少要有两个。删不了呢。我刚才点的啥，我点的。也就是说你的一个组件的这个目录下边至少有这三个文件，一个是演示的对吗？然后这两个是什么是配合的。

一个是CSS的，一个是字体的，能明白吧，然后在这个CSS里边。创建一个比如说就叫做b button点。CSS。诶，我创建错了吧。右键style b button啊，这就是我写csi样式了啊，然后呢，这里边就是我要写这个叫什么演示的案例对吧？那演示的案例你在这块一样注释先写好，那咱们第一类按钮。这叫什么小圆角的？其实没什么太大区别，这第一类跟第二类吧。是吧，第一类第二类区别只是什么？一个是这个背景比较深，一个是背景比较浅吧，对吧，那你比如说我就这么写了，比如说一类按钮，第一类第一类。按钮，然后b To Button，他说了这里面的内容，刚才我们看的要求什么，他说这个，呃，根据文字大文文文字的字数和大小，按钮大小也会发生变化，对吧？其实这个东西你现在用考虑吗？你比如说我这边就直接写个按钮啊，然后我们来看效果。

它就这么大对吧，那如果我多加两个东西呢，CTRLCCTRLVVVVV，它就变。是不是自己就变大了对吧？哎，所以说这个东西我们用考虑吗？不用考虑，那好你再往下来看啊，呃，要求一个按钮有三种状态，分别是常见的状态，How的状态以及禁用的状态，这个就不用说了，对吧，就是你正常你写一个按钮以后，你就给他鼠标放上去以后，Power的状态是什么样的显示出来就可以了啊，然后再往下你看，不仅button元素，任何元素通过设置点BTN类都可以成为这个按钮。

看明白了吗？那么这个时候你想想好了，问题来了，我这块如果来个div对吧。Div，现在它有按钮的效果吗？没有。肯定是没有的，对吧，而且多大呀。我在这里加了啊，TY tyle，我们先给它边框包一像素实现的blue蓝色，你看看div现在默认是多大。是这么大对吗？不对，要人家要求什么，是不是你文字变大了，按钮才会变大，你现在文字是不是占满行呢，对吧？所以呢，只要考虑任何元素，只要是你加上了一个class.btn是只要你加上这个BTN代表了它，这个时候就是一个按钮了，对吧？那么按钮的基本样式你就要给上了。对吧，那么最最基本样式里边，是不是不管你是行行标签也好，还是块标签也好，你在我这通通都得是行标签。对吗？不然的话div就失效了。

是这样吗？所以说在这里边第一件事是在我先写到这里，一会再挪到那个文件啊，那是不是点BTN的第一件事需要干嘛。This play in变成什么？变成行列元素对吧？变成行列元素以后，那这个时候咱们来看，同样我给它加上一个class，一天走你。是不是就变过来了，对。看明白了，变完以后，接下来呢，接下来你可以再去根据你自己的要求，你是设点设置点拍定啊设置点这个其他的这就都行了，对吧？哎，比如说我拍定我上下为五左右为十吧，啊我自己给的。给的这么大对吧，那么同样你文字放大了，这个标签是不是也要大呀，对吧？那比如说在这里边我做一个test杠，呃，就叫叫做方F方SIZE20匹萨。那这里边front杠。

SIZE20PX对吧，那不管是给谁用是不是，比如说给这里边方SIZE20PX字大，我的内这个框也会跟着变大吧，这里边是不是也一样方20PS它也会跟着变大。对吗？这能明白吧，那接下来不管你是按钮标签也好，还是div标签也好，你是不是都得是一样的。你现在按钮标签，你看你又有边框，然后这块。对，也有背景色，然后还有这个这个还有边框，对，然后鼠标你看鼠标放上去。是不是还有个好效果呢，对吧，而我这个D呢，啥也没有。而这里边放上去你看看到，而且这个div它放在这个，这个什么鼠标还变成这个。这叫啥小小红光标键那种情况了，对吧，鼠标变成一个竖杠了嘛，你看到了吧，而这个放上去就还是这个小小箭头，这个放上去就是光标键，这是不是都是区别，那我是不是得都该给它设置统一的才行啊，能明白我说什么意思吧？哎，那你就再往这里边继续设置吧，刚才说的需要干嘛呢。

嗯，背景颜色，我需要星空吗？不需要吧，这里面是不是有个默认按钮啊，默认按钮的背景颜色哦，背景颜色是清空的，字体颜色是给了。这个灰色还有边框对吧，那OK，我就直接写了啊。背景颜色什么颜色的，刚才说的，哎哟，这个怎么清空啊。啊。你看啊，咱们要比如说先给他设置红色，这没问题对吧，那但是大家知道这个按钮本身是有颜色的，有背景颜色的，对吧，那咱们怎么给他，怎么给他清空啊no。清了吗？清楚了，边框眼睛有没有，有吗？那B包的一像素的边框实现井号CC灰色。没问题吧？这个这个为什么没变，是因为。这里面的原因对吧，是不是也变过来了啊，变过来以后，然后呢，还有什么东西了。

对比一下。文字颜色要变一下吧？C。井号。666啊。然后有有圆角吗？有有有。嗯，有这么一点点圆角的效果对吧？那OK，给它加一个杠ius radio5像素。小圆角。五像素就够了，按钮是不是做好了对吧，但是这个div还是有问题的，我鼠标放上去它还是按钮吗？它不是的对吧，他没有给我达到这样的效果，所以我还要继续改，那怎么办？在这里边呃，是不是叫做CUCUSO是不是用它来设置。

是你报的吗？诶诶，这回对了吧。T，默认是这小箭头嘛，对吧，当然了，你可以不可以给变成小手啊，比如说小手叫什么来着，PUPI。Q，对吧，随便放点小手，你看这是不是叫按钮，然后呢，是不是还要有个how效果呀？点ETN的冒号how。它是什么效果呀。好像是。那个界面上。发个按钮。放上去是蓝的，自变蓝背景还有一点点浅，哎，它放上去好像跟这个效果差不多，看到了吗？是吧，啊，那咱就随便给一个吧，颜色你们下来自己量好吧。那就是鼠标放上去边框变，字体颜色变，背景变，是这样吗？那OK，鼠标放上去以后，背景变变成ABCDEF，然后还有什么来着，字体还有边框B包是不是这三个。

边框给他。字体是什么色啊，字体我就给个。这个蓝吧，好吧，然后。现在我们再来看啊，刷新鼠标放。放。跟你的区别有没有区别？太大了吧，你看人家的。啊。我的为什么会动啊？注意你看这个。没动，没动的原因，动的原因，动的原因是因为没给边框。

好了。这回对了吧？这回没动了吧，啊，因为刚才我少给了一像素的边框嘛，对吧，然后当然你也可以加上那个过渡，让他再稍微就是慢一点的变化能明白吧。然后呢，再往下来，这里面还有什么东西的区别。这个是没有了是吧，啊，那OK，这个没有了以后，那接下来它有这么多样的各式各样的按钮怎么变怎么变。你不可能说是我每一个都做一遍。不是的啊。主线的目的就是不是为了让你每一个都做一遍，这就基本的就成型了，明白吧，剩下的再做做什么。比如说BTN叫点。BTN杠成功怎么成功的，Success怎么拼来的什么什么so ss，好了，比如说咱们也做一个成功色吧，那成功色的话是什么？看看来。

这个哈，成功按钮吗。这是绿绿绿绿色吗？啊，绿的。这什么绿？GR re，就这个率吧，诶，GRE。Green green yellow是吧，然后字体颜色呢，Color。叫做WH。ITD，然后还有什么东西啊。没了吧，应该准确的说，我们还有一个边框哦，Bo，不然你不加它，它又得动对吧，So lid，然后GR也给他这样的好了，那现在这个完事了，但是你注意你看好了啊，我这里边。

我还是默认的按钮对吧，没有去改变，那只要是在这里边我加上了，比如说这个button，这个我给他加，加了一个什么呢？加了一个，呃，不对，叫PT-success，好保存，保存完以后你看是不是就是那个按钮了。对吧，但是这里面一变。啊。你看好了，我一变是不是又变回来了，看到了吗？是不是又变成那个刚才那个了，而他这个里边的呢。你看。怎么办？怎么解决这个问题？怎么解决？直接这么写，可不可以点BT size冒号how BA BA，我就直接给个大红了好吗？

然后我们先看一下效果啊。这个吧。变了吧，它会覆盖的。它会覆盖的这个这个字的颜色，不是上面那个号这个颜色吗？对不对，咱给他变一下那个它是浅色，这这个绿我还不好调。红绿蓝rgba啊，然后。零率变成200。绿变成200，然后蓝也为零，然后给他一个点五吧。好了，我看看这个色行不行啊。也行，就这么糊弄点三颜色你们下来以后你们自己量吧，好吧。就这个色的啊，然后字体颜色呢，Co那就是。这个这个色来。

这不就变过来了吗？看到了吗？那我还有一个一项数的边框。呃，EPSSO，什么颜色，是不是跟这个背景是一样颜色，要么你就统一把边框都给我去。明白吧，要么你把边框都去了啊，要么你就得都加，你看这是不是就变过来了。看到了吧，能明白吧，能理解吧，知道怎么做了吧，啊那每一个每一个带有这个属性的，只要是你设置这一个，那就必须给他前带的好一个。明白什么意思吧，啊不然的话，他没有办法去实现这个每一个的转换，你看它这里边，它每一个都是有的。你看每一个都是有的，看到了吧，然后这里面是不是说还有有禁用的，禁用的你就单独做禁用的。明白吧，经用的不用去调色了啊，就是你不要以为说我这一个都是什么，都是单独写，不是的，就是写一个写一个以后开始干嘛呢？加加class，你加了一个class，它就变一个样，你比如说这个圆角的按钮，我能不能再把它变成圆角按钮呢？也可以啊，比如说在这里边你看好了，我再来一个叫BT，呃，点BTN-idus是不是这么写的，那就是包。

杠I dus，然后比如说我给他10%。好了，那这个按钮我想要变成圆角对吧？那BDR杠什么BBTN。杠I好了保存，然后你看。我的10%。Bti disuss没起到作用吗？点错了右键检查。这里边找到它，找到它以后看一下啊，我包的DR rus10%好使不好使，它确实能把这个五给他覆盖掉了，看到了吗？哎，但是可能10%就是跟原来我五差不多，我可以干嘛不断加大呗。

是不是这样的，刚才那是多大？它这个距离还有点儿有点大呢，那加上这个以后咱还得pad定。杠left，比如说20。Paing-right也为20，因为之前我设过PA定了对吧，所以我为了不冲突这个五，我单独给他设置俩20啊，然后你看我能能不能给他改变过来啊。把它点过来，点过来以后看看二十二十好使吧，好使吧，哎，好使以后，那么接下来你再给他设圆吧，百分之多少，40%的圆。百分之四十点五十。这是刚才那按钮吗？这么磕碜呢？

我不能就不能偷懒了，那你就别偷懒了。25。所有的角度25啊。对吗？不对，不是。不对，他需要去。他需要去算。他需要去算，因为你的内容给的再多，它也是这两块这个半圆明白吧，咱们这个内容如果给的多，你比如说我先随便给一个，我先给个50%吧。来你看啊，现在是这个圆对吧，那咱就叫按钮，那这会我再来，你看我给它复制两个CTRLCCTRLVVVVV。是不是就变了？看到了吗？人家是不变的。哦，人家是不变的，所以说加了这个圆以后，这个圆还得去算一下。

我的左上角，右上角，右下角跟左下角，它呢，还不能给它定位为一个圆心点，那就是background，对，叫board。RA，然后比如说啊，我就给他一个值50%。这个给他武器酵素吧。这能看懂什么意思吗？嗯。再调调。看明白了吗？我是不是给他这个左上角和右下角，是不是单独设置的，这这个横线一分割，前面是水平位置的左上角，右上角右下角跟左下角对吧。后面的是垂直位置的左上角。右上角右下角跟左下角没错吧，哎，就是你不要如果你单独就给一个值的情况下，那是不是四个角的水平和垂直位置都变成这样了，对吧？所以我说了这个边框它有很多种设置值的方式，所以你要想清楚，最终你要把圆心点定位到那就可以了，那现在我要想让它变成圆角的这种边框，这种按钮的话，是不是只需要加这个属性就可以了。

看明白了吧，那最终这些所有的这些样式我是不是都放到这里边就可以了，那么你后期想用按钮的时候，你是不是在这个页面，你只需要干嘛link把这个B，呃，BTNBT或者button。B。P to.csi这个文件引入过来是不是就可以了，但我引入说不对呀，是不是当前。目录CSS下面的button呢，对吧？你引入过来以后，在这里边你是不是就可以用这几个类了，对吧？那这个时候你不管来任意的标签，你比如说我再来一个P标签，那么这里边一样叫做我是按钮对吧？然后这里边拉第一件事必须先给的谁啊，必须先给他BTN这个鸡类对吧？给了BTN积类以后，那么你再想让它变颜色，你是想变成成公色呀，还是其他什么色呀，还是你要想变成什么圆角啊，你只要加类就可以了。

明白说什么意思吗？对吧，那这个时候你看我的这个这叫什么，呃，叫P标签是不是又好使了。能理解了吗？就这么做的，所有的组件就是这么出来的，用也是这么用的，等你以后用别人的组件也是一样的，你把他的这个CSS跟GS跟字体库拿过来以后，然后对应的类名往里面一加就出来了。能理解了吧，能了吧，那OK，剩下的剩下这十多个组件大家开始做，但是你自己也要把这个八大按钮的做做做一遍啊。你自己的也要把这个做一遍好吧。然后。其他的就没有了，你量我这个文档里面颜色量不准的时候，你就上它那个官网地址里边去量一下人家那个颜色，好吧，尽量做的跟人家像一些啊。

然后我再看一下，大家应该没有做不了这种啊，你别给我做，你说输入完它怎么不显示这个不合法人做不了这个啊，你就直接做出这个图的效果，明白我说什么意思吧。啊，就是你加了一个类。还是按照刚才我那个组件那个思想，就是你只要加了这个类，那么就会有这样红色的字出现。明白什么意思吧，就所有的，你记住我们在页面中看到所有的都是做好的。都是提前做好的，然后只是通过不同的类，不同的类名显示，让它显示与不显示，可能它变色与不变色。明白我说什么意思吗？就是这个东西它是提前做好的，你只要加上这个类，因为现在咱们不会去动态加类，对吧，不会动态加类的话，你比如说呃。我还在这里边吧。啊，咱们比如这个就是表单了，对吧，比如这批标签就表单，那表单下面是不是会对应着这一行文字啊。

对吗？然后比如说这个用户名不合法。用户名不合法啊，然后现在你来看啊。有的用户不合法对吧，那么默认情况下它有吗？没有对吧，所以这里边我就随便先给他一个class啊，比如说这叫什么呢？叫做这个提示吧。然后点提示默认的时候是display等于on对吧，或者是占位的，因为这个位置我用用这种方式的话，它是不是不占据原有物理位置，那咱们是不是还有另外一个占位的，叫什么V3等于。呃，隐藏着海是吧。是不是也看不到了，对吧，那好了，当我加上这个属性了，比如说现在我需要有用户提示了，叫e or，那visibility等于。对吧，然后字体颜色color Co为红色对吧，那这个时候只要是我加了这个ER，这个时候。

就是这个意思，明白了吧，明白我说什么意思了吗？就是这里边我们看到的所有东西都是别人提前写好的，只是多了一个类，又多了一个样式，多了一个类又多了一个样式，就是这样。能理解了吗？啊，所以每一个组件大家一定要给它划分到最小单元。明白吧，能理解吧，OK。剩下时间大家来做。这回主句二会了吧，能能自己能做了吧，啊，你不要不要着急，你慢慢去分析，就像刚才我带着你们分，他跟布局页面就不一样了，对吧？布局页面我们先考虑的是布局啊，然后我们再一步一步去往里面填内容啊，对吧？组件呢，你就是看它都有什么样的效果，你把这些效果记下来，然后我们看哪些效果是我们可以实现的，然后我们一步步去实现，然后如果遇到不同的标签，我们要怎么去去办。就可以了，能明白吧。

呃。掉了吧。