尚硅谷前端基础 (108)

好，那接下来我们来看一下我们的这个小米这个中间这个下拉层，那我们还是再强调一点啊，它的这个下拉层啊，一定是主要是通过GS去完成的，所以这里你说老师我们能不能。做的跟小米这个做的一模一样的，对不起，没有GS，我们现在呃很难去实现这个效果，或者根本有些东西根本就是离开离开了GS。根本就实现不了啊，根本就实现不了，你像你现在看，比如说现在我们这电视，我移动到电视这它显示电视，当我移动到这个红米，这显示手机，那这个时候很明显这里边的数据肯定是通过GS去切换的，而不是通过我们这CSS去去做什么改变，一定是GS，因为它的层都是一层，只是里边的内容发生了发生了变化，所以这个东西我们用CI做起来可能也能实现，但是会非常的什么呀，非常麻烦，所以我们要做的话，我们就不做它里边这个内容了，我们就做这个下拉的这个层弄出来就行了，就是说我要做一个效果，就是我鼠标移进去，然后这层出来，我鼠标移出去，这层消失啊，我们做这么一个效果就OK了啊，那其实整体的一个思路跟上边这个下载APP是差不多的啊，基本上是一样的，但是这里边你有一点需要注意的地方啊，需要注意的地方这个层什么特点，你看啊，我移动到小米这儿它会出来，我移动到红米这儿它也会出来，我移动到电视这儿它也会出来，那注意了出来这些层虽然显示的内容不一样，但是他们数据是同。

就是数据不一样，但是他们的元素，他们那个框框是同一个框，所以这里边我们不需要做，说我小米手机做一个，他做一个，他做一个，他做一个，我不需要每个都做，我只需要做一个公共的框，也就是说我移动到每一个出现的都是一个框，对吧？这是第一点，第二点，当我移动到以后，他出去，然后我切换到红米的时候，这个框有没有消失，没有消失，所以通过这儿你也看出来就是一个框，对吧？移动进去会出来用到别的框的时候，它不会消失，而是切换了一些数据，但是切换是用什么呀？是用这个GS去切换的，所以这个时候注意了，我们就说一下，等于我的这个框实际上是上边这一系列元素他们所共有的啊，他们所共有的，所以你在设置这个框的时候，一定要考虑清楚这个框我到底要设置谁啊，要在哪，要写哪，所以这个时候我们先写一下这个结构吧，呃，结构的话我们来看一下我们这，那我们这个结构的话，我们页面上刚才这个中间这。

的导航条，我们用的是一个这个这个navy的一个rapper啊，Navy的一个rapper啊，Navy的一个rapper的话，我们要做的一个效果是什么呢？是当我们的鼠标移动到这个上边的时候，也就是这个超链接的时候，移动到它上边的时候，我们的这个内容是不是要能能显示出来，对吧？内容能显示出来，那我们来看一下我们超链接的一个关系，超链接是我们的这个A，然后这个ul里边放的是一组一组的这个Li啊，也就说我们要移动到超链接里出来，但是这个时候如果我们用纯4S去实现的话，我们希望的是鼠标移到超链接里，然后它会出现，那这个时候你要做的话，其实还挺麻烦的，因为你没有办法通过超链接去选中那个元素，或者说很麻烦，所以这里边我们的设计就直接，哎，我采取这样一种设计干嘛呢？当我的鼠标入到我们的这个Li，诶，当我们的鼠标移入。

到我的这个Li以后啊，U进去以后，然后干嘛呢？哎，我让那个隐藏那个层给它显示出来，哎，就这么一个事儿啊，所以我的这个效果我绑定给谁呢？绑定给Li啊，绑定给LY，所以啊，我们直接在ul里边，我们在这儿来创建一个什么呢？哎，创建一个这个弹出的一个层啊弹出层，哎，那这里边我们直接写一个div div我给他一个class class呢，它里边显示的是我们这个商品的一个信息啊，商品信息，那这个里边我们给它起个名叫叫呃。

