39_尚硅谷_h5_视频播放器布局.wmv原创

继续好，那这个脱掉做完之后，那就把其他样式也可以先来画一画了，好这里，那我这个粉红色的这西不是可以把它给干掉了，OK，找到来，好把粉红色这个块子嘛给它干掉，这样。进度条吧，粉色这块给它干掉是吧，那粉颜色这块东西就已经做完了啊，做完之后把它给合起来是它就完完事了，用less就是这个好处。是不是OK，我一块块写嘛，现在是不是写他们俩来看这个八四，八四里面应该是什么。两个按钮吧，是吧，OK，我们来看一下两个按钮，那写这两个按钮的话，其实我们要找图片。好，这是我们的什么学B图吧，OK，这里CTRLC找到了，连过来，OK，我们来看，我们说这个80现在里面应该有什么。有两个吧，是吧，OK，我们来看。

按钮排按大小宽高吧，按大小官宽九高吧，按你是谁？按钮是它底下两个磁盘嘛，你看我这里面这个基度量就已经做完了，你看它里面是不是两个磁SPAOK，那把这两个磁盘找到。是吧，是他底下的是吧是吧，这么想我能怎想，是不是应该这么想找到他底下两个SPA嘛，是吧，走你他什么磁SPA是个那点是吧，是他先改成一来洛克吧，他们俩他们俩去一行嘛，对吧。他们会去银行吗？我省的浮动了，懂吧，OK，怎么办？外省没多，九九高11吧，OK，还。好走里好，它应该是有一张背景图的吧，是不是八和光的什么URL背景图是一样的吧，图同一张图吧，底下什么背景图放哪了？

这里是要引号不用不用引号就底下了么。这个小玩意谁是干嘛能是吧，来看一下。刷下这你有吗？没有，为什么没有？为什么没有哪边有问题？Buttons底下的代。Buttons buttons绩效的什么？失败吗？这个有没有。向下，为什么？看这两个图有没有出来。啊，这是零一吧，我们现在是多少还是在零一里面吗？是吧，哎，这是为什么，刷一下看这两个东西有没有出来，八三是在这吧，好，底下两个失败在不在。

是不是在这呢？黄金色你给他干住了是吧，把黄金色去了。哦，这边是不是也有个北京。是不是？有问题吗？位置不对吧，那我先不管了，先干嘛，先把这个一路给他干嘛干掉看。是精灵图没有出来是吧，那怎么办？Background position吗？光的什么杠吗？Center center先来看一下。有没有还是没有？是不是，那这样吧，直接调吧，直接调这个零吧，是不是，哎，不对，后面好像有报错没拿到吧。

是没拿到。没找到，不对，想想咱们这个文件在哪CSS里面啊，用了这个图片是不是得出去啊，点点出去吧，好给干掉。这里，哎，是不是有了是吧，来看一下是不是在这，OK来干嘛，现在再来调他两个人的半个不，它的规矩不一样，OK，我们来吗？我们说。能不能再来杠一是吧，给他来个什么background光的杠，可你看用这种嵌套的写法的话，你上面是不是。你上面选择题的特殊性不可能比他大吧，哪怕你里面有白关系，我肯定能把你覆盖掉。

是不是啊，OK，这我们看，比如说先给零零嘛，给一个0PX，给个0X慢慢调嘛，是吧，所以看一下在哪。是不是在这OK。是不是他OK这个多少负23左右啊是吧，OK，那这边给多少负23是不是对了，是不是还有另外一个，另外一个是不是不用动啊。另外是不是不用动啊。另外是不用动嘛，你看方块嘛，我不就就是要这个方块嘛，是吧，OK，另外一个不用动，那干嘛0P吧，是不是把这些写了是吧？OK，我们来看一下，好，现在大家看现在是不是想让他们俩居中啊。是不是怎么办，大家想想，你不是，你不是依赖格吗？那我等于生成能力能不能管用啊，应该管用的吧，只你哎，不对，好，你是不是到了中间了，他们当中是不干嘛。

有些距离的是吧，那我给上面这个吧，来个market right给个10PX吧，差不多看一下是不是分开来了是吧，然后呢，给个然后看是吧，行高给个吧，25PX，那是不是就。韩国要给。给这个buttons吧。是不是？不对劲，给韩国不行啊。因为我不是文字啊，是不是啊。他只是个依赖吗？他是可以起，他可以起消的吧？那想想我高是15吧，他们两高分别多少？11吧，差不多少。

