less覆盖了原来的css怎么解决

讲完了它的基本的这么一个原理呢，我们来体验一下这个 this 啊啊，接下来我们通过四个步骤来完成 this 代码的编写以及转换。 首先呢，我们找到我们的工程啊，在工程里边呢，我们去建立一个文件叫做 index 点 list。 好，咱们接下来写一下啊，我就把这个代码直接复制一下，复制粘贴过来。好，那么这个是 nice 代码，你可以看到啊，这里边我们用到了一些变量啊，我这里好像还没用变量 喂，用到了变量你看啊，好的，再把写好了过后浏览器能用吗？肯定不能用，你写个，你写个页面，你去用一下，用，能用就怪了，对不对？ index 啊，比方说你用它吧，到跟后置频道没什么关系啊，你只要这里边写的是纯正的四 s， 它就可以用，你写的不是的话，那就肯定用不了，比方说我们这里头写个 div 吧， d i v 点儿什么 this， 好吧，随便写个文字。好，我们运行看一下啊，看它字体颜色有没有变就完事了。字体颜色有变吗？没有啊，因为我们这里写到的，是吧 他那对吧，用这个颜色他没有变吧？他不认识啊，他根本就不认识，你是个啥玩意？所以说我们需要转换，通过一个包来进行转换，那么这里是不是要下载安装这个包，对不对？他来帮我们转换代码，那么怎么来下载安装呢？我们当然可以使用 npm 来下载。 那么这里呢有这么一句话啊，大家看一下，这个包呢，他提供了一个叫做颗粒的工具，叫 nice， 也就说什么意思呢，你安装了这个包之后呢，你就又多了一个命令，行啊，就是就是这个终端命令叫做 nice， 就这么个意思。 好，那么我们怎么来去下载这个内饰呢？有两种方式，一种呢是全局安装，那么全局安装呢，它有个好处就在于什么呢？呃，安装一下这个内饰啊，横杠 g 内饰。全局安装吗？ 全局安装的好处呢，就是说你在任何一个目录啊，都可以使用这个 s g， 但是全局安装不好的地方在啥呢？在哪呢？就在于这个命令呢，他不好版本控制。比方说你做这个项目的时候，你要用的编辑的版本呢，是四点一点一， 但是呢，有一个老的项目，他用的编辑版本呢，可能是二点零。那你现在是一个全局命令，怎么来切换版本呢？你不好控制版本啊。所以说呢，我们一般来说啊，如果不是一些特别的情况，我们一般不进行全局安装，所以我这里呢，把它卸载掉啊，好，卸载掉了。 nice， 你看是不是没有这个命令。好，我们不进行全局安装啊， 进行本地安装就可以了，到这个工程目录下面，使用 n 片 i 横杠大写的 d next 啊，当然我们要就做一个。说实话啊， in it 啊，就随便给个工程名名字吧， deable 吧，最好不要跟这个 les 重名。好了，那么接下来我们使用 n p m i 横杠 d les 为什么要加上这个横杠 d 呢？横杠 d 啥意思？是不是开发依赖？ 什么叫开发一呢？就是在开发阶段要使用的，运行的时候跟他就没有关系了，你看我，你看一下我们现在 是不是这样子，看一下上面这个图，我运行的时候跟他还有关系吗？没关系的吧。跟他还有关系吗？没关系的吧。我运行浏览器里边，浏览器里边他只需要用到最终转换成功的代码就完事了，所以我们只会在开发阶段 这一部分去使用它，对不对？那么在运行的阶段，我们是不是就是一个非常纯粹的一个浏览器，引用一个 g c s 就完事了？所以说我们这里呢是开发依赖啊，我们安装好了之后呢，哎，那么它是提供了一个命令给我们使用，对吧？那我这里能用这个命令吗？我们试一下啊， n s c， 你会发现这个命令不存在， 为什么呢？因为你不在全，你没有全局安装的话，这个命令是找不到的。那怎么办呢？也很简单，这里给大家说一个小知识，你只要这样子写就可以了，前面加上一个前缀叫做 n p x， 后面跟上你的命令， let s c 横杠 v， 看一下版本哈，你们试 一下啊，是不是也可以？那么这个 n p x 是什么东西呢？就是 n p m 下，就是你安装这个漏斗的时候，它可以顺带安装一个 n p m， 这个 n p m， 安装的时候呢，它就会顺带给你安装一个小工具，叫做 n p x。 这个工具的作用呢，就是它可以让你在当前目录下去运行一个 note 的 model， 就是目录里边的命令 啊，你看安装了这么多哈，他因为 nes 本身有一些依赖，他的命令在哪呢？在这，你看是 nes c， 当你使用 ntx nesc 的时候，他就会从这里边去给你找这个命令啊，总之呢，你不用管你，你本地安装的时候，如果说你没有这个命令的话，你要前面加上个前缀叫 npx 啊，当然呢，我们也可以利用这个脚本，他点接上脚本里边，我们给他配这个脚本，比方说就一个 c 嘛，啊，就随便写，随便写一个啊，然后这里边我们可以使用 n p x s c 横杠 v， 这样子呢，我们写下来就比较简单一点啊， n p n 的 round c， 是吧，一样的运行这个命运，而且呢，你会发现在这个脚本里边配置的时候呢，你可以省略掉 n p n 的是可以省略的啊，好，咱们再看一下， n p m round c 是没问题，对吧？也就是在脚本里边是可以省略 m p s 的，但是你在这里呢是不能省略的。好，这就是简单的说几句啊，总之呢，我们就是把这个 n s c 就安装成功了，现在到了哪一步了？就到这一步了， 对啊，这个安装成功了。好，这个代码有了，对吧？我刚刚写了，然后这个玩意也安装成功了，接下来就是通过他来进行转换了。怎么转换呢？转换的方式特别简单，进入第三步，刚才不要跟着做啊， 我们只需要使用这个 nice c 这个命令写上两个文件，一个是我要转换的原文件，就我们自己写的 nice 代码，然后呢，第二个文件名呢，是我转换的目标文件，就是我转换之后保存到哪个文件中。 好，我们只需要这样写就行了。好，接下来呢，我们在这里呢给它配置一下这个命令啊， n s c， 我们需要转换的代码呢，是 in 这个色调 nes。 好，我们转换的目标代码呢是 in 这个色调 c s s。 好，把它转换成它。好，咱们接下来试一下这个命令啊， n p n run c， 好，完成了转换。你看这多了两个文件了，我们把这个两个文件隔一下啊，你看一下，是不是就是我们一开始说的这个代码被这个命令转换成了这个代码啊，是不是特别清晰啊？好，我们再看一下这张图， 你看一下是不是特别清晰的。关注多余简介号的同学，打断一下，我是袁老师，你能跟着我卷到这里，那我就再送你一个能卷死所有人卷的五体投地的课程，这套课就是我录制的大师课，你不要 包含原理、原码、思想，还有比面试题，这些都是求职提亲跳槽绕不过去的内容。并且呢，我毫不夸张的说，论这些内容的价值，如果说一份工作年薪三十万，那么大时刻这几天讲的东西可能在你的面试中就能值十万。 单说他里边涉及到的面试题，只要你面试的时候遇到了，这是大概率事件，你把我给你的答案，不用百分之百，能够说个百分之六七十，对面试官的杀伤力都是核弹级别的，不管他曾经面试过多少人，这种场面他没见过，我一点不跟你开玩笑。 当然呢，我也欢迎各大公司的主管面试官前来参考借鉴，同时呢，也送给各位同学拿去学习提升。怎么领取评论区第一条，进粉丝群，然后根据提示领取就可以了。那么接下来我们要做的事情呢，就特别简单了啊，我们就可以怎么做呢？ 就可以在浏浏览器里面去引用。啥？引用这个 c s i 对不对？转换了过后的目标，来让他们来看一下浏览器，哎，颜色是不是成功了？那么将来呢，我们开发的时候就特别简单了，我就去开发什么 nice， 这个写起来更加舒服一点。然后呢，写完了之后呢？通过一个命令 npm 装 c 是吧？是可以转换成这个代码对不对？我们就老老实实写这个，这个东西看都不用看，让你让他去转换浏览器，用的是这个 对不对？啊？这种做法你要体体会一下，我们后边你会发现很多东西，包括 gs， 甚至包括图片哈，他们都用用了很多类似的那种做法，你舒舒服服写你的，我帮你进行转换。刚才呢，我们就演示了整个 nice 的过程啊，大家每一步跟着做一下。

