尚硅谷前端基础 (104)

好，那下边呢，我们接着来看啊，接着来看还是做我们这个导航条，我们这个导航条的下边，它有两个这个下拉层，诶分别是一个这个我们这个下载这个APP这块，它一点完了以后，这会出现一个二维码，还有一个是我们这个购物车这块一完了会出现这么一个层，其实这个东西对我们来说应该都问题不是特别大了啊，主要是一个定位的一个应用啊，定位一个应用，那我们就一个个来做一下，我们先做这个下载APP这个下拉图。下载APP一个下拉层，我们在做的时候，其实你在做的时候啊，你先考虑一下是吧，你先考虑一下它整个的一个这个结构啊，它首先其实呢，它这儿就是一个就是你先不用考虑它隐藏不隐藏，你就是先把它什么呢？诶你就直接让这玩意儿就就显示出来，直接给它放在那儿就OK了，对吧，直接给它放在那儿，所以这个时候呢，我们先来把这个层啊给它给它做出来啊给它做出来，那这里边我们来看一下，首先看它这个结构，我们怎么写结构的话呢，其实这就整个是一个这个整个就是一个块，整个就一个div呗，对吧，整个一个div，然后div里边的话，我们是放了一个图片，然后下边呢，放了一个什么呀，放了一行文字，对吧，放了一行字，那我们就直接写就完事了，但是你要注意的是这个结构你要放在哪儿，因为我们这个结构是ul，然后Li Li里边放的是超链接，你要考虑清楚这个东西你放放谁里边，哎，那你要不要放A里边，还是放Li里边，那你要考虑。

这能不能点，如果他能点，那么OK，就放在。超链接里如果不能点，那你你就哎你这你就不能放在超链接里，对吧，所以现在你看这我这一点诶它可以跳转，点这个也可以跳转，并且是不是跳转的是一个页面啊，哎，所以呢，就证明一件事儿，这个东西和我们的这个下载APP，它们是在同一个车链接里啊，在同一个超链接里，所以这个时候我们就来整一下它。嗯，那在这儿呢，我们就整一下我们这个结构啊，找到我们这个下载APP左侧导航下载APP在这个位置，这个位置呢，我们下边再加一个这个什么呢？哎，我们要加一个。

哎，加添加一个我们叫做一个弹出层啊，弹出层我们这直接来一个div div呢我们知道一个QR扣对吧，二维码嘛，诶二维码的话里边的话，它需要放一个这个放一个图片对吧，放一个图片，图片我刚才下载下载好了，直接拽一下就完事了啊，我把它拖过来，哎，我们刚才那个文件夹已经建立好了吧，Img直接把这个图片呢放进去，然后的话我们直接。把这个东西设置为它的一个图片啊，IG这里边我们这儿是一个这个download，诶点一个imgg下的一个download.pg啊这个呢，Out写不写都行啊都行了，然后的话我们来看这二维码是不是是不是就是不是就出来了啊就出来了，但是很明显这个二维码我们整完了以后，稍微的有点稍微有点大，那我们这一块应该是不是对我们整个这个东西是不是要限制一下它的一个大小啊，哎，它没有那么大，所以我们来看一下找到这玩意。

我给他设置一个hall。呀，吼不上。那它这个那就等于原的设计里面，它的没有加到什么，没有加这个上面，你看它是通过什么呢？它是通过这个。CSS来通过这个GS来设置的啊，通过GS来设置，那我们这块就麻烦一点，我给它加一个类，它这个应该是加一个act VE active这个类，哎，你看是不是就出来了，哎，我加这么一个类啊，然后取一下这结果，我们看一下它整个的一个大小是一个，哎是一个124乘以一个148，对吧，我们直接看一下它的样式。呀，没了。

再手动给它加一下啊，这个呢，它是通过通过GS加了一个act me加这么一个东西，然后它就出来了，出来以后呢，我们来看一下它这个样式啊，这个叫做一个下载APP，下边是一个这个SPA啊APP扣的对吧，它的大小是一个124乘以一个48啊，124乘以一个48，其实他这块诶，你看它就指定了一个这个，指定了一个这个高度，对吧，指定一个高度，嗯，那我们就直接给他写一下吧，给它写死了，我看它多少124乘以一个148，所以这里边我们就直接它是有一个固定高度的，对吧？然后呢，我把字先写上，小米商城APP下边我们直接放一个这个SPASPA叫做一个这个小米小米商城APP啊，小米商城APP，但是你这样写完了以后，跟原版那个差距还还挺大的，因为我们需要把那个宽度高度定死了嘛，哎，宽度它这应该是一个120。