叫goods音符吧，哎，故S的一个音符啊，商品的一个信息啊，商品一个信息，然后呢，这里边我什么也不写啊，什么也不写我就空出来，因为我们就主要做那么一个弹出效果，它里边至于写什么内容，在这儿的话不是特别重要，我们就先不写了啊，然后的话我们就要设置一下它的样式了，首先这玩意儿它肯定是有一个这个高度的，对吧？高度的话我们可以看先给它写出来，高度的话大概是多少呢？从这边量下去应该是一个228 228加上一个一个相素边框应该是229，所以它的高度那就是一个228就完事了啊，CTRLC我给它复制过来，呃，在这儿的话我们直接写啊，写我们叫做一个这个点点一个navy下的一个点，一个这个goose infer，然后hi的是一个什么呢？Hi的是一个228像素啊，228像素然后的话它有一个背景颜色，Background color background color，我们这是一个井号，F是一个白色，但是我们现在为了看得清楚一点，我们先给它来一个这个，呃，来一个哎，绿色啊，然后还有一个border top，有一个这个一个像素的上边框啊，比低啊boder，一个top一个像素，然后是一个solid的颜色，我们再看颜色的话，它应该是一个有点灰灰色这么一个颜色是吧，我们我们看呢，我直接拿这个截图工具取一下吧。

看一下这个颜色是2242424这个颜色啊，所以我们就直接取一下，我们这就是一个RGB的一个这个224224224啊这么一个颜色，然后我们来看效果，那基本上我们来保存一下啊，没保存CTRLS保存一下，那是不是就出现了这样一个框啊，哎出来这么一个框，当然这个框现在它的位置是是有问题的啊，很明显是有问题的，它位置是跑到最上边去了，哎为什么跑到最上边去了，因为现在这些元素是不是都开启了浮动了，哎浮动以后脱离文档流，那脱离文档流这哥们以这哥们是不是就就往上走了，哎，所以它应该是在什么，应该是在我整个框的什么呢？整个框的一个最下方啊，整个框的一个最下方，所以这里边我们直接给它开启一个什么呀，绝对定位，因为最终它是不是也需要隐藏呀，哎，给他开启一个绝定位，让他也从文档流里边去脱离出去，诶脱离出去现在看不见了，看不见为什么看不见，因为没指定宽度，所以这时候给他。

指了一个宽度外来了一个100%，宽度有了，那这哥们是不是就又出来了，哎，又出来了，但是现在位置依然不对，并且他还把我们那元素给盖上了是吧？因为它层级高嘛，他就应该盖住啊，就应该盖住啊，待会我们再处理这个问题，那现在这个位置也就OK了啊，也就不位置还不OK，东西已经出来了，对吧？位置我们还需要往下调，那这个时候实际上它的位置是不是应该在我们整个这个hier的一个下边啊，ER在哪呢？我可以给它设置一个背景颜色hi.er。

Hi点在这儿，我给他设置一个背景颜色color，我们来一个井号，一个F0，设置一个黄色的背景，Hi点在哪呢？Hier是不是在这儿呢？哎，那也就是说它实际上应该去哪儿，应该是在我们hi点的下边，是不是也应该就是在在这个位置，哎，就应该是在这个位置，那这里边问题来了，我要在这个位置，很明显我要调整它的一个偏移量，调整偏移量，那这里边我们就要考虑清楚，我现在希望的是让我们的这个隐藏这个层，要他参考于谁去定位，诶我是让他参考于我的hier去定位，还是说我hier外边还有一个hier外边我们是不是还有一个那个hier，还有rapper啊，哎，Rap我们来看一下hier一个rapperwapp呀，我们来一个这个，我们叫做一个这个设置一个红色，实际上外边还有一个是不在这呢，哎，那问题来了，现在我是让我们的这。

隐藏框是相对于header去定位，还是相对于hier rapper去定位呢？哎，很明显这里面我们应该相对于header rapper去定位，为什么你看这我们这个隐藏层你看啊，它的宽度是多少，宽度是不是跟屏幕是一边宽的呀？哎，跟屏幕是一边宽的，那这个时候如果你要想让它参考于还的定位，你就说这块，那这个时候它的宽度你设置100%的话，是不是只能是这么宽呀，那这两段的距离我们是不是就设置不出来了，或者说能设置出来就很麻烦，而如果你让它相对于整个这个hi定位，你要想的宽度是这么宽，你直接把它的宽度设成100%，它是不是就自动就变成这么宽了？哎，所以这里边注意我们的参考定位的一个元素应该是我们这个红色的，也就是这个hier wrapper，而不是我们的这个hier，所以这里边我们要给我们的hier rapper开一个什么呢？开启一个相对定位，那这样的效果就是可以让我们的整个这个盒子。