推荐一个写 cs 样式的神器，让你爽到飞起。首先我们打开我们的 vitcod 选择插件市场，在这里面去搜索这个关键字，能看到 是这个插件，这个插件虽然安装量不是特别多，那么它是干嘛的呢？它可以根据 v e 文件的 temperin 结构自动的生成你的 c s， 不管是萨斯还是 les 都可以。安装完了之后 给大家做一个演示，比如说这个是我一个 voe 的项目，那么这个是他模板里面的这个元素，如果我们项目里面这个模板里面的克拉斯这种层级欠套是非常深的，写代码的时候我们可能会一个一个的去写， 这样写效率是非常低的。你可以刚才安装那个插件，他可以派到用场了。右键右键之后他这里面有一个菜针，就是刚才安装这个 插件的拆车看，我们选中它就可以自动的给我们生成 cs， 我们没有必要把时间花费在这个 cs 成叠样式的这个选择器上，这地方可以是 nice， 也可以是萨斯，都可以，比如说我改成萨斯让我生成一下， 这地方是 c i s， 那也是可以的。那么这是一款非常好用的插件，能够一键生成我们 c i s 样式的成绩大大的提高我们的工作效率， 有需要的话可以按照我刚才这种步骤去安装一下。如果大家有什么好用的插件，可以评论区留言一块分享一下。

你说这个玩意有多复杂，你只要会 c s s， 你就一定会 nice， 因为哪怕你一句 nice 的语法都不会，你用纯 c s s， 它都它都是支持的，对吧？注视啊，给大家说一下这个注视啊，注视呢，在 nice 里面有两种注视，一种呢就是纯粹的 c s s 注视，一种呢就是双铁缸注视。我们来看一下这两种注视啊， 嗯，比方说我们这里随便写个注视，默认呢，是一个，就是你用你用那个 ctrl 加斜杠默认打出来的就是双斜杠，因为这样的注视呢，这样的注视只存在于 les 原代码中，这边的原代码，原代码就是我们自己写的代码啊。好，来看一下 n p r c， 它不是我们编译过后的代码，你看你看这个注释编译过后有吗？是不是没有啊，他就把注释去掉了，因为我们平时读代码的时候呢，只会读原代码，你会谁去读这个代码呢？编译结果 看你现在还还能读，我将来根本就没法读，因为这个代码会被压缩，他把这些换行全部给你去掉，因为他不需要你去读这个，你只需要读原代码就行了，然后一变异就形成最最终的最终代码。好，所以说这个注释呢，我们一般来说在 nice 里面用的最多的就是这个注释 啊，如果说你要把注释写到就是呃，生成到这里边的话，你那你要用普通的就四 s 注释啊，这是普通的四 ss 注释，他会生成到编译结果的啊。再看 啊，你看这个主题过来啊，简单说一下，平时你们都用这种是最好的，也没有人去读这个代码。关注路易简介号的同学，打断一下，我是袁老师，你能跟着我卷到这里，那我就再送你一个能卷死所有人卷的五体投地的课程。这套课就是我录制的大师课，里边包含原理、原码，思想， 还有比面试题，这些都是求职提心跳槽绕不过去的内容。并且呢，我毫不夸张的说，论这些内容的价值，如果说一份工作年薪三十万，那么大时刻这几天讲的东西可能在你的面试中就能值十万。 单说他里边涉及到的面试题，只要你面试的时候遇到了，这是大概率事件，你把我给你的答案不用百分之百，能够说个百分之六七十，对面试官的杀伤力都是核弹级别的， 不管他曾经面试过多少人，这种场面他没见过，我一点不跟你开玩笑。当然呢，我也欢迎各大公司的主管面试官前来参考借鉴，同时呢，也送给各位同学拿去学习提升。怎么领取评论区第一条，进粉丝群，然后根据提示领取就可以了。

