尚硅谷前端基础 (147)

好，那么接下来我们来往下再接着进行啊，接着进行我们把这先给它叠起来啊，这个是我们导航的一个那个菜单练习的效果，呃，然后呢，这个后的话，在这儿的话，我们实际上这儿我写个注释啊，这是我们说这个鼠标什么呢？呃，鼠标移入以后的一个效果，那这里边注意啊，正常来讲正常项目时，正常项目时我们这个效果应该是需要什么呀，需要通过我们这个GS来实现，但是现在我没有GS，所以我们这是一个D替代的啊，替代的一定要注意，因为我们现在有局限没有GS呢，所以我们只能先用CSS去模拟这个东西啊，然后的话，我们左侧呢，我们来看一下，左侧的话，它还有一个这个下拉的菜单，下拉菜单刚才我们它藏起来了，那现在我们把这个菜单给它展示出来，展示出来以后呢，现在很明显这菜单就就跑这儿来了，对吧，就跑这儿来了，那这个菜单正常来讲很明显这个菜单应该是在什么，是不是应该是。

在这个位置的一个底边啊，哎，底部，所以很显然这个菜单我应该也是给它开启一个这个定位啊，也是应该给它开启一个定位，所以这个时候啊，我们来直接给我们这个菜单，菜单的话，我们在这上面写吧，这是来设置我们这个菜单，菜单的话，我们这直接写一个我们这个菜单就叫一个什么玩意儿，就叫一个navy吧，我起的名我记得叫做一个navy啊，我们直接点一个这个navy navy的话，应该是来到它的这个位置的一个下边对吧，一个下边，所以这个时候呢，我们直接来一个position，来一个aut开启绝定位，同时呢，给上边开启一个相对定位，也就说不让他去占位置了啊，然后他这个位置是不是自己就跑下边了，哎，自己跑下边你也可以去，你也可以去写一下是吧，但是这个位置应该是正合适的，如果要写的话呢，应该是一个top，就是一个48个像素，哎，Top就是一个48个像素啊，把它放到这个下边这个位置，那其实默认也是在那对吧，这个位置那这块放。

弄完了以后，我们来看一下，现在我们先处理它出来的情况，它出来以后的话，其实你会发现它整个这个框是不是把我们这块都给撑满了呀，哎，整个这框把我们整个这个网页给充满了，所以这个时候我们先给它设置一个背景颜色，这来设置这个背景颜色很明显也是一个黑色啊，Background color，我们直接来一个井号，一个000设了一个黑色，现在它只有这么大，实际上的效果是把我们整个这块给它撑满了，但是说的是下边这块上面是不是没充满啊，哎，那怎么让它充满啊，还记得我们说什么呀，哎，你只需要把它的什么呀，这个life的值，Right值，还有什么这个bottom值都设置到最大，它这是不是自然就满了，哎，所以这个时候我们top是它，然后呢left是零，然后bottom是零，哎，然后呢，我们再来一个这个right也是零，也就说我上下左右的偏移量都是零，那这样我元素是不是自然而然就冲开了，但是这个时候你会发现很明显我这没有达到这个效果，元素现在是不。

变成这么窄的这么一个流一溜了，为什么会有这种情况，因为现在我们给life的me开启了一个相对定位，那现在nay是不是参考于它定位啊，而我们外的me本身是不是才这么点啊，他才这么点你跟他设置这个东西，那你这个东西算完了以后，我这我这个navy大小就没了，所以这个时候我这出问题的就是我不应该给left设置一个relative，因为这个时候我设置relative以后，等于我这个玩意儿相对于它定位了，而我其实最好的是我让这个东西是不是相对于我整个浏览器窗口进行定位，相对于我们初始包块HTMMR进行定位是不是最简单的呀？哎，最简单的，所以这个时候把我把这T我就住了，那这时候它就参考于H天猫定位了，H天猫的原点在这，它的原点也在这儿，所以区别不大啊，区别不大，但是好处是你只需要把这些值都设成零，然后我们这个元素是不是把线就给就给铺满了，还记得我们那个吧？哎，那个等式吗？你把left设成零，Right也设成零，而我们的Y。