这个隐藏那个盒子是不是参考于它的位置进行定位了，哎，那现在注意参照物是什么，参照物就是它了，原点在哪？原点是不是就在在这个位置，哎，原点在这个位置，那现在我们希望的是它的位置在它下边，哎，在它下边，所以这个时候找到我们的这个隐藏层啊，隐藏层我们直接来一个top top应该正好是100像素，因为它的这高就正好100嘛，那这样它是不是正好下来了，而left是应该正好贴到这个边上，所以left我们正好应该就是一个零，那这样的效果就它正好贴到这个边上，并且这个时候你写完了，你会发现一个特别好的事儿，好在是在哪呢？你看它的宽度现在是不是正好是100%了，为什么是100%？因为我们的宽度是参考于谁，参考于这个包含块确定的，你这儿写了一个宽度百分百，他说的是谁的百分百，说的是它的包含块的百分百，那我们这个goods iner的包含块是谁？我们说了它的包含块是不是就是离它最近的？

开启了定位的祖先元素，也就是是谁呢？就是我们的这个hier，所以这个时候它的百分百就是hier的百分百，并且当你屏幕改变的时候，它的宽度是不是也会随之改变呀，诶就不会出现特别窄的情况，因为它的跟屏幕就是一边宽的了啊，跟屏幕一边宽的好，那这里边我们这个整个这个层我们设置完了啊，然后我把这些颜色都给去掉啊，这是一个FFFF啊是一个这个，诶是一个这个白色的一个背景，然后上边这个呢，是没有背景的啊，我们这两个一个是我们的hier rapper，还有一个是我们的这个，呃，Hier都是没有背景颜色的，那这样就得到了这样一个效果，对吧，当然现在这个边框是不是也出来了，哎，只不过这个隐藏层的话不太明显，我们来看一下它原来效果，原来效果是不是还有一个这个，还有一个这个。阴影啊，哎，还有阴影，所以为了体现出这个东西呢，我们把这个阴影啊也给它整出来，我们直接来一个这个，哎，Box的一个shadow box shadow我们先写个零零，然后需要半径，我们来一个十像素，然后颜色是一个RGBARGBA，也是来一个透明吧，哎这么一个颜色，这一保存，这个阴影是不是就出来了，哎，但是这阴影出来是出来了，一但是的话，它导致上边也出现一个阴影，实际上我们原来效果上边是没有阴影的，对吧，上面没有阴影的，所以这个时候呢，我可以把它的阴影往下挪一点，往下挪我这直接来一个五个像素，然它往下挪一点，然后上边干嘛呢？诶，没有阴影啊，我把虚化半径呢也调小一点，因为这样的话，它下边就会大了，也调一个五个像素，那这样的效果就是上边没有阴影，下边会出现一个阴影，下边的阴影我觉得还是有点大，我们再调小一点，我们来个三。

保存一下。呃，应该是颜色有点深，颜色又来一个底儿，哎，那这样一个效果是不是就出现这么一个阴影了，哎，出现这么阴影了，那这个就是我们这个隐藏这个层啊，隐藏那个层当然现在它是有的，对吧，但是我们原图里边默认情况它是不是没有啊，哎，没有，并且它是不是也是通过这么一个动画去切换的，你看它是不是也是慢慢去展开的，哎，慢慢去展开的，所以这个时候我们隐藏这个东西，那我们就不通过什么呢？我们就不通过那个display down了，我们直接通过一个什么呢？通过一个head，我把它的hi设成什么呢？设置成零，高度变成零，那它是不是就就没有了，哎，高度变成零就没有了，但是的话，这个比我们之前那个要麻烦一些，麻烦在哪呢？因为它是不是还有边块啊，它是不是还有阴影，哎，还有阴影，所以这个时候它的这个边框以及阴影，我们在这儿我们都不设置啊，都不设置什么时候设置，当我想它显示的时候，我来设置，所以这个时候。

