33_尚硅谷_谷粒音乐_音乐tai头部遮罩布局.wmv原创

来再来看啊，嗯，其实我们刚刚看我们做到哪了，是不是头部好像已经做完了啊，其实头部点开还有什么。这个遮罩成吧，有没有看到那这个遮罩层上面是还有它还有一条线啊，这条线的话，我们设计成了异物的条数。啊，这上面一条线大家是不是看不到。啊，其实是有条线的，把这条线跟大家懂吗？拎出来，你看有没有看到啊，这条线是一五条数的有没讲，你看你大家很容易看到，其实你看在页面上面是不是410乘以0.5啊。是不是，你看我在这边选全度是不是410乘以一哦，其实最终渲染系数是干嘛0.53的像素的，能理解啊啊，其实它是一个什么一物理像素了，能理解吗？OK，那我们来看一下这个东西怎么做，然后我们来看。呃，这个是不是一个城啊，这个城是不是跟头部是有关系的，那想那这个城是不是应该在这个。头部的结构内部啊是不是，而且还有同学大家看我点的时候，这边是不是变成白颜色了，这边是不是没有啊，这咱咱这个咱们是不是没做啊，获取焦点的时候和背景是不是应该换一换，那想想再使用获取焦点的时候。

啊，那可是我们可以什么再来0405。啊，那这个其实我们在要去做什么知道了。嗯。遮罩OK好，那其实这一版在做什么？一个头部的一个基本布局吧，是吧，好来看一下，那这个这照首首先我们刚说，首先刚刚说是个什么问题啊。获取交点有问题吧，是谁啊，是不是had里面有个东西啊，底下什么这个吧，是不是在你干嘛。

在你获取焦点是不是干嘛是吧，你的背景是变表变成什么白色吗？是吧，所以我来说一下。啊，这个文件找不到。重新打开。F12，好，刷一下只你哎，是不是就可以了？好，那么再来看看这个遮道怎么设计，结构怎么设计。这个遮罩是不是应该跟他们俩是啊。同级的来来个什么这个这段其实直接可以给什么给ul是吧，OK，来个什么class，叫什么mask，好，这里面是不是LYLY里面是什么，我们来看这个知道了。这个都是可以点的吧，是不是肯定是个A标签加什么。应该都是一个什么，就就是一个标签吧。是不是，你看里面是一个个的A标签吧，这应该没太大问题，OKA标签写ARPT是吧，整体第一个什么首页首页OK好几个不能复制，不能复制A标签吗？复制什么。

L4567890差不多了。总共12个吧，啊不不不不。三十二十二个好首页MV吧，是吧，MV还有什么约旦。约旦。应该不是啊，月，我知道了，月单宝微宝微宝。B。是不是还有什么音乐？

还有商城。商城节目加饭团饭团，那我就不知道商城节目饭团就是粉丝的意思是不那么高级，饭团是不是OK好，还有什么咨询，我的家APP下载热门应用咨询。我的家OK啊，这个会做吗？这个不会做，你出门做下APP下载干什么？热门应用好走你好，我问你这边的话，咱们主体布局是不是，哎呀什么这边我做这个东西，我能不能用百分比十分。可以吧，你管我呢，是不是哪个简单我用哪个是不是，那就看到差不多这些加起来的话，应该90%左右。

旁边是不是流流水段啊，空隙啊，是不是啊，好，那怎么办？那每个LY占据多少百分之多少。每个Y最终肯定要浮动起来了。22.5%吧。是不是22.5%嘛，四个嘛，这90%吗？是不是啊，OK，那看怎么做。找咱俩睡么觉？好，我们来看现在应该是比较丑的，在在这个下面排着是吧，那怎么办。呃，这个是不是可以合上了是吧，直接去写这个点吗。点mask是吧，是肯定要定位的是吧，是肯定行为啊，那是不是参照谁定位啊，Had是不是已经有定位啊，这当初为什么肯定位。

哦，决定定位模拟固定定位是吧？OK，让他先让他这个left为零八，错没有为等于八，来看一下这个这的一些参数。遮的一些参数是不是是不是都在这啊，可以去C直接跳过来。好，Can。好看这些参数定位成。定位成就他自己top是不是135啊，为什么135啊啊，因为你这个变化是不是从啊这个层是不是从这边开始的是吧，那是不是得下135啊。是吧，那我得让他下135，那这个错误应该什么？135哎，乘以个哎呀是不是啊，好，上下那边距为十啊，它里面应该有个上下边距。是吧，你看上下那边去。19的是吧，OK，来个什么。看嘛，那边就嘛，上下上下为十左右零不用管是不啊好，这个宽度上面因为定位定起来，这个宽度要不要。