大家好，我是清新，今天给大家分享前端必会的三种 css 布局技术，第一种是这种左右两列式的布局，第二种是这种一行三列或四列的布局，第三种是这种一行多列或者多行多列的布局。那么接下来我们可以看一下京东商城的网页框架结果它是如何搭建的， 我们来看一下啊，一般网站的头部都是通蓝的啊，那么京东也是通蓝的，那么他整个网页的主体部分啊，他其实是放在这么大的一个盒子当中，然后这个盒子设置在水平发现居中，那么接下来的内容就是在这个盒子里面来进行布局，所以我们来看一下这个里面是怎么布局的。 那么首先我们来看第一个板块，他是一行四列的布局，第二个是属于一行多列的，第三个板块是属于左右两列式布局，那么第四个板块也是一行多列，那么第五个板块也是一行四列的布局， 那么后面的话都是这种多行多列的布局。我们来看一下啊，所以说整个这个网页的框架结构啊，用到的就是我们今天要给大家分享的这三种布局方式， 所以只要你掌握了这三种布局方式，那么搭建一个完整的网页框架肯定是一点问题都没有的。那么接下来我们就开始写代码。好，首先我们来回到我们的 vs 扣的开发工具，首先下来我们来新建一个网页文件，我们来给他取个名字啊，叫做前端必会的三种 css 布局技术。点， stm 回车。好，那么接下来我们按住 sift 键感单号回车调出我们这个网页的框架，那么同样的我们也需要把这个标题给他设置好，好，我们来给他设置下标题， ctrl 加是保存。 那么接下来我们来看一下我们要做什么啊？我们刚才说了，我们一个网站的他的主体部分是放在这么大的一个盒子当中， 然后在这个盒子里面进行布局，那么我们一般的网页的这个宽的吗？这个宽度是一千二百八十，那么我们这里为了给大家方便的话，我们把它缩小到一千啊这样一个区块里面，所以首先我们要构建这么一个大的盒子，用来做我们的容器。好，我们来构建一下， 点上，哎呀，好，容器的意思啊。好，然后我们来给他添加我们的样式，太太太杠，四二三四。 好，那么接下来我们来给他添加我们的样式宽度啊，我们来给他加上一个宽度，一千，然后我们来 给他加上一个高度啊，当然这个高度他正常是随着内容自动而往下撑的。这里为了给他看效果，我们给他加一下啊，到时候后面我们把它删除掉就可以了。然后我们来给他加上一个边框，我们来看一下效果。 coms 加是保存，然后我们的右击啊在浏览器当中来打开看一下。 好，那么这样一个长方形的区块构建好了，那么这个时候大家看他与上面和左边有这样一个间距，那么这个间距我们可以审查来看一下啊， 我们来选中我们的玻璃就可以看到，其实大家看这玻璃有默认的八相处的外边距，那么这个间距就是浏览器在最开始变异的时候， 我们这个波点默认自带的外边局造成的，所以我们不需要，不需要我们就把它给干掉，好抗拆架是保存，那么这个时候间距就没有了，那么接下来我们这边需要把这个盒子设置在水平方向居中的位置显， 我们可以看一下，妈，给给大家上一个上三十像素的外编剧，左右外编剧自动相等，那么下外编剧为零， ct 加是保存，我们来看一下大上外编剧，三十像素左右自动相等，水平居中啊，下外编剧不需要零， 好，我们接着往下看，那么首先我们要构建第一个部分，这样一个左右两列式的布局，那么这样一个结构，我们来看一下啊， 他其实是在外面啊，构建了这么大的一个盒子，然后在这个盒子里面再构建的左边这个红色的盒，右边这个黄色的盒子啊，所以是构建一个大的盒子，里面放两个小盒子。好，所以我们来看一下啊， 好，我们来给他取个名字叫 column c o r u m m， 这个什么意思啊？啊，这是我们的列的意思啊，好，我们这里是两列， 是的，所以我们给他取个名扣二，好，然后他里面要有两个，是不是一个左边和一个右边的盒子，所以点敲了门 啊。 c o r u m m 二杠一，好，我们来把它复制一份。二杠二， come， 加是保存好，接下来我们来给他添加样式啊，我们先给他最外面的那个盒子加加上一个边框，看看效果， 我们给他加个黑色的吧，看着加是保存啊，大家看一下啊，当然他里面还没有高度，所以啥也看不到，只能看着几个黑框框在那里。 好，那么接下来我们来给他里面杠点上，敲了门，二杠一，我们给他加上一个宽度七百，加上一个高 三百，再给他加上一个背景颜色红色， ctrl 加是保存好，再一个红色的区块就出来了，那么接下来我们来构建他的第二个部分，第二个里面的小盒子啊， 好啊，然后这里我们来看，总共宽度是一千，减掉七百，还剩三百，还要留下空隙，所以这里是二百八， 然后这个颜色我们把它改了，改成什么？改成黄色椰蓉，看，这家是保存，保存之后我们来看一下它整个就是外面这个大的盒子，是吧？这个黑色的边框包裹着两个盒子，红色的和黄色的， 那么接下来我们要让这个盒子怎么样？在水平局中啊，在水平，一个在左，一个在右显示，所以在左边的这个盒子我们给他加上一个左浮动，看此啊好，到了加完之后，这个黄色的不见了啊，这个黄色的盒子是因为什么被这个红色的盒子盖住， 有时候加了浮动之后，这个盒子就相当于飘起来了，他不占空间，所以下面这个盒子就把那个什么下面的盒子就缩到里面去，看不到了啊，所以同样的，我们这个盒子我们要让他往右边显示，我们可以给他加上一个什么右浮动。 read， 好看，这家是保存，保存照，大家看到没有？就在这里了，但是我们加完之后啊，这个效果是实现，但是他外面这个盒子，这个黑色的盒子是不是被塌陷了呀？ 啊，这就是因为加了浮动之后啊，这两个盒子相当于飘起来，没有占任何的空间，所以外面这个大的盒子就相当于没有高度了，他就被塌陷了，那么如果我们往后面再写内容的话，他就也会缩到里面去，那这样肯定是不行的，所以我们需要清除浮动，那么接下来看一下我们怎么清除浮动， 大家看啊，这里非常的重要，我们来看这是左浮动的盒子，这是右浮动的盒子，是因为这两个盒子的 浮动问题造成的塌陷，所以我们需要在他们的后面加上一个清除浮动的样式啊，我们来看一下怎么加，我们给他一个颗粒啊，构建这样一个颗粒，这样一个 diy 啊，这个怎么 diy？ 主要是用来清除我们的浮动的。好，所以我们来看一下点上颗粒 大括号颗粒是什么意思？清除浮动的意思。好，我们来看一下，比如说我们来清除一下左浮动， 这个什么意思？就是这个盒子啊，他在清除浮动的时候，这个清除左，大家看他只能清除他前面的盒子因为左右浮动造成的塌陷问题，他是不能清除他后面的盒子 造成的塌陷问题啊，等一下我们给大家演示。好，我们先给他加上一个清除左幅的，我们来看一下。好，清除的来看一下是不是也 ok 了呀？是不是 ok， 但是我 说了，好像我们只要清除左浮动就好了，他右边这个盒子右浮动造成的塌陷问题好像不需要清楚啊，我们来看一下啊，如果我把这个盒子的高度改成一百， 我们来看一下他会有什么问题，大家看到没有？是不是还有这个塌陷问题啊？那是因为我们给他盒子加的高度是一样的，所以正常情况之下的话，我们是应该左右浮动都要清楚的，如果我这里只清楚右浮动， 好像看上去也没有问题，是不是如果我把右边这个盒子也改矮一点呢？那么他也会出现那个问题，所以正常情况下我们是要清除什么啊？这个盒子前面的这把盒子因为左右浮动 给外面这个盒子造成的差塌陷问题，所以我们应该是 boss， 也就是说他前面只要有左浮动和右浮动都清楚掉， 所以是清除左右浮动，这样子大家看一下啊，就没有问题了。好， ok 了，这当然我们把这里先还原一下啊。好，我们刚才说了清除浮动这个颗粒为什么要写在最后面，是因为他只能清除他前面的盒子因为左右浮动而造成外面这个盒子塌陷的问题，他并不能清除他后面的盒子因为怎么样浮动而造成的塌陷问题。 所以我们比如说我们把这个盒子再复制一份，复制好了之后我们来看一下，你看到没有？这个是不是这个盒子的高度是不是还是这样的，并没有随着后面的内容来撑开 啊？所以我们一般清楚浮动的时候啊，我们一般是写在最后面啊，是必须写在最后面啊，不是一般， ok， 好，那么这样就没有问题了，那么 ok 了之后，我们接 接下来我们就要看我们的这种一行三列或者四列的这种布局了，我们来看一下啊，那么同样的这种一行三列的这种布局，他也是在外面构建了一个大盒子，然后在这个盒子里面构建了三个小盒子，然后再把它排在一排，这样显示，所以同样的我们来构建吧。 扣了吗？ c o r u m m， 好，这里是三是吧？好，然后点上 c o r u m m 三杠一，我们来复制三份吧，按住 alt 键和 c 不正向下的箭头就可以复制了。好，我们来啊， 这里来三炕在家是保存，保存之后，当然这里什么效果也看不到。我们同样的来先给他加点样式吧， 给他一个三啊，我们也给他加上一个边框来看一下，我们给他加上一个两项 蓝色的边框吧，看着加是保存，同样的看到的，这里有个啊，边框线。好，我们接着往下看三，下面的杠可入三杠一，第一个盒子， 好，同样的我们给他加上一点宽度吧。 iwy 四，我们来给他一个二百， 然后同样的我们给他加上一个高度三百，好，给他加上一个背景颜色，看着加是保存好出来了，我们来构建我们的第二个盒子 里面的第二个啊，好，同样的我们给他改成什么？我们改，改成四百，把这个颜色也给他改 改一下，我给他改个这个颜色吧。好，然后我们来看一下第三个， 好，我们来看一下啊，那么我们来看两百加四百就是六百，六百加四百就正好是一千，然后我们来看一下，总共这里是一千，然后这里要有间距二十像素，这里也有二十像素，是吧？所以我们要干嘛？我们总共只有九百六，九百六的话，那这里只有三百六了， 好，这样子啊，然后我们把这个改掉，把这颜色改了， 改个紫色的吧，看这驾驶保存，那么这三个盒子从上往下排列，当然我们要把它变成水平的，我们有两种方法，第一种就是给他们分别加左幅， 好，我们来看一下，比如说给他加上一个 flow 成，大夫吃给他也加上一个 flow 成，嗯， 来不成？然后给他也加上一个 float， 来不成？看成家是保存，大家看一下是不是 ok 了。那么接下来我们要产生空隙的话，我们可以给中间这个盒子加上左右二十像素的，外边去就可以了，马给上下为零，左右二十。 好啊，当然他挤不下去是因为外面这个盒子造成的啊，你看到没有？就外面我们给他加的掩饰是吧？比如说我把这个蓝色的这个边框干掉，因为外面这个盒占了空间吗？占了两箱数，他只要多一点点他都放不下，是吧？ 好，那么接下来我们来看一下，我们如果把这个把这不注视掉，我们来看第二种方式，他有什么好处啊？第二 种方式我们是第一个加左浮动往左，第二个也加左浮动往左，然后然后第三个盒子我们加什么不加左浮动，我们加右浮动，也就是说前面两个盒子往左，后面一个盒子往右，然后我们给中间这个盒子加上左边二十像素的外边去就可以了。 再看你们同样达到了这个效果，但是他并不会因为这里有两项数的这个边框而造成他掉下来，是因为他这里还有二十像素的这个空间可以容你怎么样？对啊，作为弹性是吧？伸缩自己去那个啊，好，这就是这种布局的方式，他有一个好处啊，就在这里。好， 那么 ok 的时候，同样的我们要清楚他们三个因为浮动造成的塌陷问题。好，当然我们要清楚浮动很简单，我们也可以把这个直接复制放到 这个位置就可以了啊。当然接下来我们来给大家讲第二种清除浮动的方式，我们就不这样加了啊。好，我们来看一下怎么加。先认真看代码，最后我再给大家讲原理，我们给大家定一个清除浮动的样式颗粒， 这个是冒号，阿富特大挂号。好，这是一个样式啊，然后这个冒号阿富特就是在他的后面。啊，什么意思？现在也不需要懂，等下再说吧。好，我们来 continent。 好，我们先里面加个一一一啊， 好，这些带吗？先，都不需要动啊。好，我们先写完了再说。可丽儿，这个，这个动是不是好不好使？好，那么这是一个典型的清除浮动的这样一个样式，它是利用我们的尾元素来写的，然后我们把这个样式放在哪里？哈？ 把这样式放在他上面，因为我们要清楚他里面的内容，是吧？因为浮动给他造成的这个塌陷问题。好，所以我们来看一下，我们保存之后我们来看一下效果就可以了。啊，好，当我给他加了这个样式之后，大家有没有看到这个地方有个一一就出来了。好，我们来这里审查元素，我们来看一下。 好，我们来看一看，看这里啊，好，到底有没有发现这个冒号阿富特看到没有？是不是在这个位置看到没有？我们点击他的手是不是在这里看到？好，现在一定要注意啊，这个冒号阿富特 就相当于是在这个 div 的最后面创建的一个委员数。什么叫委员数？我们正常的元素是不是他有标签名呀？对吧？啊？这个委员数呢？他具备了这些标签的所有特 行，但是他没有名字啊，就这个意思。好，然后我们来下这个 content， 这里面是什么？这个一一就是相当于这个元素标签里面的内容，比如说我们现在写了个 p 标签，我打了个 ss 或者打了个一一啊，他就相当于这个中间这个内容。好， 然后我们来看一下，我们一定要把它设置为会计元素，他才可以清除浮动啊，我们来看一下就是不是真的是会计元素，我们给他加个背景颜色，红色，你看到他是不是？ 他其实就相当于是在这个最后面加了一个委员数，然后这个委员数的话，第一他的内容我们不需要，我们只是用他来清除浮动而已，不要跟这个一样，只是我们这样加在结构里面看起来不好看， 是吧？第二个就我们一定要把它转回快局才可以啊，大家看看看一下，然后在他身上加上一个颗粒 boss， 清除左右浮动这样样式就可以了。好， 这个地方大家一定要理解啊，其实他跟这个是一样的原理，无非他就是用委元素来在这个后面加好，但是这里有怎么样？有一个非常重要的就是他一定要把它转换为一个会计元素啊，因为他默认的是属于行内元素。 好，如果我大家看一下，如果我把这个注视掉，你看他就达不到清楚的效果了，你看这个是不是？好，所以这里他一定要注意了啊。 好，那么接下来我们要给他添加上外编剧二十像素与上面产生空隙，然后最外面这个盒子加上一个 money 杠 top 二十像素， 那么这样就没有问题了。那么三列是一行三列的布局，我们也做完了，接下来我们来看这个一行多列或者多行多列的布局，那么 像这种一行多列或者多行多列的布局，我们来看一下京东啊，它主要是用来做我们这种产品列表的样式来进行，是吧？来进行使用的，所以一般情况之下，我们都是用我们的幼儿无需列表来进行构建 好，所以同样的，我们在这里面也要构建一个大盒子，然后在这个大盒子里面利用我们的幼儿五系列表来构建我们这样一个多行多列的效果。好，所以我们接着往下看， 那么接下来我们来构建一个多行多列的 c cloud， cloud， 是吧？ curumm， 好，我们杠 m 吧。好， 这个啊就代表多的意思，多行多列的意思。好，然后里面我们可以用我们的 u r 标签， u r 五系列表标签，我们来乘以十。啊，好，大家看一下啊，这是一个快捷的方式，我再我再说一下， ur 这个监控号 代表它里面的紫元是，紫元是谁？是 r i， r i 出现几十，十四就乘以十，然后回车就可以了。好，看，车加 s 保存，保存之后你看到的就是这样一个简单的效果，那么接下来我们同样的给他接怎么加上一些边框来看一下效果啊？好，靠，热门 杠昂，大括号啊，我们同样的加上一个边框吧，我们也给他加上一个两项数，加上一个蓝色的边框。 好，这里看到了这样一个大的边框了啊，外面的盒子，好，然后我们来给我们的点上，我们的后门下面的 ur 也加上一个啊，我们加个背景颜色吧。 加个什么背景颜色？加个这个颜色的吧，好，看到了吧？好，然后我们来给我们的点，上课了们 下面的幼儿下面啊，哎，我们也给他加上一个边框来看一下效果啊。好， 那么这样子大家看到没有？这就是我们最开始构建的这样一个最原始的这样一个框架结构，那么接下来我们一步一步来调，首先大家看一下他与这个上面和这个下面有空隙，还有这个地方与这个 li 之间也有空隙，是吧？ 所以我们来看一下这个空隙是怎么造成的啊？首先我们来审查元素来看一下，选中这个幼儿，然后我们往下拖，看一下他这个幼儿的和模型，我们来看一下他是不是有默认的十六像素的外边距和四十像素的内边距，所以我们不需要，不需要我们也要把它给干掉。 好，所以我们可以在这里直接逗号幼儿把他的外边就干掉，然后我们同样的把那边就也加进去啊，零啊，当然他这里是零的时候，这个单位 可以写也可以不写啊，这个无所谓的。然后我们幼儿的前面还有这个小点点，我们这个小点点也不需要，我们也要把它给干掉， 嗯，把小小心写错了啊，有儿大括号，我们给他怎么样？把那个点点干掉是不是？ 好，那么这样就把这个前面的点点干掉了，干掉完了之后再看他就缩成一坨了，是吧？那么接下来我们要构建这样一个效果的话，那这里的每一个小区块其实就是一个二哎，所以我们要给每一个二加怎么添加宽度？高度，好，然后我们来看一下怎么添加宽度啊？高度 来呗，我们来给他添加一个宽度一百九，添加一个高度两百。然后我们看车驾驶室看一下，大家看一下，从上往下进行排着，那接下来我们要 他在水平方向排着，很简单，我们只要给他加上一个不落成，带不走，左不动，大家看一下啊，分分钟就上来了啊，当然因为他现在问题，他这个蓝色的盒子又不见了，是吧？好，然后我们每个盒子之间他是有一定的空隙的，我们来看一下啊，我们来给他加上一个 m， 咱把上下左右为五像素看是加是保存就可以了啊。那么上下左右为五像素相当于他的宽度是多少？宽度就是两百了，总共是一千，对吧？一个是两百，总共就给放五个盒子是吧？正好就可以放下。他这里放不下的原因是因为我们给外面这些盒子加了一个两相处的边框啊， 好，所以放不下。还有一个就这个盒子本身他有边框，又多了两箱，所以也放不下，所以我们要做的，我们可以把它加上一个背景颜色，看他这样式，然后呢我们把这个边框线注释， 那这样就正好可以放下了啊，大家可以看一下。 ok 了之后我们同样的也要解决这个浮动造成的塌陷问题。好，我们来看一下，我们说的是因为二挨家的浮动所以造成塌陷问题，所以我们要解决他的浮动问题，我们就在这里加上那个清除浮动的样式。 好，大家看一下这样子是不是整个浮动就清除掉了？那么清除掉了之后，这个整个的区块与上面也有二十相似的间距，我们可以给谁加？我们可以给最外面的这个盒子加就可以了，所以我们可以给他加上一个马，给你干 top 二十像素， 大家看一下，这样子就没有问题了。好，那么接下来我们把我们不需要用的辅助线全部给干掉啊，我们前期将辅助线都是为了让大家能够更清楚的看到它本身的一个结构，或者说 做到当前我们需要展示的效果。好，我们从上往下开始一个一个，第一个我们说这个高度要不要，不要高度，我们最开始是为了给大家演示效果看的，所以干掉，不要，干掉完高度之后，哎，这样子就没问题了。第二个这个外面的这个边框线也不需要，也要干掉。好，这个效果没问题。 好，接下来我们来接着往下看这个外面这里也有一个边框，也不需要干掉，然后这里三裂，是吧？一行三裂的这个地方也有一个边框，我们也不需要，我们也把它给干掉。 那最后就是这里了。好，这里我们来看一下，这个 u r 加了一个背景颜色，我们也不需要 好，那么整体的这样一个，你看我们这样一个布局的这样一个效果就出来了，就是外面一个大的盒子包裹着在水平居中，然后左右两列式，一行三列式，说一行多列或者多行多列的这 一个效果。啊，好，那么今天这一节课我们就给大家讲到这里啊，这个知识点是非常重要的啊，那么整个网站的框架结果，不管 任何一个网站，他基本上都是有这三种啊，硬结构来构成的啊。好吧，那我讲的可以的同学啊，可以点击关注啊，关注一下我，或者给我点个赞。