差14码。25减11不是14吗？马给七吗？这不是最好的句子话。是不是给多少GPS也是可以下来的？之后你是不是就过来了，那没想OK，那这个布局是不是也完了，好，那这个布局完了之后，他还有还有什么布局啊。这边的布局吧，布局我们想想怎么做。一个这个这个文本为什么没有出来，现在。好，这个是不是可以合上去了，OK，咱们现在开发这个二吧，看这个二二什么。是不是这个time OK，我们先写第一个time点，现在能不能体会到预处理器的好处啊，能不能好，为什么这个time现在你们这个字看不到，你方向已经被我重置过了吗？重新重新回10P。走，你把这个绿颜色给它干掉，看一下行不行。

哦不不不，T是不是T你。这字不就过来了，这个字应该是一个什么颜色，白色。就过来了，OK，行，高应该有多少。25吗？一共不是25吗？只你那就下来了，是不是OK，那这个是不是就做完了，好做完这个之后，后面还有什么音量的图标干什么。进度条吧，是不是我们来看一下，好，我们说右侧信息的大小，文字的宽度宽回到。文字代表的颜色，白色吧，宽度是没改。为什么给宽度哦哦，你看他是不是都分了宽度一百二声音全屏那个是。这个是不是，那怎么办？我们说其实这个item，我们看这个time是一一个。

是不是，那就给这个碳来什么宽度板，120PX是不是可以了。音是不是就在这边啊，然后呢，他其实还有谁。You time。上资料看下。For什么嘛，是不是只要你那这个for好，它们的宽度分为多少。差不多。一百二八十。还有还有多少是不是就可以了，OK，高度呢。高度统一多少，你看它底下是不是都是D啊。是不是这三个叠压啊，高度应该就是25吧，那这样写吧，24以下的直接的所有的什么D高度同一阶段。

Div高度统一给25。是不是就可以了，来看一下这里。好，分别给些颜色，我们看看它在哪。Background，光的again picknk background光的again，低picknk background光again yellow，所以你看一下是不是都在这，好，只有一个在这，其他两个就排到下面去了，就是快计元素嘛，他们应该干嘛浮动起来，有这些D干嘛弗float统一为left。统一浮上来是不是就过来了，怎没讲OK，这个pink这块是不是已经写完了？好，Pink这块其实最好也是什么text center，所你干掉OK text等于center，是不是现在你应该感觉到这个less的一个。

优势了啊特别明显，OK来看一下这这个里面该怎么办。这个里面，这个里面还有几个结构。上这个太不完了是吧，看这个上几个，这个起个什么吧，来看一下。好切换这个空件是不是个我们这个Switch啊，宽高20是81个占21个占60嘛，是吧，那就好写嘛，它叫什么SW什么I吧，是不，他的一个20PX是OK，还有下。是吧，OK，进度条吗？好的道。对吧，60吧，是吧，只点我们来看一下，现在他能他们俩能出来吗？肯定出不来是吧？OK，这个是V7，我给个背景这个也给个背景这个这个给听们来看他们俩能不能出来。

肯定出不来是吧，因为都没有高度嘛，是吧，怎么办，我们说算是底下所有的吗。点读。嗯，怎么写这个。它底下的所有的D吧是吧，统一给个高度25PX照样他们也应该干嘛浮动起来，不浮动没有去没有办法去。一排嘛，是不是就过来了讲再看这个什么。是不是这个这个是真的用来放什么的图图标的吧，你看这些吗？切换控件。那看是不是高度为12乘以12的相当于我这个图标的高度，其实干嘛只有12乘以12的，只不过它放在那个20乘以25的容器里面，懂吗？OK，怎么办？走吧。

对吧，识别叫什么。是吧，这怎么想直接的什么这个display display个什么in了吗？是吧？扣括号多少参数，参数是不对的表。是不是OK，全部给他干嘛？拎过来是吧，CTRLC。好CT好有一个马嘛，十二十二码啊，你因为你的高度为12码，是说两边应该分，因为你整个高度为25码，你自己的高度为12码，那是干嘛多了13啊，你想垂直个码，13除以二嘛，6.5嘛，因为我们又不支小数，所以所以就给了个七码，他们应该有张被你读大好那白就不断去掉啊，注意零负三色，我们看一下路径，问题是不点点斜杠就叫什么。一走，你看一下。