14乘以一个一百一百四十八，但是其实呃，有一点很明显的是，它这个宽度高度不是他这么写死的，你看它是不是只设置一个高度是一个148呀，哎，只设这么一个东西，那这里边的话，宽度它应该是在我看一下。啊，宽度在这儿是不是一个124，哎，宽度在这儿也等于120，呃，100。Community。那我们就直接给他写上吧，我们也不不不费劲了啊，不费劲去找这个东西，124乘以一个148，我就直接写上，在这里边我们设置一下它的样式，CTRLC这个里边我们。刚才是在这里边呢，添加了一个这个Li，添加了一个div对吧，整个这个A标签里边加了一个div，我们把这个结果它给它调的清楚一点啊，调的清楚一点，然后的话，我们这块为了区分一下，为了区分一下，当然你可以通过Q扣去找，但是我们为了区分一下啊，我给这个A加1CLASS啊class叫一个APP加一个APP，但是我们好找一点啊，APP好找一点，然后呢，在这儿我们来设置样式，这个位置它是属于那个service里边的，对吧？所以我们在这儿去设置一下，我们这儿来设置我们这个什么呢？设置我们这个，诶这个下载这个APP的一个下拉，诶下拉，那这个时候我们这儿应该是一个这个APP下边，我们刚才叫一个QR扣的对吧，二维码，然后的话，刚才我们量看到了这宽度高度是一个这个。

是一个124乘以一个148，我们直接写死了，是一个124，然后he呢，是一个148，然后它还有一个背景颜色background colorter，很明显是一个白色的啊，是一个白色，但是我们为了看得清楚一点，我们先给它换成一个银色的效果啊，那这样我们这个框就已经就就已经实际上就已经出来了啊，就已经出来，但是由于什么它实际上现在是有一个这个溢出，这个图片太大了，图片太大了以后呢，导致你这个东西你就你就看不着了，实际上是不是跟这儿呢，哎，实际上是在这儿呢，所以这个时候我们图片的大小，我们应该做一个这个修改，图片大小我就嗯，我们就直接看一下它原图的大小吧，原图的大小，原图的这个图片在这个，它这里边有一个图片，图片大小你看它就写死了外是一个90 he也是一个90，我们干脆也就这样，我们就不不再改了啊，我们直接给它设置一个Y一个这个90，我们最好还是通过这个样式来设置，找到一个样式啊，我们。

QR扣的QR扣的下边的一个imgmg的话，其实我们不用设置那么多，我们就设置一个Y90，因为很明显它是一个方的，所以你设置完了以后，它自然而然就调整过来了啊，自然而的调整过来了，那这个图片设置过来以后，这个图片它在我们整个这个框里，它还有一个这个诶居中的效果啊居中的效果，居中效果也很简单，直接给图片设置这个设置margin是不是就行了，哎，给图片指定一个marin，它就可以达到这么一个居中效果，那这个marin我们来看一下啊，我们图片的大小是一个90乘以90，我们这个框，呃，框的高度呢是一个148，宽度是一个124，我们先说宽度吧，90要在124当中去水平居中，那我们这块直接来一个marin marin的话，那我们水平居中，90跟124他们之间差了34啊，差了34 34的话，那你要设置marin，就是左边14右边14，所以我们之间诶上下我们先不要左。

给我14个像素，然后的话，很显然它就会自然而然的就水平的话有点哦，我算错了，不是14，应该是17吧，诶应该是17啊17少了几个像素，17个像素，那这样效果是不是就正好就水平居中了，哎水平居中了啊，这样就达到了这个这个目的啊，这个目的然后的话再来的话，就是需要把这个东西整个去给它往下调一些啊，往下调一些的话，那我们直接就给它设置一个这个marin topin top的话，我们这个东西给他设置多少合适呢。

我们看一下，呃，原图上这个基本上应该是比这个14要稍微的稍微大一点，对吧，稍微大一点，稍微大一点，我们就先写14吧，我们自己试一下，我们调整，诶十十七啊17我们都先写17，然后我们大概估一下，我就不再去量了啊，量着挺麻烦的，嗯，这样的效果还。诶。基本上就可以了，对吧，基本上可以了，所以这个框基本上我们就，那我们就省事了，我就直接上下左右干嘛呢，全都是17是不是就完事了，哎，上下左右全都是17就完事了，但是你设置完了以后，其实与此同时你会发现一个问题，小米商城这个APP这几个字儿是不是被挤下去了，诶它为什么被挤下去，它不是应该在它下边呢？为什么被它挤下去了，这也没有设置那么大的外边距，是有外边距，但是没有那么大，哎那这里边注意为什么它会下去了，因为这个东西它是不是也属于在我们它的里边，诶在它里边我们就会有一个问题，在它里边，我们这儿由于我给它设置一个LA head叫做行高是一个40像素，而他是不是他的一个后代元素，所以他也会继承这个航高，所以现在这个死SPA实际上他占地儿占了多少呢？它实际上它占地儿占了40个像素，只是现在我们看不出来，所以这个时候它为什么被挤下来，就是因为它有一个航高，所以你要想不让它下去，那怎么办呢？你把这行高啊给它重。