网页三件套之一的 css 是干什么的？他是给网页的身体穿衣服的，会让你的网页变好看，能做出任何你想要的样子。 css 是层叠样式表的缩写， 听起来很厉害，但不用记，只需要知道他负责管 htm 标签的所有外观就行了。我们直接来看 css 怎么工作，还是回到网页右键检查，打开开发者工具看这里。 上期我们讲了上面的元素来，这期我们讲下面这个样式来，英文是 stells， 这里呢就会显示标签的衣服 css。 再点击一下元素，可以看到下面出现了这些东西。 其实啊，我们前面写的标签已经有样式了， htm 标签会自带一些来看，这就是 css 的格式。先是一个名称，代表这个样式是某个元素的，然后一个大括号， 里面包含一些规则。这些规则呢，暂时看不懂，各种各样的也很多，我们慢慢讲。先来是一个最简单的，点击一下我们名字的标签，再点一下样式的自定义空白处，就可以自己添加新的属性写卡了。 开了就是英语颜色的意思，按太不见，切换到内容，然后就会出现很多颜色选项，我们按下键随便选一个，看到左边没都可以换， 但这个不常用，默认的颜色都很丑。先随便选一个，然后点击这个颜色，快选择颜色调整位置和透明度。井号键加六个字符是这个颜色的 十六禁制写法，就是给系统用的，我们人类不用懂，大概知道有这个东西就行。后面我们再学其他的写法，包括 r、 g、 b， 红、绿、蓝之类的常见的 css 规则，再写几个，比如宽度或者是高度，再写个 fancy， 是字体的大小， 放的是字体啥意思？是大小？懂一点英语的同学应该一看就明白了，不懂的都简单记一记， 我们写代码的时候常用的单词不会很多，多念叨几句就能背下来了，稍微辛苦一点哈。啊，我相信既然你能点开我的视频，那么这一点点单词还是可以记住的，实在背不下的就搜索，这样搜 css 宽度就有了。 ok， 相信这几个例子下来，大家就不怕 css 了， 很多东西都是这样，不了解所以害怕，了解了也就那么回事。那么这么多属性规则我也不知道啊，怎么办？还是查询来这里。比如说我们想要改变这个标签的背景颜色怎么办？搜索 css 背景颜色， 然后就可以找到答案是这个属性。 background 卡了，其中 background 再用翻译工具翻译一下，是背景的意思，那么这两个单词加起来就是背景颜色， 按照视力测试一下，给这个标签加上背景颜色，效果出来了。然后来说一下 css 最重要的功能，排版。排版就是排列版面，主要用来管理界面的不同区域，比如说我们现在看的视频界面 就是分为视频区，点赞区、评论区等等，他其实都是排版出来的。那么浏览器是怎么排版的呢？我们记住一个词就行了，盒子模型自己打字记一下。 mdn， 这里详细解释了两种盒子模型，一种是会计，一种是内联。会就是一个方块一个方块，这样子他默认会占满上级标签的整个宽度。内联就是在一个快内独立的一小部分，回到页面，点一下最上层的标签 body， 发现没有， body 上有两个默认的 css 属性。先看上面这个 display block， 我们来翻译一下， display 是显示的意思，显示什么呢？ block 快就是一块盒子，这就是盒子模型。我们把鼠标一上去，就能 看到一个全宽的方块，这就是 body 现在占据的地盘。然后把鼠标移动到不同的标签上，就可以看到不同的标签所占据的位置。 你们要看任何网页，不同标签的效果都可以，这样直接鼠标放上去就知道了。一个盒子的布局由三个属性组成， merging， 意思是编剧， bode 就是边框 攀顶，翻译过来就是填充的意思，也可以理解为内边句。我们来看一个盒子的图片，他离我的距离就是外边句 margin， 他的边框就是 bode， 他的边框和内部存放的东西的距离就是内边句攀顶， 这个很形象吧，再回来看否得默认有八 p x 的编剧， p x 就是像素的意思， 屏幕就是一像素与像素组成的一个像素，对应着屏幕背面的一个小 led 灯。我们来改一下，给 body 的 majin 改为一百 px， 看到没？外边距是不是变大了，成一百 px， 而且它的 htm 标签上也自动添加上了， 就相当于在 style 属性中写 css 一样。然后我们想改边框怎么办？来搜一下 css 边框， 这里看到波的属性，他有这几个样式简写的方法，在这里可以一行完成，宽度、样式和颜色 这里复制，拿过来用，给他加上边框一 px， 搜里的 red 可以看到边框了，然后我们再试一下内边句 panding， 二是 px 搞定， 把鼠标放在相关属性上就可以看到效果，另外浏览器会自动计算这个盒子，下面就是同样可以看属性，也可以暂时关掉，试一下点这个小框框，效果就是这样，大家可以自行实验。 其实说白了，很多布局类 htm 标签就是一些自带默认样式的东西而已， 我们自己写一个表情，这里右键 htm 编辑写一个 r e 零一标签，放点内容，现在啥属性都没有，那我们就模仿一个 h 一表情。先来看一下 h 一的样式啊，好多不懂得自己查，我们直接复制，然后来 r 一零一标签这边粘贴 ok 出来了， 就是这样，和 he 没有任何区别吗？而内联盒子说白了就是默认不换行，试一下来用一个 b 标签加粗看不换行吧，但是我们给他加一个 display block 属性，他又换行了，就是这样都可以改， 这样演示大家懂了吗？一个网页排版的本质就是用 html 标签分割内容，弄成一块一块的，再用 css 控制距离、大小等属性，把他们组合起来就能实现任何画面。 另外再说一下 css 的三种使用方式，我们一开始写 css 怎么写呢？就是直接在标签上加死掉属性，写在里面就行，这叫内敛样式。 但是呢，这有个问题，就是一些常见的属性会重复些，比如说 fantasize 十二，让字体小一点，但是用的地方很多，那怎么办？就用一个新的 stm 标 钱死掉内部样式表，在这里你可以写整个页面的 css， 但是啊，你的衣服很多，要怎么样才能穿给准确该穿的人呢？ 万一给一个 boy 套上女装咋办？这时候就需要 css 选择器了，一般有三种，第一种是直接写标签名，就像这些标签自带的这样， p 打括号，然后改颜色，会发现 p 标签的字都改了。 第二种是 id 选择，用井号加名字打括号，这时候给 stm 标签加个 id 属性对应起来就可以了，但这个一般用于单个标签，多个标签最好不要用同一个 id。 第三种用的最多就是克拉斯选择器，多个 htm 标签的克拉斯可以相同符号是点加名字，再加大款 好 html 标签加上克拉斯属性，这就相当于在一堆人里面，男孩子的克拉斯是男，那么我们分配男性衣服的时候，用点男大括号这种选择方式就可以精准的分配给所有男孩子该有的衣服了。实际试一下， 在 style 中写一个 css， 命名为红星儿克，然后下面这两个元素上直接写 class， 等于红星儿克，你看效果一样的同例，其他元素都可以共用， 当你的网页比较大的时候，这个就比较常见。另外还有一种形式，就是把 css 写在单独的文件中，叫外部样式表，这里我们在桌面上创建一个 index dsss 文件，然后把刚才的样式复制进来 保存，然后再到网页这边用，另可标签把它引入进来。可以看到，其实引用和写死掉标签没什么区别，主要是因为大型网站的页面很多，他们共用一个 css， 所以就把他们单独出来而已。 那么假如我们的网站三种方式都有，并且都给同一个元素写了样式，那么谁先谁后？ 肯定是近水楼台先得月吗？内帘最优先，内部四肢，外部最后，比如这样直接鞋死掉。内帘的颜色优先，然后内部其次。但是有个属性也可以改变，就是 important， 英文是重要的意思，看效果。 这个尽量不要用啊，很强制的，一般只在一些不好改，整个欠套逻辑的时候用。在初学者阶段，大家尽量写在 标签上，用内联就行，更准确，好记，不用上去下来，不用打开两个文件，反正你的样式也不会很多，正好也是一个练习，多打打 css， 前期没坏处的。 那么 css 就讲完了，更多的要怎么学呢？就是去别的网站打开开发者工具看啊，碰到不会的就查一查。 很多时候呢，我们自己的网站有时候不知道怎么写布局，那么就想一下有没有别的网站实现过，如果有的话，直接过去看一下别人怎么写的就知道了。 或者就是这里搜一下简洁好看的网站，然后直接看他们啊，别人扭扭捏捏啊，我自己也经常找别人的，平常一些酷炫的效果不会写就去学习一下。大佬们的还有一个很重要的布局属性，迪斯普利 flex 弹性盒子模型。现 现在的网页开发中，布局基本上都是弗莱克斯模型了，和 html 一样，大部分的 css 属性其实工作中都用不到，很多开发者都是弗莱克斯一把苏，下一期再讲，这一期就把 css 的基本功能搞懂弄透就可以了。 今天的作业是自行搜索实验各种四 ss 属性，把你的网页变漂亮一点，作业提交到评论区即可。 ok， 明天见。