要是不微短百分百是吧，我给它描个B体，先看，先看他在哪里，CTRS。刷一下正好在这边是吧，OK，然后我说它这个是呃，背景颜色是不是待会会划掉它的，好是不是有个边框的啊，这个边框待会我们来设计一下，这个边框要做成一五小数。啊，我们来看这个到底怎么做，我们首先看这底下这个定位什么里面的什么。它底下的所有的LY是不是可以这么写，OK，折理好宽度多Y422.5，这没问题吧，OK，高中呢，135AT一个，哎，是不是杭高LONG135S好文字大小，呃，其实这个行包跟文章是可以可以写到一块。

今清数一下，记不记得放上蚊子打多。42看啊54多大，艾一个二第二个是不是可以就就可以写行高行高是吧，135艾一个是不是OK，然后呢，Text等于什么S你看一下。哎，是不是真的。是不是他们应该干嘛。辅助他为什么。嗯。Fo，你看有没有用上？写。你看是不是没有用的，你必须得写什么字体，是不是写个V软雅黑吧，呃，其实移动端字体最好是什么hellokitty hellokitty啊好，那应该没有花掉了。

诶。斜杠是不是有问题啊？对，这边是还这么写。后不会见效。没解析啊，那这种情形属于不能用还是得分开。是不是OK，因为他们之间是不是就需要一个斜方，然还什么这看一下。算一下没问题了。还是不行，因为你这个放干嘛。这个值是不是压根没有改过来？是不是啊，那行把方向三。是吧？

OK啊，因为你本身里面放放在间接属性，那么里面那个斜杠是不是它有意义的，是不是用来隔开这个放size跟行高的，是不是有时候前接水是不是还真的会有问题啊，那我们说这个字体最好都是什么？Front family啊，全部成helloki，好，这里刷下啊，在这边看不到，因为这个字体跟你这个应用的什么字体包它有关系是不是，当然你可以干嘛直接搞成一个什么服务器的的个字体吗？我们学过吧，而他应该要把浮到。扶起来是吧，扶了，为什么？喂，是吧，走你。浮起来是不是统一，统一就过来了，是不是把这个颜色换一换是吧。CTRLC换成它CTRL好，除了这个一项数变化没做，是不是其他都。字体默认都已经做了，字体默认应该什么，字体默应该默认应该给谁啊。

给他们靠谱吗？不靠谱，因为你底下有个标签，你必须给他这钱。好，我们说继承的权重。要比你默认的还来的低，是不是啊，你好。现在咱们是不差这一项素边框啊，想想这一项素边框怎么做好，这个颜色我给他留着，其他全部干掉好这个这个边框应该给谁啊？给定位成法，定位成是不是得有个商变化，那咱们之前写法的话没有用，那写法不是很抽象，那种写法是不是现在我就想这样，我说一杠P好，我穿个颜色进来。我把这个颜色啊穿进来，OK，它就会有个商品框。得写什么了，得写混合，还记不记得混合，OK，那我这里面来一个文件夹叫什么。

嗯，混合怎么说呢。啊，Mix是不是mix嘛，是不是这里面来个混合，OK，我写个文件就是什么。1TX可不可以啊？没问题吧，你待会是要去用的，那怎么办？我是艾特，进了在头上就行了，艾特什么？是不是什么来个一杠P，你可以把这个给他省略，OK，来个逗号，CTRLL已保存啊，这个错应该报的什么错？因为我现在还没有这个混合吧，是不是来定一下这个混合。这怎么定义啊？想想我说混把干嘛过了，那应该怎么做？混合跟继承的区别是有区别的吧，继承更高效吧，可是混混合更灵活是吧？那这个混合应该怎么定啊？点EPX不带输出的混合走你。

是不是啊，我问你，待会是不是你想用这个max一个伪元素来做这个项变框。你这个尾是肯定要参照这个马去定位的。那我在这边能不能先上来那个行为那不输他。这个相是不是相当于就给这个大码，是不是相当于我给这个马斯克来了一个分析的。能不能理解啊，是不是，那我们要去拿它的什么。那它的什么元素啊。看不看得懂，相当于这个代码CTRLC，干嘛CTRL过来。是不是，是不是怎么写的，现在应该能看懂了吧。