置一下，就是你单独呢，把这个QR扣里边行高单独重置一下line head，你来什么呢？来个一把行高变成一个一倍的，你再看小米商城这几个字还往往下走了，哎，就不想拿走了，那这样就解决这问题了啊，所以你要知道为什么会下去想一下原因啊，然后的话，我们给他设置一个居中，哎，Take us text line，来一个这个center，设置一个居中就OK了，其实其实你做到这，我刚才突然想起了一件事，我们刚才给他设置了一个marin，为了让个图片干嘛呀，水平居中，实际上我们直接设置一个text line，按理说是不是也应该能让这个片达到一个这个水平居中的效果呀，哎，应该是一个图片，但是在这里边，在这个q r code里面，它现在。

他做不到这个事儿啊，做不到这个事儿，因为他现在我们图片就是文字会集中，因为文字是一个什么，文字是一个这个行内元素，而图片我们说了它不属于行内元素，它属于一种什么呢？它属于一种叫做行内块元素，所以你在这儿用这个text LA的话，对于图片来说是没有效果的，对吧？所以这里边我们还是需要用这个margin来达到这样一个效果，然后这一块设置完了，我们把这个背景颜色换成一个白色啊，换成一个白色井号，一个这个FF，然后呢，我们还需要的话，它应该还有一个效果，就是它应该会有一个小的一个阴影效果，对吧？阴影效果，那我们就直接简单给它加一个，我们来一个这个box box shadow box shadow，我们这儿直接写一个零零，然后呢，虚化的我们来一个十个像素，然后颜色的话，我们来一个rgba啊RGBA000，这来一个点三，哎，给它加上这么一个阴影效果是吧，整体这个加上。

以后感觉上就就已经非常好了，对吧，非趁好了，跟那个原版的话，基本上就基本上就一样了啊，基本上一样了，然后的话感觉上有点不一样，就是这个字儿啊，稍微有点偏，偏下啊，偏下原版上这个字应该没有那么偏下，偏下的原因就是因为这个imd，我们给它设置四个方向的margin，设置四个方向margin的话，意味着我们这个margin bottom是不是也是17啊，哎，Margin bottom也是17，所以这个时候我们调整一下距离，我把margin bottom给它设置小一点，我要设置零的话，我们来看看零的话有点太靠上了，对吧，我们来一个14呢。

嗯，十。哎，十这个位置我看着还可以是吧，所以我们就估一下行了，我们就不做的那么麻烦了啊，不做那么麻烦了，那现在整个我们这个框就已经给它整出来了，呃，整出来以后的话，待会儿我们再说这个隐藏的事儿啊，框已经整出来了，然后这个字儿的话，我们来再看吧，这个字儿它这应该是一个黑颜色的，并且我移动到移动上去以后，它是不是也没有任何的变化呀，哎，没有什么变化，现在的效果是我移动上以后，它是不是也跟着变了，哎，也跟着变了，所以这个时候我们单独再给它里边这个死SPA来设置一个样式，CTRCCTRV，它下边一个死SPA，呃，Be，诶，不是be，看了我们就直接设置一个背景颜色是一个这个，呃，000，设置一个黑色就完事了，哎，然后移动这个是不是它就不改变了啊，它就不改变了，并且它这个字体应该。

字体，字体也要稍微的大一些啊，字体也稍微大一些，所以把这字呢，再给它调大一点，字体大一些的话，我们这个字的话，我们来一个fo size size，比如说我来一个16个像素，我们看看。16有点大了，14呢。哎，14就正好跟那个原版效果就基本上类似了啊类似了好那整个这个框我们就给它就找出来了，对吧，其实很简单啊，并没有这这确实很简单是吧，就把这个图片一对啊，把这字一写就行了啊，写的时候慢慢写一下就行了，然后的话，我们把这几个注释补一下啊，这个是我们设置设置我们这个二维码的一个图片啊，然后呢，这个是设置设置我们这个二维码中的这个什么呀，中的这个文字啊文字。呃，然后我们再看还有一个点需要处理的就是什么呢？就是我们的这个下拉以后，它这是不是有一个这个小三角啊，哎，有一个小三角，那现在我们要把这个小三角给它，给它整出来啊，给它整出来，那这个小三角是怎么出来的啊，小三角怎么出来？呃，小三角的话我们在哪，我们得需要单独去创建一个文件，演示一下这个事儿啊嗯，在这吧，就直接在这小米这里边，我们创建一个文件，创建一个文件，我们叫一个这个DEMO点一个HTML，呃，之前我们曾经提到过这个问题啊，提到过问题，我在这直接整个div div的话，我们给它来一个class，叫做一个BOXS1，哎，那我们可以给这个div设置一个这个边框啊，边框注意了啊，我来说一下说的是什么，我们这儿点完这个下载APP，它这个位置是不是会出现这么一个小三角啊，哎，我们要说一下这小三角是怎么出来的啊，怎么出来的。