好的，咱们来看一下 nes 代码呢，给我们带来了哪些新的东西？然后呢是嵌套，这个也很简单，也没有什么好说的。嵌套是什么意思呢？就是说 你以前的 cc 代码是这样子写的，写上去呢不方便，看上去呢，好像每一块是分开的，时常他们联系是非常紧密的，对不对？而且呢，他这个写起来没有写很多重复代码， 但是我们 nice 有了 nice 过后呢，你可以把欠掏来写，就这个玩意里边不是掏这个吗？对吧？你直接在这里边写就完事了，它里边不是掏这个吗？你直接在里边写就完事了，他最终一编译就会编译成这个样子。好，咱们来试一下啊，把这单把复制粘贴过来。好，接下来我们来看一下啊， 你看就变成这个样子了，变音完了，这不我们写下就非常舒服，又得签套。而签套里边呢，还是可以进行层级签套的啊，比方说这里边我们可以来签套一个 a c e 元素选择器啊，比方说随便写一个。好，防晒是三页随便写一个啊，你看 转换过后变成这样子了，黑的来给异性下面的 h 一对吧，是不是出来了？我们这边看上去非常的舒服，他有个嵌套关系在这边的看上去就不是不是那么明显了。 好，这是嵌套，嵌套里边呢，还有一些小的一些细节啊，比方说我要写一些，呃，就是我比方说啊，像有一些 aoi， 像这种情况，嗯，我随便举个例子啊，比方说这里边有一个 knife， 我写下边吧， nes 车下面呢有很多的 l i 啊，这些 l i 呢有一些样式啊，比方说我们一个 color， 呃， 我这里没有用变量啊，就拿着，你先不着急用变量吧，用这个。好，我们来编译一下看一下。好，你看是不变异成这个样子了，没问题吧？哎，那如果说有些 l i 就是我如果说我们要形成这种格式 active 有一些 ay 呢？它是一个选中状态，选中状态呢？我可能要把颜色变成 f 四零。比方说我们要做这么一件事，那么这个代码怎么写呢？那如果说你用这种方式写的话，直接写个 it 好了，那是达不到要求的，为什么呢？我们来试一下啊。 好，你会看到是这个样子，他中间多了一个空格是吧？你看这个欠套关系是不是都是这样子？他空格这个，然后再空格。 对，你看前面都是这样子，对吧？他变成了什么后代元素了？但是我要的是后代元素啊，不是，是一个，并且关系他下就是他同时拥有 x t 五的时候。那怎么办呢？加上一个 and 符号对吧？这个羽翼也非常清晰。 l i 同时 and 同时具有 active 文的样式的啊，加上一个 and and 的话它就没有这个空格了。好，你看 你看你看，就变这个样子，对不对？所以说我们通过这个 and 符号呢，可以做很多事情，比方说我要加一些伪元素 after， 是不是我们可以加这样子？写好运行看一下是吧？就是如果说你加了，你没有用这个安子的话，就变成这样子了， 他中间有个空格了，就这个区别啊。那如果说你要用子元素的话也非常简单，比方说我这里的 oi 下面的下面的 a 元素用个大于符号就完事了，对不对啊？这个 decrease 你看是不是有个大于符号了，其后这么简单，没有多少复杂的对吧？他可以轻易欠套，欠套的时候呢，如果说你要接着写，那就用按的，不用接着写的话，那就啊用大于啊，或者是空格都，就是什么都不加，那就空格都可以。 关注读一简介号的同学插播一下，我是袁老师，你能跟着我学到这里，那么我就再送你一个好东西。为此呢，我录制了一套大师课，这里边一共六个章节，每一节都是你求职比面试和在职提升必须 必备的东西，像什么世界循环啊，浏览器渲染原理啊，属性描述符啊，还包括几个经典的实战功能案例，甚至唯有的原码思想拆解等等等等。我坦率的讲，凡是里边涉及到的知识、权势的深度都达到了原码的级别， 你基本找不到第二个人能剖析到这种程度的。也就是说，一旦你比面试或者工作当中遇到了这些技术，你表现出来的水准在其他的竞争者中有着压倒性的优势。 关注袁老师这么久了，我也帮不上别的忙。那么这套大师课呢，算是袁老师送给你们这份大礼，不必客气。如何领取评论区第一条，进咱们的粉丝群，然后根据提示领取就可以了。