写没写是不是凹凸啊，那么凹凸我宽度是不就满了，哎，宽度就满了，我top是48 48是不是在这儿啊，诶我高是零零是不在这儿啊，那么宽高度是什么？呃，高度是凹凸，那这时候高度是也自动充满了，所以那这样的效果就是你这个圆，你这个网页无论你怎么改，它都会是一个充满的状态啊，都是一个充满状态，好那现在我们这个块就给它撑出来了，对吧？撑出来了，撑出来以后呢，我们来设置一下他们的一个样式，它的样式就是里边这个Li的样式，Li的样式呢，首先我们来设置一下，呃，设置我们这个Li Li里边它这块我们来看我们这，我们这首先这下划线一堆玩意儿还有呢，对吧，我们在外统一设置一下，我们直接统一设置一下AA的话，我们先把这个text decorration我们给它去掉，然后呢，我们把这个back，这这个color啊，我们都给它换成这个白色井号一个这个FFF换成白色，那这样的话，基本上我给它弄一个这个统一的样式，我们这就避免去再写成别东西了，诶我。

写完了以后。你看一下啊。Na位啊，这是Li的问题，保存一下，哎，这样是不是就生效了，哎，就生效了啊，这样我们就达到一个统一的效果，然后我们再单独给他们设置，那首先看我们这个图，首先的话，我这一堆的话，他们是不是有一个统一的宽度啊，我们看这宽度啊，字体是一个14像素啊，格式我们就不管了，然后的话，它的宽度是一个这个五百五百一十三，那很明显这宽度不是什么呀，不是它设置的，这应该是，哎也没了，这个宽度是不是应该也是一个适应，它会自动展呀，哎自动展开，所以这个时候它的宽度我们不应该设置，我们应该设置什么呢？我们应该设置是它外边这个，它外边这个容器，也就是我们整个那个navy navy的话，我们来看一下它的样式。他肯定外边是有一个这个，呃，有一个内边距或者外边距之类的东西诶。找一下啊，我们它外边这个容器，它外边这个容器呢，也是一个这个ULUL里边你看它是不是给它设置了一个pading啊哎，Padding设置了一个，呃，这个数还还挺奇怪的是吧，46.875这个pading。

这个拍定按理说就应该哦，它这个拍Ding等于也是会去去改变的，那它这个宽度应该就不是写死的了，我们直接看看它这个样是怎么去设置的。它的这个样式我们来看一下。那它的这个样式，我们这儿它应该是设置的是一个百分比的值，我们来点开这是一个它，然后我们点开往里找找吧，这是个A，然后呢，这是这个Li Li整个的一个高度，高度我们看到了高度是一个，这个高度是一个这个44对吧，高度是一个44，然后整个ul的话，它实际上在这就是一个它等于就是一个这个居中啊，整个ul在这个屏幕上是有一个这个居中的效果，然后两边的距离是不是给它给它算出来了，给他算出来了，那我们想一下这块我给它整多少啊，我整多少一个宽度，那这里边其实我就直接给这个Li给它定一个这个定一个宽度就完事了，Li定的宽度呢，我们直接给它让它试。

嗯，让它是它整个宽度的，我们想一下应该80%就可以了，所以这一块我直接给LY定一个宽度是一个80%，那这样Li的宽度的话，它的效果就是我们这个整个这个navy的80%，然后在这儿呢，我们给它设置一个marin，来一个零，来一个这个凹凸，这样一保存，它就整个在中间就去居中了，那这样的话就可以确保它的一个距离，就是一个固定的，对吧，给它设置好了，然后它就基本上是在这一个居中这么一个效果，所以这个宽度我们可以给他写，你也可以给他定一个宽度，对吧，但是我这给他写一个80%啊，80%，80%以后设置了一个这个东西，然后它整个还有一个高度，高度我们先看看这个问题啊，这L整个的还是什么？哎，那很明显，这整个是不是都是一个超链接啊，哎，整个的话要都是一个超链接，那么它这个样式，其实我们最好直接给这个超链接设置，也就说这个高度我们应该直接给超链接，超链接这高度是一个44，那所以我直接给它来一个烂head来一个40。