就这么一个事儿啊，说一下它是怎么出来的，好好听一下啊，好好听一下，然后呢，这里边我们来看一下，我们写这个结构，我这写一个div div呢在这儿啊，我为什么要创建这个文件，我们就是想演示一下这个问题啊，演示一下这个问题，我们直接打开。

然后在这儿的话，我们来说一下，写一个style标签，Stylele style标签写完了以后呢，在这儿我们来写点它的样式啊，写一个样式，写一个什么呢？写一个诶wise呢，是一个100像素，Hi的是一个100像素，那曾经我们曾经尝试做一件事儿，我们给它设置边框对吧？设置边框，哎borderder，哎，Borderder我们来一什么呢？哎，Borderder，我来一个这个十个像素啊，然后来一个red，然后来一个这个solid，这个是设置了一个什么呀，设置了一个这个四个方向的一个边框，对吧？四个方向边框，那这个时候其实我们现在这个边框是一个颜色的，但是我们可以干嘛呢？我们可以给我们四个方向的边框设置一个不同颜色，比如说我来一个red，来一个这个orange，诶，上右下左对吧，上右下左orange，我们再来一个这个blue啊，来一个blue，哎，Blue再来一个这个来个yellow啊，我们设置了四种颜色，设置了四种颜色什么目的呢？哎，我的目的是让你看到我们这个边框他们。

之间相交的部分，它是一个什么？它是一个斜的，也就说我这个边框实际上它是一个什么呢？它是一个梯形的，懂这意思吧，它并不是一个长方形，它是一个梯形的结构，那梯形的结构跟我们刚才说那个问题有什么关系呢？那这个时候你既然它是一个梯形的，那假如说我现在把它的宽度高度变小，宽度高度变小以后，你会发现我那个梯形是不是就越来越越尖呀，哎，越来越尖，那我如果换成50的话，那你看就是梯形的那个上边，那个上边是不是就越来越小啊，啊，越来越小，当我把这个宽度高度都变成零以后，宽度和高度都变成零以后，那你看等于我梯形那个上边是不是就没了，哎，没了以后，那我们这个边就变成了什么，变成了一个三角形啊，就变成了一个三角形，就达到这么一个效果，哎，那跟我们这个小三角有什么关系，你这个三角形你是什么，你是四个三角形，而这什么这是不是只有。

这是不是只有一个朝上的三角形啊，哎，那其实也很简单，那朝上的三角形是不是就这哥们儿，哎，这哥们儿，所以这个时候你只需要把别的地方那个三角你都给它去掉，你就留这么一个，是不是就达到这个效果了，哎，比如说我把什么呢？我把borderder top给它去掉，Borderder top我们来一个nu，哎，Border top来个nu，那这个时候是不是只剩它了，哎，只剩它了，当然左边右边还有你也可以干嘛呢？诶，你说我来一个borderder，哎，Borderder left的，哎，Borderder left我也来一个now，我把左边也去掉，去掉行不行？诶去掉了是去掉了，但是问题来了，你把左边去掉以后，我这三角是不是就剩下一半了，哎，剩下一半了，所以注意左边呢，诶你还不能去，因为你去完了以后它也没了，对吧，它也没了，所以现在的话，你要想达到这么一个向上三角的一个目的很简单，就是你需要保留左边，保留右边，还要保留下边，就得到这么一个向三角上边那个三角你上边边你可以去掉，因为它不影响，但是左边和右边你都不能去，左边右边一旦都去了，这个下边也就达不到这个三角的效果了，这个东西我不多说了，你自己试一下啊，自己试一下，但是也会产生一个问题，这个时候这个边是这左边右边是不是还有东西呢？哎，所以出来以后它很难看，所以这个时候我们可以干嘛呢？我们可以单独给它设置一个颜色啊，设一个颜色，你现在看我现在这三个边是不是都是有各种各样的颜色呀，哎，我可以换一个，我直接把它们都换成什么呀，换成这个transparent，也就是说我把。

把它们都换成什么呢？换成透明的颜色，只有我们的下边变成一个补录，那这样我们是不是就得到了一个向上的一个三角形啊，哎，向上三角形啊，所以你要知道这个三角形它是怎么做出来的，当然你也可以放一个图片，可能更简单一些，但是你要知道我怎么能通过这个纯CSS的方式来生成出这样一个向上的三角形啊，就是利用的这个边框啊，当然你要用，你要用向上的，你用下边块，向下的就用上边块对吧？向右的就用左边块，诶向左的就用什么呀右边块啊，原理都是一样的，如果你要用什么呀，你要用，你要是你要用的是诶下边上向上三角，那这时候你需要保留左右还有下边框，对吧？如果你需要用的什么呢？用的是向左三角，你需要保留右，还有上，还有下面块，原理都是一样的啊，这个东西没什么好说的，它就这么一个设计啊，自己试一下，所以这里边我们也需要这么一个三角形。

