尚硅谷前端基础 (148)

好，那么刚刚呢，我们完成了这个左侧的一个导航，对吧，那其实这就差一个这个logo，诶logo也比较简单，Logo的话，我们刚才是他用的是一个雪碧图做一个logo，那么雪碧做logo我们之前也说一个步骤了，对吧？先确定你要使用那个图标，然后呢，量一下它的一个大小，大小的话这个东西里我们里边它放的是一个这个logo里边我们放的是一个这个超链接，对吧？超链接，所以我只需要把这个图标设置为这个超链接的一个背景图片就可以解决这个问题了，所以这里边我们来写一下，我们直接写啊，这来设置我们这个logo logo的话，我们这是一个点logo下边的一个这个A，诶点logo下边的一个AA的话，我们给它设置一个样式，首先你得把它转成块元素嘛，因为你需要给它，诶设置宽高嘛，哎，然后宽高是多少，我们量一下，量一下logo大小，这你量的时候你注意了，你要把这个logo放到你这个框的中间，不然你这个量的时候就可能，呃，你这个东西可能不够。

居中，这应该我看一下啊，240。200我大概看这样是居中的啊，244是一个64，二百四十四六十四，那我们的宽度就是一个244，然后高度是一个64，这个值是肯定有问题的啊，我们先设置上，然后呢，这里边我们来设置一下它的背景图片，直接来一个background image DA啊background一个image，我们这来一个URL，这里边是点鞋盖我们的一个IM，这应该是先干嘛呀，先返回到一层，我们这个MG下边的这个幺六，下边的一个这个也不是幺六嘛，118，幺八下边的这个图片一设置，这背景图片是不是设置上了，但是很明显，诶咱们先说第一个问题，我这字儿是不是还在这儿呢？美图手机对吧，那我们说了这个字我们是不是需不需要显示，不需要显示，我们需要隐藏起来，诶，那所以我用一种方式给它隐藏起来，之前也说过了，我们叫一个text，一个in，我们直接给它设置一个负值，负对对流太多，哎，直接给它隐藏起来就完事了，哎，我们说老师你为什么不直接给。

删了呀，之前提到过这个问题，因为这个东西我们字儿不需要，但是我们希望搜索引擎可以看到这个字儿，根据这个字来识别我们网页的一个主要内容，所以我们还得留下不能删啊，不能删，然后呢，我们来说一下我们这个logo的问题啊，Logo你会以很明很明显的发现我这logo要比我们实际那个logo要要大，对吧，比我们实际的一个logo要大，那这个是为什么，这是为什么？因为我们也说了这个。雪碧图，他给我们的是一个，你看他写的一个2X 2X在这就表示二倍，他给我们的是一个二倍图，他为什么要给我们一个二倍图，二倍图的目的就是为了确保什么呀，确保你的这个图到了手机里也可以显示比较清晰，因为我们说了你手机的像素比是一个1:2，也就是说我们在这的一个像素在手机里实际上要用两个像素去显示，那就意味着我们的一个像素被放大成了两个像素，那这样你想就好像一个图片被放大两倍一样，那这样是不是会导致这个图片的一个失真呀，哎，导致图片的一个失真，那图片一失真，我们这一块整个就看起来体验就不好了，所以大部分的设计都是这样，它直接给你做一个两倍的图，我我这东西我图片我自己先放大了，我先放大了以后呢，在我的移动端PC端显示，P端显示，你就给我缩小一点，显示清晰度不会丢，而且还会更清楚，对吧？诶到移动。

弄短以后呢，我本身就已经放大过了，你再放大OK，那就无所谓了，它就可以确保一个什么呀清晰度，所以我们经常会看到这种二倍图啊，三倍图，那这个时候你要用的时候，你就注意了，所谓的二倍图就是它里边这个东西的实际上大小比我们需要那个要大两倍啊，大两倍，所以我这量完了是不是244啊，所以你写的时候，这是一个两倍的大小，你写的时候应该把它整理都给他嘛，除以一个二，这不应该是24了，这应该什么呀？哎，这应该是一个122，那这也不应该是64了，这应该是一个三二啊，那这样就OK了，但是你会发现你整完了以后，这只显示一角了，这是为什么？诶，因为你把这个框缩小了，但是这个图片是不是没缩呀，这图片是不是还是二倍的，你看这图片是一个什么呀，是一个800乘以800的，所以你把这个缩小了，这个图片你也应该一起缩小，所以我们这儿直接来一个background，一个image。