或者我们设置完了，我们来一个，再来一个overflow，一个hidden，那这样它就达到了一个隐藏的效果，当然我们要为了有动画效果，我们再加一个这个transaction啊，Transaction来一个hiight he hi，我们来一个0.3，哎，0.3秒啊，写这么一个，或者你写这个什么呀，你写这个三毫秒，诶30毫秒也行是吧，我们就就给他写0.3秒啊，0.3秒写这么一个，那写完了以后的话，我们这块就隐藏起来了，那我们是不是还需要让他让它出来呀？哎，什么时候让它出来？哎，当我鼠标移动到这个Li上的时候，是让它出来呀，哎，所以在这儿我们直接来一个navy下的Li，我们给他来一个ho ho的时候，我们要让这个故ose in for出来，那注意了，现在我是ho谁ho Li让故ose in出来，那现在你要搞清楚的一个问题是，这个goose INF for跟Li是什么关系？我们怎么通过这个Li找到guose in for？诶，我们来看一下Li。

Li在这儿，Div good for是不在这儿啊，哎，他们很明显是一个兄弟关系对吧？是一个弟关系，所以我们这要找到他的话，我们应该是通过一个兄弟元素选择器，但是注意兄弟元素选择器我们有两个，一个是加，我们点一个固S因数，对吧？还有一个是波浪号，那你注意了，用加行不行，用加肯定不行，因为你用加显得的是后边那一个，很明显这故事音符不是紧挨着Li的，它跟Li之间是不是还隔着很多内容呢？哎，很多内容呢，所以这个时候我们应该是一个什么呢？波浪号，这是什么呢？选择后边所有的guci音符，但是还好你没有所有，其实只有什么，只有一个，那这样就不用考虑位置了，然后的话，你再让它的height变成什么呢？变成一个228个像素，那这个时候你再看效果。

当然现在你没有背景颜色看不出来啊，背景颜色我们换一个边位保存一下，是不是就有这样一个效果了，哎，就有这样一个效果了，当然你说老师那个边框又没了，哎那这时候你就要把边框也要干嘛呢，也要写过去边框还有我们的这个阴影也要写过去，那这样的效果就是你一移动它是不是就出来了，哎，那这里边其实你这个背景颜色你就可以换回白色了，你看看能不能看出来啊，因它现在里边没东西，哎，是不是就就这样一个效果了，哎这个隐藏层就可以出来了，并且你看这儿，哎是不是就都可以出来了，哎但是呢，这也产生了一个问题，什么问题呢？现在呀。

我的这个ho是绑定给谁的，是绑定给Li的，就是说只有我鼠标在这个Li上的时候，是不是才会触发这个味，哎，只有鼠标在Li上的时候才会发这后味，所以Li是在这儿，而我们这一个部分的区域是不是属于那个div位啊，哎，那么说当我鼠标从这儿移到这个div上的时候，这div是不是就消失了，哎，就消失了，所以这个时候就导致出现一个很奇怪的现象，等于说我们这个弹出层我永远都选不中，我只要一移上去就没，只要一移上去就没，为什么没，因为现在我们的后是绑定给LY的，但是我们想一下，我们要的效果是不是说移到它上边就没了，哎，不是，也就说移到这儿以后，你这个东西不能没，只有移到哪儿啊，你移出去，移到这儿或者移到这儿了，它才消失在这个范围里的时候，它是不是应该都应该有啊，哎，都应该有，所以这个时候我们除了要给Li绑定后以外，我们还要写一个分组选择器。

原分组我还要写什么呢？哎，我们还要写一个goodose in for的一个power，也就是说你移到这里边的时候，它同样也不能消失，哎，我们来看一下，诶，等于现在我这写完了以后，它是不是没用啊，我们来看看啊，没保存CTRLS保存一下，那这样再写。诶，看一下哪写错了啊，Goodose in for，哎，这是一个冒号，一个ho，当我们移动到这里边的时候，我们说它高度是一个228个像素。故事音色。Goods INF冒号一个whole，我们来看看啊，这是哪的问题，再看一下。