那这里边我们是不是也需要，哎通过这种边框的形式来设置，哎，来设置啊，那这个设置边框的话，那就意味着我们这里边要添加一个新的元素，那这个元素我们要怎么添加呢？哎，这个元素我实在是懒得去加了，因为你还要等于你要加元素的话，还要在网页里边去加一个这个额外的一个结构，这个结构现在我不太想加，那怎么办呢？诶，那我采用一种方式，我直接通过这个A的伪类来设置啊，A的伪类，所以我直接给我们这个A设置一个那个伪元素啊A也就是我们这个APABA，我们有一个伪元素，我们其实你用那个笔before，用after都行啊，用笔before after都行，我用一个after在这儿我要干嘛呢？哎，我来设置我们这个，哎这个。

APP哎，下的这个小三角，小三角代码的话，跟刚才那个是一样的啊，一样的，我们给它设置一个Bo的，嗯，它这个边框大小应该正好跟我们刚才设置一样，也是十个像素，我们直接来一个十个像素啊，然后来什么呢？诶，来一个solid的实实线的边框啊，实现边框，然后呢，背景颜色的话，我都给它设置一个透明的颜色啊，设置什么呢？这是设置我们这个四个方向的边框，那现在是不是四个方向都有了啊，但是我没有设置，没有设置，当然我们还得设置一个，因为它是你不设置它不出来啊。

Content啊，TNT啊，然后呢，把这关掉啊，然后你还要给它设置一个块元素，你不设置块元素也看不出来，所以这里边我们还需要来一个迪斯play，来一个这个block block啊，然后四个方向的边框设置完了，那这个时候我还要干嘛呢？我还要去除我们这个上边，去除上边块，我们就是一个boder top，写一个这个捺，上边块就去掉了，然后我们还要什么呢？我还要单独设置我们这个下边块的一个颜色，前面块颜色我们叫做一个bottom bottom color bottom bottom color，单独给它设置一个颜色，那我们这很典型就是一个黑色，那这样这东西是不是就出来了，应该哎出来了，但是。

我们这儿现在啊。他跑这儿去了是吧，跑这儿怎么这么大个啊。我们来看一下啊，这哥们儿跑到最最底边去了，那是一个黑色吧，应该啊，它是一个白色的啊，它是一个白色的，那我们先不管它什么颜色吧，先给它整出来，但是很明显啊，很明显这东西整完了以后，它是不是有点有点大了，哎，有点大了啊，我先把这个QR扣的给它隐藏，我们先单独说这点，哎，说这三角形，这这三角形，哎，首先很明显它的这个大小是有点大了，那我这个十个像素。我看我刚才的DEMO啊。啊，你看我DEMO写的时候就这么点，但是我这写完了以后，实际上就变成这么大了，而且它也是一个，它也不是一个三角形，它是不是变成一个梯形了啊，变成一个梯形了，所以出现这个问题的根本原因还是那一点，哎，应该我猜测还是那个line hat对它也产生影响了，所以这里边我们需要把它的line hat也重置一下啊liheight lihe改成一个一啊，不要让这个高产生对它产生这个行高对它产生影响诶。

Li content deep block，把这个往下写一下。嗯，我们重置了烂害它还是没用，那我干脆吧，我就写死一下，我直接外给他写一个零，He也写一什么呢，也写一个零啊，把这个y he给它写，写成零就没事啊，就没事了，那这样的话，我们这个小三角就已经出来了，小三角是已经出来了，它其实已经没问题了，然后的话，其实它的位置啊，我可以换一个颜色，换一个F00，换个红色，它的位置的话应该是在这个下载APP的这个下方，对吧，但是现在等于说这个小三角他已经从这个复元素里面去溢出了，很明显这哥们我应该是让他去绝对定位的时，不给它定上去，哎，给它定上去，所以这个时候我们就干脆一不做二步修，为了调整小三点的位置，我直接给它开启一个绝对定位啊position aboutut来设置我们这个绝对定位，呃，绝对定位给它设置完了，其实还有一点需要注意，其实我设置完绝对定位就是脱离文档流了，脱离。