哎，我们应该同时把这个图片干嘛，把background的一个size，把图片是不是也缩小二倍啊，哎，所以这应该是一个400像素乘以一个400像素，本来是800乘800嘛，所以二倍变成400乘400，那这样一看这个东西是不是就正合适了啊，就正合适了啊，所以注意它给我们提供的是一个二倍图，用的时候一定要把这值给它量清楚啊，给它量清楚好，那这一块我们整个这个logo就做完了，如果你非要再改的话，那你可能你可能在这加个加个title也可以对吧，加个title那手机也可以，然后的话我们就直接顺着就给它做完了得了，那接下来我们来看一下，那现在的话，我们这个移动端的一个效果就已经完成了，那接下来的效果是一个什么呢？是我们当我们这个，诶这个框变大的时候，它是不是会发生一个变化呀？哎，我们来看一下啊，把它关掉，现在呢，我们来改变一下它的大小，诶当这个框变大，诶你发现什么了？诶是不是诶首先看啊第1.logo是跑左边了，诶然后呢，中间那个三明治导航是不是没了。

哎，没了没了以后这菜单不隐藏了，直接在这里边是不是就显示出来了，哎，显出来了你再放大，诶也也也也就这样了，是吧，也没有什么特殊效果了，所以接下来我们就要做这么一个效果，哎，那我怎么要做呢？那首先我们先明确一下它这个断点在哪，什么时候断点，也就是说它是什么时候发生改变的，是不是当我这个屏幕放大的时候，诶放大到什么程度变的，我们来看一下这个断点，直接我们来试一下，现在是一个802已经变了，对吧？我们来看一下780 776 700，诶你看它的这点应该是一个768，你看768的时候是不是这个状态啊，当大于768了，是不是变成这个状态了，还变成这个状态，所以这个时候它的断点就是那个我们比较常见那个768，所以在这的话，我们应该设置一个什么，当我的屏幕比768大了，我这个样式是不是应该改变了，哎，样式应该改变了，所以这个时候我们在下边我们就直接要开始直接顺着写我们的媒体查询。

设置我们这个媒体查询，那这里边我们来看一下在我们lights里怎么去写这个媒体查询，我们这直接写一个at，一个media啊，我们这来什么呢？Only一个这个spring，这个是表示一个屏幕的，对吧？然后里边我们可以直接来顺着写，我们直接来一个艾特一个media media我们直接给它来什么呢？哎，来一个我们要搭干嘛呀，这写一个我们的这个叫什么呀？断点对点在哪呢？在768个像素，所以我们是不是当我大于768的时候，我要发生变化了，哎，所以这个时候我们的一个面Y是多少呢？768的时候，我这要发生变化了，然后在里边我们直接写一个大块，在下边我们是不是就可以直接写我们这个768的一个这个样式了，这哪写错了，这是一个，哎，768的时候，我们就要发生这个变化了，这这这是这应该写一个空格啊，那接下来呢。

我们来说一下这种写法跟我们之前写那种什么什么，然后and是一样的啊，是一样的，是等价的，这么写的好处是你下面再写那种查询的话，你就不用写利斯了，它自动就给你带上啊，自动给你带上效果是一样的，这整完了我们做一个试验，我们直接来一个body body的话我们给它来一个background color，来个井号BFV大于768的时候，我设置一个背景颜色，我们看这，诶现在是774，背颜色是不是有了，你再大也有，当我变小的时候，背景颜色是不是就没了，哎，那证明我们现在这个媒体查询是生效的，当然我们这儿不应该写的是包，应该是不是写的是我们这个具体样式，哎，我们来看一下我们都需要改什么，首先当我们屏幕变大的时候，我们这三个东西的顺序是不是要调整一下，哎，我的logo是跑左边这个东西跑中间，它的原来位置不变呀，哎，所以我们需要先调整一下他们三个的一个位置，他们三个位置怎么调啊，怎么调啊，哎，他们外部那个容器。