四个像素，我让他把这个Li给它撑开，然后这个距离是不是就出来了，距离出来了，然后字体大小应该没有这么大，它应该是一个14个像素，我直接给它设置上这一保存，哎，字体大小也就出来了，然后它下边还有一个像素的白色边框，我们直接设置一个这个boder bottomder bottom，一个像素，然后是一个实线的井号，一个F，一个白色的边块，哎，那当然这块我们给A指令的话，这A是不是本身就这么大，这个边块就导致就跑这来了，哎跑这儿跑这儿来呢，你也可以把这边块给它往上挪，更应该做的是我们应该直接把这个A给它干嘛呢？给它转换成一个块元素，把A直接转成块元素，那这样这个边块就跑到下边这个位置了，哎，跑到下边这位了，然后这一块我们整个人，诶这这边块我这颜色不对，颜色没有那么深对吧，颜色是比较浅的一个颜色，我们来看一下这个边框什么颜色。

他的这个边框。他的边框给谁了，我们看看。哦，它的这个边框是通过一个笔before设置的啊，我们就不学它这个了，我们直接给它复制过来颜色就完事了啊，这个边框的颜色是这个。DBDBDB啊，然后设置完了以后啊，我们这。DBDBDB，没错。诶还是挺深的啊，它这应该是加了一个透明效果，因DB跟那个白色基本差不多，它应该加了一个这个透明的，呃，透明透明有没有我们看看。

Left。哎，那它这个颜色，它这也没有做这个透明效果，没有做透明效果，怎么会出现这么一个这么一个情况呢，外国color是一个这个黑色。哦，它是这个颜色吗？颜色粘错了吗？四意四意四意啊，这个颜色吧，你看啊，这个颜色基本上很接近了，对吧，那就我们就用它这个颜色吧，它这个呃。感情上比我这个颜色还要还要再淡一些，我们找一个吧，我们往下再往上再选淡一点。诶，这个颜色就很接近了，对吧，我们自己调一个颜色啊，那现在我们这块就就出来了，对吧？是这么一个效果，这是这是它的原版的是吧，我们看我们这个，诶这是我们这个对吧？那现在整个这个菜单的效果跟这个原版的基本上就类似了，但是它整个的话，呃，它这个菜单整个感觉位置比我们这要。

要靠下一点对吧，我们这个位置比较偏上，它这个位置更偏下一点，更偏下一点呢，我们这里边的话，呃，我们直接给它往下往下挪一点就行了，那现在我的这个。直接给谁啊，我们直接给这个navy加上一个这个pon就完了，我们给它加上一个pding top pding top呢，比如说我写一个50像素啊，50像素把它往下挪一点，诶，那这个位置是就往下挪了，你也可以再挪大一点是吧，你写个80 80有点大，你们写个60吧，啊60这你就想挪到哪挪哪了，这都无所谓了，对吧？我们这一块处理完了，然后鼠标移上去以后的话，它这个颜色会有一个变化，颜色会感觉是稍微的浅一点了，对吧？浅一点了不仅是它这有变化，那这个玩意儿是不是也有变化，哎，这个玩意儿也有变化，那所以的话，我们这个效果的话，我们就直接在这统一设置，哎，A，我们这直接来一个and的，我们直接冒号一个，当A的时候，我们的颜色呢，能稍微的稍微的深一点，没那么白啊，我们直接给它找一个这个，它这个深完那个颜色应该是跟那个跟那个线那个颜色差不多，对吧，我们深一点就完事，然后保存一下。

哎，是不是这个效果呀，哎，就有这么一个ho一个效果了啊，这个放大镜是不是也都有这个效果了，整个这块就出来了，出来以后的话还有一点注意，这块这个美图点com这个这个是一个什么呀？SPA，因为它不是超链接对吧，它不是超链接，你看它是点不了的，它不是一个超链接，所以这个时候呢，我们没有把它放到超链接里，没有把它放超链接里，那所以这个时候这个哥们的话，我们应该给它再单独去设置一个，我们这个也是这个字现在都看不见了，因为它是一个黑色的，我们直接给它这来一个，哎，这是我们Li里边的SPA，我们单独给它设置一个，设置一个什么呢？设置一个就这个颜色就行了，把颜色设置上，然后那个大小也设置上就行了。