脏流以后，其实自动就变成块元素了，所以这block你这时候你写不写就就都行了啊，你写不写block都行了，你说老师都跑上面，跑上边不用管它啊，因为它是你不写block变成块，变成那个航天元素，航天元素跑这儿了嘛，对吧，我们不用管它，因为待会总总归要定位它在哪个位置都不对啊，那这一块我们给它开启了一个绝对定位以后，那我们是不是还希望说让这个块最好是相对于它定位吧，哎，因为你要放到这个位置嘛，你要是让它整个相对于浏览器这个窗口去定位，那就不对了，那就很麻烦了，所以这个时候与此同时我们要给这个APP，也就是这个超链接，要开启一个什么呢？开启一个相对顶，哎position来一个relative，开启一个相对定位，那这样等于说我们现在这个after，它的定位，它就是参考于这个超链接了啊，就参考于态了，那这个时候定位我们来看一下，我们来一个TOP0，再来一个LEFT0，我们先看它原点在哪诶。

是不是就正好在这个位置了，哎，正好在这位置了，那接下来我们其实就需要把它往下挪就完事了，往下挪的话，其实我不用设置top，我直接bottom bottom0是不是就跑到最里边了，哎，BOTTOM0跑到最里边了，然后的话我们还需要它这个，哎，是不是等于它实际上还需要在这儿达到一个这个水平居中的效果，对吧？水平居中的效果，那水平居中的话也简单，Left的零，我再来一个这个RIGHT0 right0的话，我们再来一个这个margin margin呢，我们直接来给他来一个这个。呃，凹凸就行了，To直接给它设置一个凹凸，那这样是不是就达到这么一个水平居中的效果呀，哎，水平居中效果啊，所以这块很简单啊，就运用到我们之前的一个一个点啊，一个点，你这么设置可以啊，或者你不这么设置，你不这么设置的话，你也可以把这个display block给它写上。

哎，Display block啊，那等于我这我这还想错了，你用display block呢，还不能解决这个问题，我试一下啊，Margin margin，我们来一个零，来一个凹凸。啊，那等于用它还不能解决这问题，那所以在这儿的话，我们解决的话，那我们就直接用它吧，不废话了啊，不想别的方式，那肯定还会有别的方式啊，那在这儿比较省事，就这种方式啊，直接给它设置一个LEFT0 right0啊然后呢，Mar这凹凸，因为我们说了它的整个的宽度是需要满足那个等式的，对吧？那九个值加一起应该是等于负元素那个，那内容驱动宽度，那这个时候你让life的值是零，Right值是零，那那个Mar这是不是会自动调整啊，哎，自动调整就跑中间去啊这么一个效果好，三角整完了颜色换回到这个白色，那整个这个效果是不是就就跟它这个是一样的了，诶这三角是不是有点。

有点大有点大呀，我们调小一点，我们这十个像素，这你就不能调大小了，你调这个这玩意儿八个像素。五个项目。我有点小六。就八吧，八我看差不多，八我看差不多。Hey。八还大，那就应该是5万。五有点小了，哎呀，这太麻烦了是吧，其实你这自自己自己想调多少调多少吧，我调一个六，哎这个东西根据自己的实际情况去调吧，我就不再去跟他那么调了，或者是你直接看一下他这个。他这个下载APP，它这个是怎么处理，咱们来看一下。嗯，还是我给他加一个active吧，加上一个他这个是什么玩意啊。

嗯，啊，他用的是也是伪元素啊，用的是一个伪类对吧，用的是一个伪类，它这个伪类的样式是什么呢？我们看一下before这个类。Style啊，Before，这个累。这儿下载APP，哎呀。Active before这个类它设置一个样式是一个。哦，他设置的就是。八像素对吧，设置就是八像素，那其实应该刚才我设置那个八像素应该合适。但是它好像不是白色的，是白色。行了，不管它了，我们就直接整吧，我就不改了啊，就取到一个六像素就完事，它应该是八像素，八像素应该是跟它是一边大啊好，那这一块我们整个这个三角就整完了，然后再把我们之前那个二维码这个弹出层给它写出来，写出来以后就变成了这样一个效果，对吧，就变成这样一个效果，呃，但是的话，你现在变成了这样一个效果，似乎也也也有问题，对吧？有什么问题呢？其实现在你会发现我整个这个块是不是被撑撑起来了，哎被撑宽了，为什么撑宽了呢？哎，为什么撑宽了呢？很简单，因为现在这个div整个它的高度宽度是不是很大呀？哎，它的高度宽度很大，那就导致它会把负元素给撑宽，实际上现在这个div等于是已经从它这个负元素里面溢出了，啊，溢出了，而这个东西我们想一下，它是一个弹出层，它应不应该在副元素当中占据位置，哎，不应该占据位置，所以很明显这个二维码这个东西。

那同样它应该也是一个绝对定位啊，也是一个我们叫做po一个阿路的开启绝定位，也就是说它不应该在我们的负元素里边去占据什么呀，占据这个位置啊，它是不是应该占据位置，所以这个时候你看我一给它开启决定定位，是不是就没有这个问题了，哎，就没有这个问题了，很简单对吧，很简单，好，那这一块给他处理完了，然后的话就是这哥们儿的这个位置问题了，对吧，这哥们的位置问题，那现在它的位置是什么呢？