哎，等于说现在我们这写完了以后，是不是是不是没用啊，哎，没有产生任何的一个作用，这是为什么呢？故in我们给它换一个颜色啊，换一个这个井号，一个BFC这一保存再看效果，等于说现在我们移上去以后，它是不是依然还会消失啊，哎，依然还会消失，那这诶。哎，他这个挺奇怪是吧，这个阴影还没有消失，但是那个东西消失了，我们来看一下我们哪写错了，这是一个逗号，这也选择了故s in for，故ose in for啊这是我们选择器的优先级的问题啊，优先级的问题，因为这两个都是这个类选择器，这也是类选择器，是不是两个都是两个类选应器啊，优先级一样，优先级一样，那导致是不是后边把前面给覆盖了，哎，所以你干脆你把这个呢，写到上边去，写到上边去，或者你给它加一个点nay都行啊都行，原泥的问题啊，保存一下再移动，是不是这样就不消失了，哎，这样就不消失了啊，就完成了这样一个效果啊，还是改成这个白色，那这样我们这个隐藏层就可以正常的去显示出来啊，就可以正常显示出来了，其实哎也是一点也不难，主要你要考虑一下这哥们儿，你再给它设置宽度的时候，你要考虑它这个宽度到底你要参考于谁，我们在这儿参考的是谁，参考的是整个它外边那个，而不是我们整个里边那啊参考的是。

然后还有一个要解决的问题，就是我们的这个框啊，你看我现在移到这儿，它是不是也会出来啊，哎，为什么移到这儿也会出来，因为前边是不是有一个那个全部商品在那儿藏起来了，哎，那我一到服务社区这儿，它是不是也会出来，但是实际上我们原版里边移到这儿会不会出来，哎，不会出来，一到服务社区这儿它会不会出来，同样也不会出来啊，同样也不会出来，所以这个时候我们应该是什么，一到这儿，一到这，一到这移到这儿，移到这儿，一到这儿都会出来，但是这个东西还有我们的第一个是不是应该都不包括在内呀，哎，都包括在内，所以这个时候应该把前边两个给它去除啊，给它去除，那这个我们要怎么办呢？我们这绑定了后位的话，我们这是所有LY对吧，但是我们这个LY是不是应该不包括第个还有那个最后两个呀，哎，不包括第一个还有最后两个，所以这个时候我们应该用的是一个什么呢？哎，用的是一个这个哎否定选择器啊，否定伪类啊，否定伪类什么。

这除了，也就是说我要选中它里面的LY，但是除了谁呢？哎，比如说我们这应该除了，至少你应该除了第一个，哎，第一个child，或者叫first of type type是不是第一个同类别的子元素啊，哎，First of type，那这样你再看一一到这的时候还出不出来了，不出来了，但是其他的是不是依然会出来，哎，依然会出来，那除了第一个以后，还是不是还有这个，最后这两个呀，哎，最后这两个的话，我们。

最后两个的话，我们写起来就会稍微有点麻烦了，我们看看我们写一个这个，哎，德辑分组行不行，那最后两个的话，一个是我们这个nth of，诶nth last of，那这个是不表示的是最后一个呀，哎最后一个，那这样的话，我们就表示选中的是最后一个，最后一个也不让他什么呢，不让它出来。N这里边我们来看最后一个是就不会出来了，完了这样写都不出来，所以这个时候他不应该这么写了，这个时候啊，你要去的话，你就不要用这个分组去了，你就干嘛呢，你就一个个去吧，呃，一个个去的话，当然我们合以后边接着后边写闹腾是吧，你再接着写啊，再写什么呢？再写一个这个。Not not not n th of type第几个呀？哎，这是最后一个是吧，最后一个还有就是最后这两个应该是什么呢？一二三四五六七八九十，第九个，还有第十个，那其实这你既数了，你就用nt child也可以，第九个。