是不是在这边，那它居中怎么办？Text责任等于那就是不是。居中啊，不懂把这个什么身份给他干掉。这里。是不是就过来了差进度条吗？进度条的样式还需要写吗？进度条还需要写吗？进度条样式在哪？是不是跟这个是一模一样的，是不是OK，那能不能，那能不能复制过来。你看它也是什么结构都是一样的吧。是吧，我们说是不是也是在这个progress底下，是也是在这个底下，它有个什么。外你看我们这边也是一个，但是也是一个外吧，是吧，结构都是一样的吧，其实我们说这边东西是不是就可以去抽抽抽成一个混合了。是不是啊，这个东西是不是干嘛一模一样的。

是吧，那怎么把它抽成一个混合，我们定义在上面嘛，我们定一个混合吧，混合怎么定义啊，点pro ss不是关是不是找你好，我们说干嘛。把这个东西干嘛，直接。过来吧，是不是？是不是这样的？这里切过来吧，切到这个里面来吧，是吧。现在是不是。是吧，应该可以吧。来看一下这里。看看看看吧，行不行啊。什么事情都得试一试，只要你干嘛是吧，谁啊？他这边是不是直接掉下这个混合就行了，好上面还有哪边有的是不是这边干嘛直接给他调一个混合是不可了。是不是看行不行。说下。

为什么啊，我们来看一下想想啊，有有一个小问题，其实你看东西有没有过来。看一下F。东西肯定是过来了。看到没有，谁在这吧，不管你看是不是在，跑到下面去了。是不是挤下去了吧，为什么挤下去了，大家想想你之前给的这个混合里面。大。我们看一下这里面有没有什么market什么东西啊。你的外是不是百分百。是不是想想我们这里面这个外部的外是百分百吗。外汇能不能写百分百，想想你这个外面这个progress大卡，你的pro是不是要定位的，我有定位吗。没有，是不是我们缺了个定位啊，是不是只问你我们是不是了个定位，那这个定位最好也写到这里面去吧。

是不公是写到里面嘛，那我上来这边写个定位。行不行，其实我还能这么写，因为我不想去影响到什么后面的嘛，我这个文是不是应该这么去定呀，因为你里面所有的定位元素参照都是参照我外面这个什么包裹的嘛，是吧，我这个包裹的不就是我这个。Progress那边讲你看，那我在这边用这个，再再来打开一下刷一下。OK，这里看看。是不是还在这边。是不是他们俩没有浮动起来？是不是是不是没有浮动起来一个扶助作为left它呢。他是什么？哎，他怎么没有相对定位啊，他有个相对定位吧，他应该干嘛，因为你们要排你们，你们有什么排在一行吧，所以说你们应该干嘛。

大家看一下，现在算式加A，不是所有的div全部浮动起来。我定位没关系啊，你这个D不得浮动起来吗，我们看。他的点位是谁？我们是不是要算式底下这两个一个嘛。浮动起来是吧，我们来看一下。只有你算是底下的div吗？全部浮动起来吗？他们俩不就应该已经浮动起来了吗？可是我们看你看普通快身上是不是有浮动的？十倍上是不是也有浮动的，只不过这个十，十倍的宽度为20吧，不宽度为多少？60上的为80，应该正好啊。可是为什么被挤下来了？看葡萄白身上有没有什么其他的一些，我靠，你看它里没有什么。In是不是in？我让他记什么？我会选吗？没有啊，妈，你不是写的自己的一个吗？

特殊的样式吗？是不是，这是为什么，为什么他还能继承到上面这个。麒麟样的话，我是拿什么直接呢。你底下那个好像也是。他怎把monkey也给他继承了？你看他说是干嘛。你看这什么这个什么progress，他是不是还拿到了这个market啊，这很奇怪啊。为什么能拿到这个market？是我这个混合的名字问题吗？改个名试试。再来看一下这个上来了是不是我干嘛，我是把它跟取的跟他的什么立名一样了，是吧，那怎么办。