现在它的位置是一个等于是靠在左边了，其实我们这个top值不用调了，Top值让它在这就OK了，我们有一个life的值，我们需要调整一下位置，Life的话，现在就其实就等于是是是是零了，这东西是不是应该得在，得在它的这个得在中间啊，哎，在中间，哎呀这个就麻烦一点了。呃，因为什么呢？麻烦在哪儿呢？麻烦在它这宽度，我们现在它是被字被字给撑开的，我们要想通过一种。

我现在想想啊，应该现在没有什么特别呃，特别完美的就是你通过计算这样居中的一个方式，所以这个时候呢，我们只能是通过一个呃试的方式了，那所以这个东西它现在是靠这个位置，那我现在需要它居中，那居中的话就让它往左移呗，往左移比如说它的我来一个负60像素，我们来看看大概效果，哎，负六像素有点大了，那我就负30像素，我们就试一下，我不不去量了啊，我们视觉上看居中就OK了，40的。哎，40要抛那边了，那我就是一个三十八三十七。嗯，37的话，我看的话。还是有点偏左，偏左了的话，我们调小01:35。36。嗯，那我们看的话基本还是有点偏38。嗯，38我感觉差不多了啊，我感觉差不多了，所以这里边我们就大概去估一下吧，啊大概去估一下，因为这里边我们现在就是如果你能确定一下，就是它的宽度，它的度其实我们这儿也能确定啊，也能确定你看一下，但是你说是能确定，其实也不能确定，因为现在它里边的字是这四个字，那以后这字是不是有可能发生变化呀，当然这个说的是一个比较极端的情况啊叭，较极端情况轻易肯定是不会变的啊，对吧，轻易肯定不会变的，所以它现在的宽度是一个44啊，它现在的宽度是一个44，那等于对于它来说，它的终点在哪呢？在22像素那个位置，对吧？在22像素，所以你这儿可以写一什么呢？你这儿可以写一个，哎，我一个life的22像素啊，Life的22像素，那等于什么呢？等于说现在这个点是它的一个什么呢？是它的一个终点对吧？是的一个终点，但是现在问题是，现在我是让谁跟它中点对齐呢？是让我的这个左上角这个点和它的中点对齐。

对吧，那我们需要什么？我们是需要让它的终点和它的中点对齐啊，哎，所以这个时候我还需要再把它往回干嘛，我要把它现在是这个位置，我还需要把它往这边去挪，挪多远呢？是不是挪这么多呀，哎，挪这么多，所以这个时候你可以算一下它们之间的一个这个一个距离，然后再给它去设置啊来设置你看比如说这儿我们来看一下这哥们儿有一个宽度，这个QR扣的宽度是一个124 124等于说什么呢？等于说我现在是让它跟中点对齐了，那我要它这块跟这块对齐，那等于我得把它往往左边是不是再拉回124，哎，往左边再给它拉回去124，呃，往左边拉回124，我们来看一下我这块可以通过什么方式去拉，我们来看一下啊，这块我设置完了，等于它现在用什么去拉呢？那其实我们现在这个life的值是定到这儿了，那其实我可以再给他设置一个margin life，因为margin life也会影响你的位置。

所以我可以设置一个margin left，因为我left是等于把把它往这移了，诶我marin left干嘛呢？再把它往左移啊，往左移是不是就给给它拉回去了，哎，给它拉回去了啊，所以在这儿的话，我可以再设置一个marin lab，但是你要想要往左移的话，你的marin lab应该是一个负的，拉回多少呢？应该拉回的是正好是它宽度的一半，这一宽度是124，一半呢，就应该是一个62个像素啊，62像素，诶应该是一个负的60，那这样是不是就等于给它拉回到那个位置了，哎，拉回到那个位置，那这样就达到了一个这个哎居中的一个效果啊，居中一个效果，嗯，当然其实这么写没有什么意义，最简单的方式其实还是我们刚才那种，刚才那种写法，那是最最最最最直接的方式啊，最直接方式，或者其实你就可以给他给他算一下啊，给他算一下，那本来是22，这又拉回来62，那就等于这是一个什么呀，这就是等于是一个。

等于是负的40吧，所以应该写的负，我这如果是写负40，应该是跟他是一个效果。