懂吗？只不过把它写到了一个混合里面去了。能不解啊，OK，而且你这会会传一个color进来的是不是啊，OK，比元素怎么设计，首先你的分型应该为什么为什么？那不因为你要参照这个一大片去定位的吧，那你最好最好这给么相对定位吧，是不OK，看这个给相对定位哦，没事，我们说这个定位很有可能这个元素本身自己要有自己会有定位的吧，那这个定位是不是会。影响到。他说一般我们混合先调用。懂不懂，至于你是什么定位的话，你下面自己去啊重置呗。能理解吗？OK，来看下，那想想可能行为不是说然后怎么办，必须有一个。Content是不是，然后呢，Display然后呢。因为我是一个上品嘛，做吧，直接给你吧啊。

然后呢，因为你定位了，所以说你的外是必须为百分百，因为你待会会做一个边框，所以说我需要一个背景，这个背景什么艾好了，是不是高度为多少，一撇S是不是在哪，这个时候应该它就有一个边框了，只有你。嗯，是没有用上。一杠P吗？不对，是不是我在页面上去引入了，应该在哪引入啊，我是不是在这个台点里面去用的。那我是不是应该在他里面去引用，诶，我刚是不是在这台电呢，是的。路径是不是有问题啊，应该是MA1底下的1X是吧，来看一下哎，是不是上面就来个边框了，把这个边框的颜颜色我们暂时先传好吧。

先传个第一。是不是在这，现在这是个133项数吧。这个边框肯定是个一三是吧，你看放上就是两两百三乘以一吧，怎么办？根据像素比不一样干嘛，说法不一样，而且只能是在外上面的说法吗？那判断像素比我们说一开始我们说用艾at query这个选择器的时候的话，是不是我们说它是在对外存长里面跟一个一个什么规则是吧，是可是用在less里面不一样，Less里面你可以把这个东西什么。写在里面了，车。一好，写不出来怎么办？

是他这里干什么？杠，呃，应该是杠YWBKT，杠Y是干什么？什么？P要什么P什么。完蛋了。怎么办，找啊，是不是在这边啊？是不，它P是什么RA什么是不是它干嘛的嘛，CTRLC过来不就行了吗？是吧，是行也不不不应该贴到这这干掉贴到我的什么EPS在里面了是吧，OK，好走你好，一般习惯性我们会做一个什么。金融。啊，这是不是来做兼容的，一般有些是直接可以认的，那就会写这里了，懂不懂，而且一般他要写到前面去。

是吧，因为他有可能。啊不对，这个位置随意吧，OK过了好，然后呢，这个里面一般我们去写什么。规则吧，可是这个时候前面是不是已经有了选择题了，所以这里面直接写声明，你会发现最终这个东西会直接给你带进来了，那会帮你处理了，就这里面写写那声明就行了，是不是也就是这个元素干嘛要。是他，他干嘛？干嘛，应该多少点五。是不是OK，然后呢，再来一趟。下次比完。三。应该多少点三三，是不是这时候再来看看，嗯，感觉有问题啊。报错了变量。Is的不能用吗？我觉得可以用吗，想想。

哎，这边的当成变量了。嗯，是不是来个分号。是不是还是变量，这得去看一下Les官网里面怎么说。来看一下这个LA技术官网，我们找到什么预处理器less。是吧，好。你们有网吗？为什么我没网？找不帅也行。好，它里面是不是有个let教程啊，好，来看一下语法这一块。

使用这一块，语法这一块没有嵌套规则这一块有没有。Military那些东西啊。有没有？祖师吧。避免编译吧。表达式。好像真的这样吧，我们来看一下，不知道为什么用这个来写的，它里面应该有的吗？嗯。第四个版本吗？找到什么。找到这个不要找第懂吧，Less版本八，它里面应该有，我们看我们三格时候它怎么写的。三格，三格是哪个问题啊，是不是他是不是看有没有下一式。哎，有的吧，他怎么可以用啊。

他是不是直接用了。有没有看到，诶，那我们为什么不能用。哦，他叫什么，加了个括号。是不是咱们呢。咱不是也有空房。外面它有用括号吗。Media嘛，是不是。Me me d吗？是不是没问题啊，好像他是不是我看一下啊，我把这个东西删了看行不行。是不是好把这些东西删掉，是它不能写这种东西，CTRLT保存，它还是说什么。一台点Les里面没有。