哎，当然这还得写一个note，但是我就不想写了啊，因为你这写的话肯定可以实现，但是你很明显你写的时候有点什么呀，有点麻烦啊，有点麻烦第十个保存。这样他是不是就不出来了，哎，你还得再写一个，再写一个什么呀，第九个，因为他这应该是没有办法写分组的，在里边只能写一个，我们写个分组，我们再看看啊，我们来试这来写一个九。哎，保存一下。你看一写整个都废了，所以你这块要写的话，你再写一个写个。CTRLC复制一下NOTE10完了以后，我们再来一个note，一个什么呢？NOTE9，哎，那这样我们再看效果啊，这样一移动这两个你看就不出来了，这个就会出来啊，然后第一个也不会出来，那这样就只有中间这块会出来，那就达到这么一个效果，对吧？但是的话，其实我们虽然可以用这种方式去写啊，但是我还是给他住了，我不太推荐用这种方式，因为这种方式的话，可读性会很可读性会很差啊，可读性会很差，你用起来的话也不是很方便啊，不是很方便，可能很多同学你看的话你都看不懂对吧，看不懂，所以呢，这个时候呢，我们就改变一种形式，那你既然是只希望中间这几个LY可以让他们出来，那我就干脆一不到二不休，我单独给中间这几个LA啊，我单独给他们加个类啊，我单独给他们加个类啊，比如说我想个类叫什么呢？嗯。

这个类我叫一个。叫一个show吧，叫一个受show我们这个故S啊show我们的故S，也就是说当我鼠标移动进去以后，可让他们去显示，然后呢，你想让谁显示，你就把这个类给谁加上就完事了啊，那这里边就一个个加就完事了，你可能会觉得说老师一个个加挺麻烦呢，怎么办呢？看这啊，我先给它复制一下，复制一下CTRLC，然后按着你键盘上的这个alt键，Alt键，然后你就点点这个Li这块，那这里边其实你会发现你这会出现什么很多光标，那这个光标作用就是你可以在这儿一起干嘛，一起对这些Li进行修改，那这里边我们就可以直接CTRLV，那是不是都粘过来了，哎，都粘过来还多粘两，后边两个是不是不应该有啊？哎，后边两个不应该有，把后边两个给它去掉。

直接去要，也就是说只有我中间这几个才有这个showose，那这个时候我们写这个样样式你可以改一下了，LY你就不写LY，你直接点一个点一个什么呢？叫一个showose，哎，然后来一个冒号一个，那这样你就不用再写的像上面那么复杂了啊，那这时候效果其实是一样，这候就不会出来了，哎这就不会出来啊，就达到了这样一个效果啊达到有么效果好，那这一块我们就给它，呃，就算是给它处理完了，对吧，它处理完了我们这个弹出层也就可以去显示了啊给显示了，呃整体来说呢，它并不是很难啊，并不是很难，但是你做的时候还是需要去细心做一下啊，细心做一下，然后再来看的话，还有一些细节这个问题，现在我们这体验不出来。

但是其实在我们这个下载APP这就应该注意这个问题了，你像这个问题，它是一个下拉层对吧，包括我们这个东西是不是也是一个下拉层啊，那既然是下拉层就可可能遇到什么呢？下边是不是可能会盖住其他元素啊，那这时候你就要考虑一下，当它遇到别的元素的时候，我们是希望它盖住别的元素，还是别的元素盖住它，那这个问题你一定要想清楚，那如果说比如说像这一层，这一层很明显它应该是最高的，他应该比所有的层呢都高，也就是说别的层遇到它基本上应该是都被它盖住的，对吧？所以这个时候你就应该给他一个比较高的层级啊，比较高的层级，那像这个下载APP这也应该有一个比较高的层级啊，把别的元素给盖住，包括我们的这购物车，它的下滑层是不是也应该有一个比较高的层级啊，哎，这样才能很好的去盖住那些元素，所以这个时候你用的时候，这个层级你需要注意一下，所以像我们的这个goodose in for，我们就应该洗完了。

最后还应该再给他写一个什么呀，层级z index，哎，比如说你希望的比较高，我就写一个四个九，那这样基本上他遇到所有元素都会把它们盖住，而不会被其他元素所盖住啊，当然现在看的话，你觉得效果是没有任何区别的，只有当小有元素的时候，我们才能体现出来，好，下拉层我们就做完了，我们来停一下。