这样一保存，哎，它是不是出来了，哎，但是现在的话问题是，呃，我们这个整个的一个超链接，它现在我给它转换成了一个块元素了啊，转成一块元素了，而这个是不是一个行内元素，哎行内元素，所以现在它是它是在跑给挤下来了啊给挤下来了，而我们看看我们原版的效果，原版的效果我们来看这些，正常来讲，你看这些整个这一条是不是都可以点呀，哎呀都可以点，而这一条你看后边只有这儿能点，这后边是不是都点不了呀，所以很明显现在这个A的宽度只有这么多，只有这么多，那我们直接省事一点，我们就直接干嘛呢？我直接让那个最后一个A直接A，我们这是一个等会我们看一下啊，它不应该是最后一个A，它应该是什么呢？Dollar，我们是一个冒号，一个这个叫做一个last child，我们这表示什么意思，不是不是Dollar了啊，And符是不是表示么外层也就是Li啊，那所以这个and符冒号last child这表示什么呢？这表示的是我们最后一个。

Li，最后一个Li是不是就这玩意儿，哎，最后1LI，最后一个Li里边的那个A，我应该是让它display，我让它变成什么呢？变成一个这个阴烂block，也就是说最后一个诶是一个行内块，剩下的都是这个都是块，那这样这个东西是不是就出来了，哎这个东西出来了，出来以后的话，那你看最后一个这个边框又出问题了，边框又出问题了，那我们这样干脆我边块提上来，我把边框给谁设置呢？给这个Li设置啊，边框变成Li了，那这样就跟这个A没关系了，那整个这一块效果是不是就出来了，诶你看跟这个原版基本上就就一致了啊，基本上就一致的效果了啊，然后这里边的话，它这个之间跟这个前面这块之间有一个小距离，小距离呢，我们直接给它加上一个margin，给A加上一个margin right margin right，我们来一个六个像素给它挤开啊往后挤一下，对吧，大家你可以再去调好，那现在呢，这个是我们的这个菜单的一个这个下拉层，下拉层给它。

那整完了以后，现在的话，默认情况下，这东西是不是应该是隐藏的呀，哎隐藏的，所以我们直接给这个navy的话，我们加一个position的一个叫不是display，我们来一个叫做一个那嘛呀，哎给它隐藏起来啊，隐藏起来什么时候让他出来啊，什么时候让他出来life的me触发了什么呢？Left me触发了ho的时候，我同时才让谁才让这个navy显示啊，我们这来干嘛呢？显示什么呢？显示我们这个隐藏的一个这个菜单，我们这直接直接这个应该叫做一个点一个navy navy的话，我们直接来一个display，来一个这个block display block让他干嘛呀，显示出来，现在我移动去，哎呀，Nay没出来，我们看一下哪写错啊，这是我写哪去了，Ho现在是不是等于是这写这来了，哎，那不对了，我应该是写哪呢？我应该单独写一个，单独我们在上边写吧，不在上边写了，应该是一个。

按符，刚才我们那个后是那个菜单的后啊，直接按的符冒号，我们来一个后后，然后把它写出来，然后再移过去，是不是就可以出来了，哎，就以出来了，当然你说老师我希望是一个那个那个有一个那个动画那个效果是吧，那这里面我们就可以，你就可以再去那个，哎，你可以去它的高度还不行。这一块动画的效果，我们看他这个。啊，它这个是从这边是从左边去，左边去移出来的是吧，左边去移出来的，那这一块我们，嗯，可以用那个定位去给它做一下是吧，我们改变一下这个定位，那这里边我们就不做了啊，因为现在我们关注点不在这个动画，这并且其实这样处理我们这也挺麻烦的，因为我们现在没有GS纯手工做它这种动画，你要是真的做出这种效果来，我们纯CSS做的时候还稍微有点麻烦，所以我们就不考虑这种了，我们就直接看我们这块，那这块我们就先让他出来就完事了，并且我们真正的效果在做的时候，我们这也应该是什么呢？也应该是一个点击出来，而不是鼠标移动以后出来，懂这意思吧，所以现在我们只是让他去，哎模拟一下啊，模拟一下好，那整个我们左侧的就给它整出来了，左侧整出来了，但是我感觉这儿给它改成active好像更合适一点，Active。

哎，我点它才出来对吧，我点他才出来，那下边那个我也可以给他诶。这两个。这我也可以改它改改成active active呢以后效果就是我点开出来是吧，但是松手就没了，对吧，点它出来啊好，那这一块我们就给它设置完了，设置完了以后呢，我们来继续往下来进行，往下来进行呢，这样我们先停一下啊，我们一段一段来啊，待会儿我们来做那个中间那个logo。