没问题啊，点一杠P是吧，这就尴尬了，看一下哪边出问题了。Web k杠、picture。看他们怎么用了。不跟我一样的吗？是不是啊，他们后面加了大括号，我们加了吗。我不有大括号吗？语法上面没问题吧，就是不让用。他说你是一个变量。不应该啊，这是关键字啊。想一想，这是为什么？嗯，这个我们得好好想想，那这样不能写的话，大家想想是不会出问题的。不对劲是因为没有变异吗？啊，我们是不是多建立一层文件啊，你看是不是还都还没有去编译啊，干掉重新把这个文件干嘛。

拎进来。刷一下。我们来看一下编译成什么样了。是不是看这个台点三三上。保存一下吧。先不管，我先看一下。踩点CSS里面在哪里？先看一下这个东西变成什么样子了。诶。是不是什么都没没编译啊，没有编译那就糟糕了。那真还是我们语法的问题。五元素conion。嗯，如果不写，看能不能变样。

不写也没必要。布鞋为什么不变呀？不写的话，那不应该出来这个边框。现在很明显干嘛，哦哦，这个变异是不是不带输出的。是不是我们得看什么。你看这个里面吧，是吧，看他有没有我们在哪用的。Ma吧马，你看这边是不是有啊。Before元素嘛。是不是我看啊，刚刚干嘛这边打开来啊，因为他是不带输出的嘛，刷一下看他这边有没有边野。没有，是不是没有变呀，尴尬了，想想在哪边有问题啊？应该是没问题的。Device。

好，先只写一个看一下。哎，之前一个人没上哇，这好奇怪。是不是有了，你看应该是不是全部进来了。来看一下，一刷，你看这个边框肯定是一五理小数的，你看上面是不是已经变成0.5了，相对于多少。说下。看这个边框。0.33嘛，能理解啊，是不是这是不是没有任何问题啊，只不过刚刚我们那写法有什么问题啊。我们家是分号吗？应该叫什么叫逗号，刚是逗号是吧。这样的，等会我们再我再试一把。我。我在哪在哪？

我在这边干嘛加个逗号试试，是不是我这逗号有问题啊。CTRLC啊，不能拆，因为我之前写过两行是可以的。哎，那应该是分号。没问题，看一下。你看是不是就有两个了。一个是YK的一个什么没有YK的吧，来看一下。我干嘛，我再来一个CTRLCCTRLV，这边写什么？写三吧，CTRLS。看一下，人肯定变掉了。你看现在是不是就变成都是那个都是那个没有加YK的了，因为现在我在留下器，可能它编译的时候干嘛。你看是不是就变成这种形式了，看能不能用啊刷一下。

是不是用不了了，不能用了吧，是不是好像这个写在前面。嗯。反正我们应该加分号的，它才能编译是吧，而且我们应该是使用什么，你看后面是把前面给它覆盖掉了。是不是在哪，所以说干嘛，那我们写法的话，它这种语法是支持的，懂吗？只不过要加分号，不能加逗号，不过我们这个应该加什么。YK在哪，所以说嘛，我们写一个是不是就够了。因为我们这个这个是不是要加这个外的，而且它变译的话，是不是只认后面那个好像是是不是啊，因为我们刚刚看到了吗。你看如果没有改的时候，你看啊，这个已经是改完了吧，是加那个YK了吧，可是我们刚刚在后面加个分号没有写Y的话，是不是只变成他了，他不会输出两个吧，有没有讲啊，所以说干嘛以后我们是不是只要写一个就行了啊，这个注意一下啊，这个可能是less语法上面一个什么一个缺陷，我感觉啊，应该是可以写两个要兼容的，应该给我生成什么。

给我生成两个的吗？对不讲，那你非得生成两个怎么办？再写一份不朋友来看一下，走你这个看行不行。你看这时是不是就两分了，那其实在其他预处理器的话，可以像我们刚才那种写法，直接会被加混号的，那里面不行啊，那这个之前也没采过这个啊，你就S保存一下，那一五条是不是就已经出来了，然后刷刷一下，那你看数就出来了，有没讲啊，那上午的话，我们把整个头部的布局基本上全部做完了啊，下午我们加上这个头部的减压省出来，下面这个东西也换一换，能理解吧，好，那最后一步啊，我们把这个东西干吧。它默认应该不显示吧，所以他上来干嘛，Display应该玩，那你不显示也不能占位啊，我还有加速逻辑要处理呢，那没讲好，那其他东西我们下午再来做OK。