负四值应该跟刚才那个是一个效果是吧，达到一个居中效果，所以你其实这个值最简单就是算一下就行了啊，但是关于刚才我那种对的方式的，后边我们还会去讲，现在先不用管它啊，后面再去讲，刚才讲的可能稍微有点乱啊，后边我们再把这种方式呢，再去总结一下啊，现在你先了解一下好，那现在我们整个这个框也给整完了，它其实整体来说并不难啊，并不难，但是麻烦点就是在于你得就是这个定位的地方需要去有点有点麻烦啊，有点麻烦，那然后的话就是我们下边这个事儿了，那这东西是不是一上来是隐藏起来的，哎，隐藏的隐藏的话。它做的一个效果是一点点，它是什么呀？它是它是一点点出来的，对吧？一点点出来的这个效果的话，我暂时先不做，待会儿我们可以再做一下，暂时先不做，我们先把整个的结构做完了，因为我怕说太多了，可能记不住，对吧，记不住，所以这个效果的话，我暂时先不处理，我先干嘛呢？我就先让它隐藏起来，隐藏的话，其实我们最简单了，我们让这个q r code呢，我们这来一个display，我们来个什么呢？来一个呢，来一个，那那这个时候它是不是就就隐藏起来了，诶隐藏起来了，那然后什么时候出来呀？哎，什么时候出来，那也就是说当我们去ho这个APP的时候，我说它出来呀，哎，所以我在这个APP，我们再给APP来一个这个ho，当APP有这个鼠标移动状态的时候，我们要设置一下这个二维码状态，直接点一个这个q r code，我们直接来一个第4PLAY，我给它改成一个这个block block，也就说当我鼠标移入的时候，它是不是就出来了，哎，鼠标移入的时候就出来了啊，当然还有一个问题。

这三角吧，这三角鼠标移入的时候是不是应该也消失啊，哎，已消失，所以这个三角的话，我在这儿也给它写一个啊，默认的话display我们给它来一个这个block display来一个这个block，哎，然后呢，当我移入到这个APP里以后，我们再给他设一个什么呢？设置一个第四列block，对吧，我们这直接来一个这个apep。

下了一个这个APP的一个这个冒号，冒号一个after。嗯。第斯普雷应该是一个娜迪娜，哎，默认消失，然后当我鼠标，哎呀。鼠标移入的时候，我们来看一下APP ho。那这个东西这么写还是有问题的，因为等于现在我的这个它是呃，找不到这个after，等于我移动到进去以后，它就它找不到这个东西啊找不到这个东西呢，我们来想一下怎么处理APP。B ho，然后这是我们这个APP冒号一个after ho的时候，我才给它设置这个after，嗯，那就只能是这样了，我就不能给APP去绑了，那我就得给APP那个外边那个副元素，也就是要给这个Li去绑了，啊给这Li去绑了，嗯，所以呢，我就直接改一下吧。

改一下改成什么呢？哎，这样改，改成我们这个Li冒号一个ho，以后我要找谁呢？我要找它下边的子元素APP，比如说如果你没有APP，我是不会去找你的，然后再找这个code。嗯，这样写的话，我就不用再给那个LY加类了，不然还得加个类啊，然后我就看效果。哎，是不是一个效果呀，哎，一个效果对别的也没有任何影响，对吧，只有它这样会出来，然后再写的话，下边我再写一个，这来一个什么呢？Li ho，直接直接写上面就行。Li ho，当我Li发生ho以后，我让这个APP啊，它的子元素APP，哎，设置这个after，那这样的效果是不是就可以实现了啊，就可以实现这样一个效果啊，那这样就就没有问题了啊，就没问题了，当然这个时候你你还可以做法，你给这个Li加个类，加个类加个class，我们叫一个APP rapper。

Rapper，然后呢，在这儿的话，你就可以不通过元素选择器的，你可以直接通过什么呢？通过这个类选择器。直接来一个APP rapper啊，这样可能会更好一点啊，更好一点，但是刚才两种方式啊都行啊，都行都没问题啊，都不会出问题啊，都是可以实现啊，你看这样是不是也就OK了，哎，就OK了啊再说一下为什么要改啊，为什么要改，因为刚开始的话，我是尝试给这个A做什么呢？给这个APP也就这个A做的一个，但是我会发现的话，对于下边这个框没问题，但是这个三角来说，它是个尾伪元素，你的时候J不出来它，那J不出来它，那这里边我们就做一个哎，特殊的处理了啊特殊处理了，所以这个时候我就选择把这个类给它设置到这个LY上了，这个ho，但是这个我也没试过，我们可以再试试看看别的方式，我们先这么写吧，你可以写完了以后，你再尝试一下别的方啊，别的方式，那好，那我们这个下拉层就写完了，但是这个玩意儿确实又是有点有点小麻烦，有点小麻烦啊，然后的话，这儿还有这个层是吧，这边还有一层，这层呢，我们暂时先不做啊，我们这。

停一下，给你点时间，你把这个层自己来做一下啊，慢慢做一下，别着急啊呃，不懂的地方多多看个视频啊，并不难，然后的话，关于这个的话，待会儿我们再去再去说啊，下节课我们再讲这个停一下。