我们是不是已经开启了那个flex呀，哎，Flex已经开启了，那所以对于他们是不是都是弹性元素啊，那么弹性元素的位置我们是不是可以直接通过那个O去调啊，哎，把它的O变成一，它的O变成二，它的O变成三，是不是就调过来了，哎，调过来了，所以这时候我们来调整顺序，直接找这三个玩意叫啥来着，看一下啊，叫life的menu logo，还有user in，点一个这是我们left的nu，然后呢，往下走，这是一个点一个这个logo logo RO go，然后呢，再往下走，这是一个叫做user in for啊三个我们都得调，嗯，第一个的话，我们logo的顺序我们应该给排到第一个啊欧啊，迪亚欧，来一个这个一，然后呢，这个left的menu的顺序该是一个二，它排在中间对吧，第二一个，然后我们的这个u in for呢，还是第三个，第三个我们得写一下O一个这个三排到第三个这样一保存，我们来看你看位置是不就。

放过来了，诶你看啊，当我小的时候还是那个顺序，当我屏幕变大的时候，你看它们的位置是不是就发生变化了，哎，发生变化了，那这样是跑中间去，哎，那好，那关于我们的这个logo的话，还有这个user字的不用调了，接下来我们要处理就是中间这个菜单，菜单的话很明显屏幕变大了，菜单是不是也变了，那首先第一点这个三明治这个菜单，这个图标是不是就没了，哎，没了啊，所以在这儿我们来设置一下，这是来干嘛呢？哎，这来隐藏我们这个菜单的一个图标菜单我们应该叫做一个点，一个menu的一个icon，我们这直接display，我们直接来一个block，这一保存，呃，Display block怎么是隐藏呢？Display直接来一个难啊，一保存是不是就隐藏起来了，哎，隐藏起来了，把它隐藏的同时，我们应该是让我们中间这个菜单是不是给它显示出来，哎，显示出来在这儿的话，我们要显示什么呢？咱们在上面显示吧，在这儿啊，来显示我们这个菜单，菜单我们直接点一个这个nay nay显。

是吧，直接display display来一个这个block，诶这一保存这个nay是不是就出来了，但是很明显它显示是显示在那显示的位置是不对的，还是那个定位的嘛，还是那个定位的，所以这里边我们直接把那个定位给它关了啊，Position我们直接给它来一个什么呢？来一个这个static，把定s sta把定位一关，它的那些什么top left的偏移量是就没了，哎，就没了，然后我们整体的这个菜单，它的宽度是它是不是该横着的，现在还竖着呢，横着的话，那其实我只需要给我们这个复元素，也就是那个navy设置成这个flex是不是行了啊，那所以display block我就直接不用写了，直接变成display flex，那这样这个菜单自动就横过来了，横过来以后的话还有一系列的问题，我们要给它做一个这个处理，现在整个它的高度是比较高的，我们来看一下啊，它这怎么往下挤了，它应该是我们之前是不是设置过一个拍镜之类的东西，哎，Top这玩意儿都已经没用了啊，不用管它了，哎Li的话宽度是一个80%。

我们这是不是还写着这个呢？哎，那我们直接给它写一下Li的话，我们直接呢，我们就直接变成一个凹凸就完事，凹你就自动设置就完事了啊设置完事了，然后的话给它去了，然后这个margin呢，Margin就无所谓了，边框呢也给它去了，我们这有一个border bottom写写一个什么呀，那把它那个下边框也给它去掉，下边框去掉以后LY就这样了，然后A的话，我们还给它指一个高度，所以在这我们来再设置一下A的样式，A的样式的话，我们display block其实就无所谓了，但是主要就是它的一个高度，呃，高度的话，我们它的line是一个44，但是我们实际上现在横过来的高度是不是一个48呀，哎，48，那所以我可以给它重置成48就完事了，或者你给它你给它呃改一下也行啊，给它改成这个48个像素啊，高度给它重置一下，但是现在我们整个的元素是不是还往下走啊，往下走我来看一下我们还给它写什么了。