大家好，这个视频呢带大家来用 css 做一个弹性球的动画效果，也就是大家现在看到我们页面上面的有三个小球在不断的上下跳动在弹跳，并且呢每两个球之间呢，他们弹跳的时间呢，是有一定的时间差的， 还有就是这个小熊在弹跳的时候呢，他底部有一个阴影，这个阴影呢也是会随着这一个小熊的弹跳呢发生一个变化哈，我们就看一下整一个动画呢是怎么做的，现在玻璃里面呢，写一个叫 boss 波的这么一个 dav， 哈， 这个 dav 里面呢再放两个 dav， 一个是放我们这个小球的，还有一个呢就是放这个小球的阴影了，叫 sharedo 这两个 dav， 然后来斜一下他们的样式，先控制一下波点，给他宽度呢，百分之一百的丝口宽度，还有高度呢，也是百分之一百的丝口高度， 再转换成弹性盒，控制一下这个居中。 好，然后就来斜一下这个小球的样式，先是外面这一个 boss 波这个小球，外面这个大盒子，这里先随便给他设一个宽度高度，三百五乘个三百，上面这里这个转换成弹性盒，这里呢给他复制一下， 再来写这个小球的这个小球呢，让他一百乘以一百的 变成圆，百分之五十的这一个圆角，再给他设置个背景颜色，用这个渐变的裂捏姑娘点，然后呢传这两个颜色进去哈，一个红色的渐变，先来看一下效果，现在呢这个小球呢就出现了，我们 先让他给运动起来，要让这个小球给运动弹跳起来呢，我们只要给他加一个，加一个动画就可以了，这里直接呢就 from two 两个状态就可以了，我们控制一下他这个 transform translate y 在 y 九上面的平移哈，一开始是零，接着就是突 吐的时候呢，我就让他全是 lev， 让他平移三百五十像素，这里应该是负的，一开始呢往上面来跳，然后呢再给这个小球绑定这个动画木五百毫秒来执行这个动画循环播放，然后呢再反向执行一次， ok， 现在呢刷新呢，我们这个小球呢，就可以在这里弹跳起来了，再给他做这个阴影，阴影呢，就是这个三斗这个 dav 啊，我们来学一下他的样式。 宽度呢，给他一百五十像素，高度呢，给他四十像素，给他个背景颜色黑色的 播的瑞典呢，给他百分之一百变成个椭圆，好，现在一刷新呢，这个阴影他就出现了，但是他位置不对， 这里因为这一个 boss 波，这一个大的 div 呢，设置了一个弹性盒，所以呢，它里面的元素呢，就会沿着主轴水平排列哈，所以这个黑色的阴影呢，就会出现在这个红色这个小球的右边，我们现在呢，要让这个阴影出现在这个小球的下方才对，对吧？ 所以呢，我们这里就要给他更改一下主轴的排列方向哈，让他按列来排。现在呢，我们一刷新呢，这个阴影就出现在这个小球的正下方了，但是呢，这个位置好像还是有一点点不 对，我们给这个阴影调一下，给他增加一个 mattel 外边句，上方的外边句哈，给他三十个像素，让他这个一个小球呢，刚好可以落在这个阴影里面，对吧？ 这样这个阴影呢也跟着运动起来，给他也加上一个 ique face 哈，名字呢叫 山东母。这里是直接 form to 就可以了，让他呢一开始控制一个透明度吧，一个零点二的透明度，再来做一个 trustful， 然后是掉控制一下他的一个缩放，一开始呢给他个零点七五吧， 然后就是突突呢 opposite 呢，上去的时候就让它变得更加小一点了，让它零点零五再来做一个 twins four skill， 这个时候呢就变 成一再把这个动画呢绑定在这个阴影上面就可以了，和上面这里是一样的哈，给他复制一下， 然后再改个名字，这里呢就是这个山东木。 好，现在一刷新呢，我们这个阴影和这个小球呢就可以同步运动起来了，这里我们已经实现了一个小球的弹跳的动画效果。那要三个小球的话，是不是把这个 div 给他复制多两份就可以了，对吧？ 好，这里呢我就复制多凉粉再来看一下效果。现在一刷新呢，哎，三个小球出现了，但是呢，现在呢三个小球都是红色的，并且呢他们弹跳的时间呢是一样的，这里再给他来修改一下。三个小球呢，我们分别给他三种颜色，这样子好看一点哈，就分别再给他多 加一个类吧，一个红，一个绿，还有一个蓝，这三个类呢，就可以分别给他们控制一下他们的背景颜色，来单独学一下这个样式。先是这个红的， 直接这里就把这一具背景颜色，这里呢把它放下来，下面这里就可以了， 然后呢就是这个绿的，也是这个背景颜色渐变的 renai 古脸点，它是这两个颜色绿色的一个渐变，接着就是这一个蓝色的， 好，来看一下效果，现在一刷新呢，哎，三个小球它的颜色呢 就不一样了，我们再来给他更改一下他们的一个运动的时间，这里我们就来控制 这个绿球，还有这个篮球，让这两个球呢，让他们的运动稍微延迟一点，这样子呢就看起来三个球的运动呢就有一定的时间差，这样子看起来就好看一点哈，这里为了方便，等一下可以同时选中这个球，还有这个阴影，让他们同时做一个动画的延迟， 这里呢就给外面这个点边的给他再加上一个类名哈，这里叫一个拘波，下面这里呢就叫 bbo， 再来通过样式控制这一个动画的延迟，执行呢就可以了，在这里写就这个 b box 下面这个 boss， 还有呢就是这个 b box 下面这一个 shando， 就通过这个 anime 定类，让他呢延迟五十毫秒来执行这个动画。还有这个拘捕，这里呢，复制一下就把这个逼改成这个拘，这个绿球呢就让他延迟八十毫秒来执行这个动画哈， 来看一下效果，现在一刷新呢，哎，这三个小熊呢，他们的运动呢就有一种时间差的这种感觉了哈，好，感谢大家的收看。