00:00
啊，我们说我们要画个风车吧，是不是我们说真实开发中要需要你们换吗？不需要，是不是恢复一下是不是就这个东西，其实我感觉也好像是张图片，他没有画了。啊。看一下你讲下走音。Oh my god啊，他没有画，就他就什么有爱帮你画一张图而已，知不道其实这种东西我们是可以画出来的啊，稍微有点烦啊，我们就不这么画了啊，这么画估计不知道得画到什么时候啊，我们画个线，画个稍微low一点的。OK。好，我们把这个东西打开来吧，我们看的话。在哪边？好，我们也让它算起来是不是好这种比较朴素的啊，还是可以很快的把它给画出来了，CTRLCCTRL102。
01:03
好，首先我们分析一下应该有几个结构。五个结构是不是好？首先肯定外部有一个包裹，里面有四个。Div是不是这些div的话应该要干嘛。要不要浮动起来。啊，先先不管了，先换来一个外，来一个外思维。300PX吧，也为300PX描个边，一撇X的实心是不是，然后呢？然后呢，他就让它让它居中一下啊不斯洛LEFT0。啊，这个我就帮你们多写几遍啊，Left right top。
02:09
But啊，我都写好多遍了，这句话你们有点干嘛，对不起我了。好，过来了吧，好，然后里面是不是应该有四个小的div啊，外底下的直接的div选择器稍微找精确一点啊，为什么？因为你这边如果写个后代的话，里面你下一步扩展的时候里面再有div，那就完蛋了，对不对？所以每次写样式的时候，这干嘛写的稍微精确一点，OK，外底下的div吧，就只道这些直接的div给他一个外。应该多少，是不是他们之间会稍微有点空隙的，比如这个空隙我们给个马给吧，给个10P行不行。是不是，那给的10B X的话，空隙他们两两空隙是不是就20啊，也就是说这边的空隙其实总共就有40了吧，这边有20啊，这边十，这边十总共有40吧，那占据了40的一个空间，那300减去40等于多少260，那它的外是应该不多。
03:18
减去40那个两百六吗？两百六除以二会天哪，那一百三吧，是不是啊呢，一百三吧，刚怎么写了个80。先给他一个背景，我们看看看能不能出来。嗯，我不第一个平等，你看一下是不过来了，让他们去银行怎么办？浮动提不提升成啊。半径是不是OK？好了，看一下现在是不是在一起了，你如果想给他加个边框，我问你会不会破坏这个。
04:06
那怎么办？Books现在加边框就没事，不会破坏，不会破坏布局了。一撇X的S。完美是不是你想你没有这个东西布局就坏了，因为你差了几项。是不是啊，OK，算了就OK了，好，那现在不就是画什么，这是椭圆吗？封了，呃，这两个是尖尖角，这两个是圆是不是？OK，这是正斜杠，这是。反斜杠是不是这也是正斜杠，这也是反斜杠，说明这两个元素。是一对是不是，这两个元素怎么选中。
05:00
学怎不选择希腊选。怎么选中，一次性选中这两个选择项啊，这两个元素。记住这个行吗，强强。这是不是我们第一个元素，这是第二个元素吧，第三个元素在哪？这是不是第三个。这是不是第四个元素啊，我浮动的嘛。是不是你不要干嘛这么给我转过来啊，OK啊，我是浮动浮上去的，1234懂道，那是不是141组231组啊，是不是141组231组，1423好像没有什么规律吧，那怎么办？那选吧，是不是外分题下的第啊是不是OK，然后呢，一还有谁？那的是是吧，这里面用那跟那是一样的，OK，干他们是不是应该有一个不的。
06:02
是不是，而且是不是正斜杠上面是尖尖的，正斜杠是不是零啊，反斜杠上面是不是两个圆啊，OK，那就是60%不行，差不多吧，是不是另外一种呢？二三另外一个是不是反的是吧，那就干嘛60%跟零嘛，走你看一下。出来了吧，是不是把外面这个边框干嘛去了，走你。不是我去的谁的边框？应该把这个边框给他去了。是不是花瓣是不是就出来了，就就算转了吧，怎么转。然后呢，喝谁你先告诉我这个得知道外最大那个容器在我后上去的时候点他转吧，钻是没有学过啊，这边先给你们透露透露，全是风里面有个叫的，这个代表转的意思，等到我们说旋转，比如说我让他旋转个度来看一下。
07:17
你你看他有没有后就是不就赚啊，这个现在讲上去是干嘛，极其简单吧，A篇就这样的，极其简单圈子方里面有一个函数叫做的代表旋转力子旋转多少度，120度。能不讲OK现在看是不是干嘛没有这个动画，是不是OK想要他有动画怎么办？是在会谁去转？谁在转外，在转吗？动画给谁给外？动画怎么写全三行吗？是不是我让你两秒钟转完，可不可以走，你看一下。
08:02
动画是不是就出来了？是不是啊？抖一下，因为旁边是滚动条了啊，怎么禁止系统滚动条正好，怎么禁止系统滚动条。HT这个有没讲过禁止禁止系统头条。肯定讲过，有没有讲过使用绝对定位去模拟固定定位啊不，有没有讲使用绝对定位去模拟固定定位，对，使用绝对定位去模拟固定定位。绝对定位去模拟固定定位没讲过吗？用去模拟的，这没讲过是吗？啊，那这个稍微给你们扩展扩展啊啊暂时我们知道怎么去禁止系统东角先先看我的写法啊，看的一定得是百分板，他们是不干嘛，一样大了是吧？一样大这个来说什么欧为我had就能禁止系统滚动条来看，OK，你看再再怎么样都不会出滚动条了，懂不懂，OK，你们有没有讲过包含块啊。
09:09
讲报刊的时候没有去讲这个怎么禁止系统默认股东条吗？也没讲过怎么用，觉得你会去模拟例外。啊，OK，好，那我们扩展扩展吧，好不好。好，那我们先把这个风筝给他画完，这个风是不就完了，这个能不理解啊？OK，好，那是不是还得画一个对话框，是不是OK，来看下这个对话框在哪。嗯。我来看下这个地方放在哪。对话框是不是它OK，这个也好画吧。是不是啊，OK ctrl c啊，不要用这个浏览器，这个浏览器太卡了。
10:01
OK，是他好，这个应该能画吧，大家是不是，那我们画一画吧，好吧。怎么画方案，什么样的CTRLC？尽量用自己学过的一些东西啊，我们说对话框。怎么画？首先分析几个元素。三个三个是不是这需要一个包裹区吗？不需要，我又没有，我又没有让他赚是不是OK，那怎么样来看我玩。OK，我就需要一个一个元素就够了，OK，我要一个元素就够了。对话框，那不管了，Test。首先这个对话框是一个椭圆，是不是等？
11:03
嗯，感觉我电脑要炸了，好想让他怎么变成一个椭圆，那应该首先上来Y为。看稍微大一点吧，300吧是吧，看呢。200TX吧，是不是，其实这种形式下的话，大家想想，如果。不纲radious，我来一个边框。播的EPX的实心是不是来看下这个东西在哪，是不是在这边，是不是我的好像稍微大一点。四百两百。是不是差不多了，是不是让它变成一个椭圆怎么办？波德纲，Radius。是不是，嗯，看如果直接给50%是左右。
12:00
有是因为50%嘛，参这个是参照于谁的负极的宽高吗。嗯。本身效果，你本身就是。所以说其实这边应该是200吧长度开通什么宽度的吧。不是200，好像这边的写法就是200PX，斜杠100PX吧，是不是各取自己的50%啊，是不是啊哇，百分比还有这个作用。那这这样出来是不是就是个椭圆。是不是啊，诶，我从来没这么玩过，OK，好，是不是出来一个椭圆了，里面是什么。大家好，欢迎来到啊，大家好啊，欢迎入坑前端。
13:04
好，前端是个巨坑，是个天坑，OK。一直以为学前端特别容易，是不是OK，他们说是因为他们不懂。Fo。50PX那个字体叫hellokitty，这个字体叫hellokitty，不是hellokitty，对，走你我的天呐。为什么，为什么？是我行高被覆盖掉了，我放的是个简写属性，你行高写在上面去了是不是啊，所以行高一定要写到下面，简写属性用起来是有坑的，这里面是不是斜杠里面是有一个默认指导，OK。
14:04
水果是不是好？小点是吧。好，不敢。不改了，是不是OK这个框就稍微大一点嘛，然后是不是两个气泡，两个气泡怎么写呢？一般用元素来写。两个元素嘛，全部用掉。一个是after，是不是九年。我们说它的display为。一定要有，是不是OK，然后呢。对FORM1定要有content的，是不是很明显他们俩应该要要有定位的，而且要参照你这个大框的定位是不是，所以说你的定为是得是肯以等什么样的题。
15:07
是吧？他们俩呢，肯定是为你看我们写的一模一样的代码居然不能服用，是一件很痛苦的事情，是不是啊，所以说CSS这个语言好不好？不好，一定要有，要有其他什么补充的东西，让我这个代码复用起来了啊，这就是我们预处理需要干的东西，懂不懂，当然你也可以服用老师，你这是不是傻看。是不是，是不是也可以好像。是不是？没东西没东西看嘛，大家待会待会看他能不能出效果嘛，是不是啊，可是我问你有些东西是不是不一样的，是不是还得得拿出来，那我们先先先不要这么写啊，OK，那是不是参照他来定位啊，OK，他们俩是不是框啊。啊，OK，这边是不是为80P吧，也为80P吧，啊这边主要听思路啊，听一些编码上的思路，这边稍微干嘛小一点，这边是。
16:18
60吧，这边也是60PX吧，是不是都应该有一个波的，是不是这没问题，这点来看一下。说一下是不是他他们在这啊，我说一个是before，一个是阿，要抄他们俩定位吧，那是不是定位到它外面来啊，那怎么办。他的什么应该去考虑它的什么东西了。是不是我的框是在这边呢，是不是啊，现在一个比before一个阿嘛，想把它定到外面来吗？是不是啊，怎么办？考虑它的right跟什么。波特嘛，还需要考虑top跟吗？不要了，考虑跟波特懂吗？OK，那也就是说什么我的阿这个什么，这是比较大一点的，首先我们看这个波特为零的时候，看能在哪呗，是不是为。
17:13
标题为零的时候，看它在哪呗，是不是，所以你看它在哪。是不是跑到这边来了，好，这个东西是不是也稍微过来一点，OK。给到一块去了吧，是不是，那这样我让他应该调成正子还是负责。正在是负责，现在是我跟是不是这样的。是不这样的，Right跟波的都是零吗？是不是，那我是不是要调成像想这个框出去怎吧复制吧是不是？嗯，比如说这边要给个负10PX，那肯定是往外稍微要走一点的。
18:07
是不是给个话。走过来嘛，另外一个再走夸张点嘛，走个负。试试。试试。也不够，那就80啊，这个位置自己去调啊，啊天呐。我逼疯了呀。OK，变成圆的吧，OK。圆的在哪啊，波直接过来。直接过了是不是OK，是不是就好了，是不是啊啊，我之前碰到过一些同学啊，就那么几个同学啊，上到课上到最后一天了，我去串讲的时候，他居然都不知道这个定位到底是一个什么样的机制，刚刚我们是right波特为零了，比如说这是我外面这个盒子里面一个元素，参照这个盒子去定位right跟波特为零是不是应该在这边。
19:09
是你自己的外，不要干嘛，顶上去吧，是不是我们说正直是往外。正直是往里还是往外？定位的时候，正直是往里扩还是往外望？想想正直，正直政治是往里收复，只是往外扩，是不跟我们这个坐标是一样吗？跟这个跟这个坐标一样吗？跟这个一样吗？不一样，懂不懂，所以说你们看定位的时候要去想这个坐标系吗？不要想怎么想，哎，比如说我现在有一个容器里面是不是有一个元素啊，这是零零的时候是不是啊，你如果是个正值，就是干嘛往里面搜，跟它稍微有点距离。
20:11
往就往里面搜，懂不懂说其实你在考虑这个定位的时候的话，因为你是考虑的是right跟波整个坐标系已经换过来。他应该是长这样的，懂吗？如果是那的呢，你看，如果是那，那么很容易想吧，你看。这边是不是这样的正直是不看是往这个方向走的是吧，你看因为你考虑是跟波反过来了，整个坐标系它也反过来了，这时候整个坐标系它长什么样。上那个。所以说你给正值就是干嘛往里收的。给负值是往外走的，懂不懂就会有同学在最后一天都不知道这个东西，那就有点过分了，懂吗？啊，这是前段里面最最基础的东西啊，关于一个坐标系的变换的问题，对吧，OK。
21:11
好到这一块，那基本上我们圆角的东西就要讲完。能不能听懂？
我来说两句