Div，这是一个top bar整个这个块div是一个left的menu，这是我这个ul一个，呃，这是那个按钮，Nay nay这有一个啊pading top对吧，Navy这有一个pading top，我们把这个PA镜给它变成什么呢？变成0PA镜一去掉，它是不是就回到上面去，哎回到上面去了，然后这里边我们一点点调，首先呢，这个搜索这个东西，哎在我们这个实际效果里个搜索是应该就没了，哎没了，所以我们把这个这本来是一个死SPA，把这个死绊直接给它隐藏起来啊，我们这个是一个Li里的SPA，直接display来一个什么呢？来个那啊给它藏起来，这就没了，那现在就剩我们中间这个菜单了，但是现在我们中间这个菜单现在等于是攒到一起了，为什么存到一起了？因为现在他们的宽度是被内容撑开的，这字儿是不是比较少啊，诶比较少，所以就导致它攒到一起了，那为什么被内容撑开了，就是因为现在我们这个外层，我们来看下三个块外层，一个是life的。

一个是的，还有一个是我们logo，还有一个是user，他们现在三个他们的增长系数是不是都没有啊，哎，都没有，都是一个零，都是零就意味着他们就是你里边有多少东西，你的宽度就是多少，而现在对于我们这个菜单来说，我们是不是希望它可以宽一点啊，那如果你希望它可以宽一点，那最简单的就是你让你这个菜单可以干嘛呢？可以自己增长，也就是说这个富裕的空间，你可以让这个菜单都给它干嘛呀，都给它占上，所以这里边我们就只需要做一件事，那不就是这个left的menu吗？你给left menu啊，设置我们这个flex，直接给它设置一个什么呀，设置一个凹，也就是说你让来可以自动的去增长，这时候一保存，那剩下的空间它占上了，以后这个位置是不是自然就自然就OK了，诶自然就OK了啊，那这样的话，我们这个分布是不是就比较均匀了，哎，就比较均匀了，然后这个链接可以点了，你看跟它这个效果就基本上就诶就一样了啊，基本上就一样了，然后呢。

哎，然后整个这个效果好像似乎就。似乎就可以了是吧，我们再看看用不用调一下他们的距离。现在我们这个超链接之间的距离的话，也还算比较合理，但是如果你觉得说什么呀，这两边的距离可能有点近是吧，有点近的话，你可以改一下，改我们的这个Li的一个边距，Li的一个对齐方式，我们可以改成什么呢？改成我们就哎改这吧，改这得设置那位置，因为它是复原，它是那个弹性容器嘛，我们这直接来一个这个扎的，我们来一什么呢？来一个叫做space around space。

Spce space around就是我让它的这个距离啊，在围绕的这个元素的一个两边，那这样的话，A和around啊应该是，哎，不对，那你这现在等于设置什么的都没有效果了，我们看一下啊。二。Li是在这个位置，呃，Li这是不是还有一个margin生效了，Li的margin呢，我们也给它去掉，它可能在这捣乱了啊，Marin我们直接都改成零，都改成零，诶这样一保存啊，这保存完了就OK了，保存完了以后呢，还不如刚才的是吧？诶保存完了以后我们来看一下，存完了以后，现在你会发现我们整个那个条，刚才它之所以在那个位置是因为因为什么呀？因为我们整个那个条，我设置一个marin marin和条的时候，它会自动把这个margin设置一个相相等的值，就达到了一个居中效果，但是当我把这个margin给它重置以后，这个效果是不是没了呀？其实我不如把margin写上了，对吧？但是我们现在设置个距离，我们可以直接用我们这个justify content justify content，我们直接来一个space的一个这个round围绕在周围，那这样的话，这个编剧它也可以。