换个名字嘛，是吧，这叫什么。Progress。C掉一层。CTRL掉一次好，这边再来掉一次所看一下刷一下，哎，这边是不是就已经过来了，是不是OK，然后干嘛，我们把这个粉色给他干嘛干掉粉色在身上，是不是在他身上干掉，走你你看现在是不是把这个东西抽象好，以后想要去。写一个基础条就对吗？样式直掉下来就可以了，懂吗？OK，说一下现你现在你想让它动起来怎么办？好比较好做了吧，是不是跟这个嘛一模一样的是吧，怎么把这个一换掉呗，是不是，那怎么办。再来一份嘛，是不OK，这一二嘛，跟拼格吗。

二码这么拿去拿最底下的。不是CL底下的吧，是吗吧，是吧。20角相当于我在这边加一个20。点底下什么，20底下是什么。说吧，其实其实这样就可以了。是不是咱们直播干嘛少写了一层嘛，是吧，来看一下整体，然后然后怎么办，这些东西干嘛统一干嘛。吗？这是二码，这个也是二码是吧？走你这个吗。Y派二码是不是干嘛，这是宾格二码是不是就可以了？完事了吧，好，来看一下看行不行。孙尚下这里。

选择题做了吗？啊，我这些都是直接的吧，是吧，那这个底下不能这个这个跟这个直接不能用了吗？之前用过了吗？后台是不是也很样。这里哪有后代，好上下这里。嗯，是不是可以啊，是不是可以啊，你看这个是不是也可以，是不是啊，那现在我们是不是，你看我们抽了几个组件，GS上面是不是抽，这是我们第一次去抽组件嘛，你看GS上面是不是抽了个组件是吧？S里面我们是不是抽了混合。是不是，那其实以后的写法，比如要要什么。还要复杂，只不过咱们现在这个抽象，说实话只是干嘛，我们说想到这一块我们去吗。做一个抽象码，那以后我们是有一个整体的规划的吧，哎，哪一块我们写的时候要做抽象是吧，所以说你们现在做这个播放器的时候先码。来感受一下，因为一开始我们你看我们之前写播放器，在其他班写写播放器的话，其实写的很简单。

大家看其其他班写播放器，你看样式都是怎么写的。用CS形式写的吗？是不是，可是我们不是已经学了less什吗？老师说在我我们在写这个播放器时候，你看直接使用什么less写吗？你现在要彻底的明白less的好处在哪。能不讲OK，而且知道我们干嘛，这个组件的定义在其他班我没有手写过啊，因为因为他们看上去都懂啊，不知道你们班之前有没有讲过这个东西啊，这个这个东西你要给他看懂，而且要知道我是怎么调的，你们讲啊，这个这两个东西你必须要看懂，一个是里面这个。这个就是在写C加这个less的使用，第二个是什么拖拽插件的一个使用，懂吗？OK，那我们暂时先写到这块啊，待会我们是不是后面还差一什么。全屏啊，而且还就是所有的功能我还没做呢。刚刚画完页面吧，是不是啊，要不我把这个也画了吧，这个简单这个吧，我们把这个画了。

看吧。好，这个可以合起来了是吧，OK，我们说干嘛，这个已经写完了，Progress也已经写完了，Others里面这个什么time也写完了，上次也写完了，是不是就剩他了，是不来看下它的个参数。OK，好，全屏的时候指向全屏看都有段38 OK，我们说真正的按钮在哪。是不是它底下有个SPA，这才是真正放在什么全屏按钮的地方嘛，是不是，那怎么办？一模一样的吗？不就是它体现了什么是吧，大于是吧，OK，一模一样的吗？第四六，什么。曼不嘛，就这些东西嘛，CTRLC直接贴过来。CTRL平方相差居中怎么办？相它居中的话，你这边去干嘛，你的高度是不是也应该叫什么指定下25PX啊他居怎么办？什么下点去是不是是不是这你看下刷一下是不就经出来了，黄色把它干掉。

祝你。你看是不是就在这讲不讲，那整个布局上面是不是差不多就已经做完了，那从这个布局里面，首先学会less使用，第二个你知道，哎，我们之后会怎么样去抽取组件，能理解吗？好，现在我们是自己抽组件，以后学的框架，就是框架把你定义组件，所以一定要有这个组件化的概念，好吧，OK。