哟。我们来看一下liul ul的宽度是这么宽，也就是navy啊，我写错地儿了，应该是写到我们的navy里，这一保存，这样这个距离是不是就出来了，哎，这样这距离出来，感觉这个距离左右也比较合适的啊，比较灵活一点，其实好像还是那margin也挺省事的，对吧？哎，那这样我们这个整个这块布局是不是就出来了，哎，那再看一下我们原版的网站，原版的网站的话，它这个是这样，诶当他再放大，我们来看看，当他再放大的时候呢，你看哎，它实际上还会有一个变化啊，它实际上还会有一个断点，当它再放大的时候，你看。

再放大的时候啊，你再放大的时候，你会发现它这个框不是无限放大了，也就是说当你再大的时候，两边这个边距是不是就会变大了，诶变大以后它还是在一个这个居中的一个效果，那像我们这个就是什么呀，你放大的时候，我这一块就是什么呢？就是无限放大了，对吧，它就是一个无限放大，总会在总会放大啊总线放大，那这里边的话，我们这个东西要怎么设置呢？怎么设置这个块，其实就不用再去做那个媒体查询了，那这块我们要怎么做，呃怎么做也。怎么做呢？我们想一下怎怎么做，实际上它这个的设计其实就是什么呀，它其实就是给我们这个条整了一个最大宽度，这个条它实际上是有一个宽度的，一旦这个宽度超过了这个，这个宽度就不再增长了，我们来看一下它的宽度多少，现在它的最大宽度是不是一个1200像素啊，所以其实如果你要设置的话，我们开始宽度没有设置，我们可以直接给他来一个max max才是一个1200像素，我就可以直接指定一个1200像素，那这样的效果就是它也会是个嘛呀，也会是在增大以后啊，我们先看看。

开始比较小对吧？哎，当你无限的去增大以后，它的宽度是不是就不变了，诶不变了，然后呢，我们还要给它补充一个，让它去居中marin，我们直接来一个零，然后来一个凹凸，这样一保存，它也会是一个居中效果，那这样是不是就。就OK了，哎小的时候就这样，然后大的时候就可以去放大了啊，就放大了，然后你可能说老师你这外边这框又没了，哎是没了，因为我外边是没有套别元素啊，哎，你可以干嘛呢？给我们这个整个top bar外边再套一个div，点一个我们叫做一个top bar的一个rapper wap啊rapper，然后呢，把这个掏把给它包起来，外边这个div呢，你不要给它设置宽度了，就直接就是什么呀，就是全屏的就完事了。

Top bar rapper我们给它设置一下啊，直接在这写点一个top bar，一个rapper，宽度不用写了，Background color写上是一个黑色就完事了，诶就写它一个就行，这一保存，然后一刷新，是不是现在这种效果了，哎，当你去缩小的时候。缩小缩小它会缩对吧，会缩，哎这儿小对吧，缩到这么一个状态，当你放大放大放大这放大了，但是当你放大到一定程度，它里边超过一百二了，他就不会再去动了啊，不再动了，是这么一个效果啊，那整个这一块的功能呢，我们就给它，就算是给它做完了是吧，整体来说它也并不难啊，并不难，其实你也会发现，其实我们这个响应式布局整体来说是偏简单的，实际上就是你先做一个版本，比如说我先做一个移动端的，哎，或者我做一个PC端的都行是吧，先做一个移动端的，做完移动端的我要考虑什么呀，当我屏幕放大的时候，我应该怎么怎么改，比如说这儿我可能放大完就不好看了，是吧，我要看一下，把这个断点设置上，然后再单独给这个像素来设置什么呢？设置样式就是你在你在第二次写的时候，你就不是全都设置了，你就是设置那些什么呀，那些需要变化的样式，哪需要改你就设置哪就OK了啊好，那我们美图手机的这个响应式。

导航条我们给他处理完了，那其他下边我们再遇到其他的一些东西，我们也是可以这么写，但是后边我们再去写，想的是我们后边还会学一些这个前端的框架，比如说像boostrap，有了它以后，那其实我们写起来这种想应式就会更简单，我们这种原声自己写的话，其实还是有点偏麻烦的啊，偏麻烦好，这个练习我们就说完了，看停一下。