尚硅谷前端基础 (106)

好，我们继续，那我们上边这栏的这个导航条啊，我们顶部这个导航条已经就算是给它完成了啊，当然我们做的时候呢，这个下拉层，我们只做了这个下载APP的这个下拉层，我这个购物车这个我并没有做，呃，那这个呢，给你们留一个练习啊，自己来尝试着做一下啊，它也并不是很难啊，并不是很难，然后呢，接下来我们要做的是我们下边这部分，也就是哎中间这一块位置，呃，这一块位置的话，其实我们来看一下它的整体结构分成了三块，诶这是一个这个logo啊logo，然后呢，哎，这中间这又是一个导航条，对吧，然后右侧是我们的一个这个，诶等于是一个搜索框，所以它实际上整个分成了三个部分啊，整个分成三个部分，那这三个部分我们怎么来处理一下呢？呃，我们这样把我把这个三个部分我们分成三块来做，我们先做左边，哎，再做中间，再做右边，那其实中间这块。

稍微的会复杂一点，诶为什么会复杂，你可能觉得老师中间不就是一个导航条吗？为什么它会复杂呢？诶这个问题待会我们再去聊这事儿，那现在呢，我们先来做一下这个logo，这个logo的话很简单，我们先来设计一下结构，结构的话回到我们页面里，我们把上边这个顶部给它，哎，给它折起来啊，给它折起来，然后在下边我们这儿来创建一个什么呢？哎，我们也要创建一个什么呢？哎，创建一个这个外部容器啊，我们这个头部吧，哎，头部的一个外部容器啊，我们叫一什么呢？Div点一个，我们叫做一个head hier的一个rapper wap hi rapper，同样这个rapper我们也让它是一个全屏的啊，然后在里边我们再创建一个div，点一个header，哎，Header，然后同样给它加一个W，让它在里边干嘛呀，哎，宽度固定，然后居中，但是有同学看到这儿可能就会说了，诶老师你上边外边加一个容器，是因为它这有一个全屏的这么一个框，而中间。

这块它是不是没有全屏的框啊，那这里边你为什么还要加一个这个全屏的一个框呢？那其实你通过设计图的话，有的时候看起来不是很明显，如果你看官网的原版的话，你看当我鼠标移到这儿的时候，它下边是不是会有一个这个下边会有一个这个弹出的一个层啊，那这一层弹出来以后，你很明显它是一个什么，它是一个全屏的，它是一个全屏的，所以这个时候如果你没有全屏的容器的话，你设计它的话就会稍微有点麻烦，那你说老师我就不想用全屏的也行，那就是我们用其他方式也可以实现，但是最好的话，最简单的方式，我们给他设置一个全屏的啊，我们最省事的方式啊，好，那这一块设置完了，设置完了以后，在里边我们先设计我们这个logo，哎，我们先来，哎，创建一个我们这个logo。诶logo，那logo的话，一般像我们这种商业网站，对一个logo来讲，可能就是我们这个网站里面比较重要的内容了，所以一般的话，Logo我们会放到一个这个，诶这个这个H1当中，放到一个H1当中，表示它比较重要，表示比较重要，然后呢，这里边的话，我们来看这logo一般的话都是可以点的，也就是说我这一点这个logo呢，它就会直接跳转到我的这个我的这个主页对吧，主页，所以这个时候给他一个超链接，那logo的话，你就直接写个斜杠行了，斜杠就表示主页的意思是吧，就跳转到我们这个主页，然后在里边我们就可以直接去写了，这个logo的话，实际上它是一个，呃，它是一个这个图片啊，它是一个图片，我们就直接设置就完了，那这里边我们来设置一下，直接找到敏点CSS，哎，我们在这儿来设置什么呢？哎，设置我们这个中间的一个hier，首先呢，这个hier的话，它整体上它有一个高度啊，高度很显然这是一个这个。

100个像素对吧，100个像素，所以这个时候呢，我们直接给这个点一个hide，点一个hide，我们给他一个hi hi应该是已经测了，对吧，He是一个100像素，我们直接写上。

一百一百像素写完了以后的话，高度就已经确定了啊，高度已经确定了，然后其他倒没什么了，其他的就是我们下边这个H1，也就是我们这个logo，这个H应该是靠左侧的啊，靠左侧，所以这个时候我们让这个logo点一个这个logo海下的logo，哎，我应该让它干嘛呢？哎，我让他向左浮动对吧，向左浮动浮过去当是现在的话，你看我们的网页，你是什么也看不见呢，因为在这里边我们是不是还没写东西呢，哎，还没写东西呢，现在我们看是什么也看不见的，我们这样我把它们叠起来。诶，叠起来让我们来看一下，然后的话我们需要设置一下我们这个超链接的一个大小，因为这里边它需要设置一个图片，而这个logo大小是固定的，对吧？所以这个时候我们来设置一下它的大小，那这里边我们就是一个点header下边的点我们这个logo下边的一个超链接，呃超链接的话，我们这里边呃，直接给它设置一个外，我们已经量好了，是一个55像素，也是一个55的一个像素，然后的话整个设置好了，我们给它设置一个背景颜色，我们先让它出来background。

大家可管color，我给它来一个红颜色的啊，设置一个背景颜色，它显示了，那现在的话很明显，因为A是一个行内元素，你设置玩意儿都没用，所以我们还是给它设置一个迪斯play，我们给它来一个这个block，迪斯来一个block，那这样的话我们的ah诶还是没出来，我们来看一下啊，是不是结构上写错了，呃，Ah he class，这是一个logo logo。Log我们刷新一下页面吧，刚才应该是没刷新对吧，没刷新样式是没问题的，那这个时候我的这个logo是不是已经出来了，哎，出来了，出来的话为了我们显示清楚一点啊，我再给这个hier也设置一个背景颜色，我给它设置一个井号B，因为我不设置背景颜色的话，我导致我看不见我这个hier的一个位置，所以设置完了这个位置就比较清楚了，那这个logo的话，我们的水平方向的位置基本上就这样了，没啥问题，然后我们来看它的垂直方向，垂直方向它是不是等于，诶，它基本上是在我们这个框的一个这个中间的一个位置，对吧，应该是一个垂直居中的一个状态，垂直居中的话，我们也可以用我们这个定位下它垂直居中，但是这我们省事，省事在哪呢？它整个高度是55，这个负元素高度是一个一百一百减55，是不是正好差45啊，那45我们给它除以二，那就是一个22.5对吧？那所以我给上面设置22.5，下边设置22.5是不是正好就居中了，哎，正好就居中了啊，所以这个时候呢。

我们取个整，我们就直接给它加一个什么呢，给我们这玩意儿加一个这个。加上一个这个margin pop margin top呢，我直接给他来一个22个像素，那这个时候往它的位置往下一拉，他是不是就居中了，哎，但是这个时候问题来了，Hier是不是等于又出现了我们这个外边距一个折叠的现象了，哎，所以不要忘了给hier我们加上一个可粒啊fix啊，让它避免我们这个外边距折叠的现象，诶但是给hier加完了以后，它这并没有并没有生效啊，我们来看一下哪有写错了hier hier哦，这肯定是不生效的，因为我们的这个in top我是不是加给ER了，哎，那我这个in应该是加给我们的这个logo，我不是让hi带往下走，而是让我们这个logo往下走，对吧？加在logo这那同样这如果你没写可fix的话，它实际上诶也不会产生这个问题，因为我们这个时候这个logo已经浮动了，对吧，浮动了，但是最好还是给它写什么，也没有什么，没有什么影响啊，那这一块给它写上以后的话，我们这里边就整个这个logo的位置。

基本上就已经确定了，然后接下来的话就是我们要设置我们这个logo的图片，Logo的图片呢，我已经从这个官网下载下来了，就是这个min，诶logo.png我直接把它拿过来。

放到这个img下边，那所以其实我们要做的事也比较简单，就是把这个logo设置成我们这个超链接的一个背景图片，我们直接来一个background的一个image，是我们这个URL下边，我们直接找到我们img下边的一个这个min，诶min logo点一个PNG，那这样我们就把这个logo设置了，为了我们这这个的一个背景图片，我们这里边我们来看效果啊这一刷新。这个背景图片现在没有显示出来，应该是我这个图片的名字啊M啊米。Logo点一个PG，我直接复制一下吧，应该是名字写的。哦，不对，我是路径写错了啊，路径写错了，因为我们现在这个文件是不是在这个我这路径是不是写到这个CSS这个文件里的呀？那你要注意了，我们在设置这个图片的路径的时候，注意我们这个路径是相对于什么呢？相对于我们当前文件来计算的，也就是说你这个路径写到哪，你当前文件就是谁，我现在径是不是写到了index.css里啊，所以这个路径应该是参考于我的这个CSS文件呢？而我们这个图片是不是在这个img下呀，我们现在CSS文件在CSN目录下，所以这个时候我们先得往上返回一层，是不是先退回到我们根目录啊，哎，然后再去找这个img，然后是不是就就出来了，哎，就出来了，但是你们要注意它这个图片有个小特点，它这个图片实际上是一个比较小的图片，大小可能只有多少呢？诶我们来看一下。

大小只有49乘以49，而刚才我们这个容器的大小是一个什么呢？是一个这个是一个55乘以55的，所以图片并不是一个55乘以55这么大的，所以这里面注意我们还需需要注意一点啊，这个图片它其实它只有一个mi这么一个这么一个东西，它没有别的东西，所以的话它的特点就是中间这个字是固定的，至于logo本身你要设置多大，那就看你这框多大，你框是多大，它就可以写多大，但是你要是需要达到一个，诶，你是不是得让这个字在你这个框里是一个居中的效果呀，哎，居中效果，所以在这我们需要再写一个background，一个position，我们来一个这个center，我们要让它在这个元素里边居中，那这样这个logo的效果是不是就出来了，哎，当然你还需要一个颜色，跟我们的这里边的颜色是是一样的，它的一个颜色是一个FF67，诶6776700，所以这块我们应该也是一个井号直接写了啊井号一个。

F6700，我们这个logo的颜色，那这样的话是不是就跟官网上那个一样了，哎一样了，那同时的话，其实呃，基本上大体上就是这样了，就是这样的话，然后我们就细节的话，其实在我们这个这个可以可以下边我们再写了，对吧，基本上细节就是这样，Logo的效果就已经出来了，我可以把我这个嗨的这个背景颜色给它去掉，因为我们只是为了显示的，为什么背景颜色去掉以后，那基本上就跟官网是是一样的，对吧，跟官网一样的，然后的话，我们还有一点需要注意，官网的话，实际上它的效果上比我们这个更复杂一些，哪复杂呢？官网上实际上它会有一个，你看啊，当我鼠标一进去以，它会有一个这个变化的一个效果，也就是说它实际上我当我一进去以后，它是从我们这个小米这个图片换到什么呢？换到了一个这个小房子这个图片，对吧，换到小房子这片，它会有一个这么一个切换的过程，但是很显很显然我们现在。

他刚才写这个事儿是没有的，哎，并没有考虑到的事儿，因为这个东西从这个图上并不能体现出来，所以这个时候我们就要考虑到一点了，那我怎么能实现这么一个效果，让它有一个这个横向切换的这么一个效果呢？哎，它可以横向的去换这个图片，那怎么能实现呢？哎，那这个东西其实呢，诶也并不难啊，也并不难，那这里边注意了，我们先想一下，之所以我的这个图片它可以横向的去水平的去切换，那其实你看啊，我这小房子是从哪来的，小房子是不是等于是从我的这个左边是划过来的，哎，从左边划过来，所以其实你可以这么想，实际上我在这儿有两个链接，一个是这个A，还有一个是我们小房子这个A，他们两个A是并排显示的啊，并排显示的，当我鼠标移动到这个H1里的时候，它实际上干嘛了，它实际上很简单，就是切换了一下我们这个超链接的一个偏移量，把它从什么呢？把它往左移了一。

这logo这个距离，然后这个图片是不是显示出来了，哎，就显示出来了，所以这个时候你要达到这么一个效果，那么OK也并不麻烦，你需要在这个logo里边啊，你再加一个超链接啊，加两个超链接啊，加两个超链接，这两个超链接加上去以后呢，在这里边啊，我们区分一下，第一个超链接呢，我们叫一个home啊主页，第二个超链接呢，我们叫做一个这个class，我们叫做一个logo。

哎，Class，哎，我们叫做一个这个叫做一个米吧，小米因为前面已经有logo了是吧，区分一下我们这个叫米对吧，那这个时候我们有两个超链接，两个超链接以后我们来看这块我们网页里边的设置效果，那其实你会发现就会出现这么一个效果。就会出现这么一个效果啊，那现在我这里边。我看一下啊，男孩应该少写了个引号之类的东西，那这一块它出来一个啊，这样就OK了，又是刷新的问题啊，就刷新问题好，那现在我们这是不是就出现了两个logo，哎，两个logo，但是现在的问题是我的这两个logo他们是一个什么呀，他们是一个垂直排列的，因为我在这里边我设置了一个display block，所以导致他们两个现在垂直排列，那我们想一下，那首先这两个玩意儿我们肯定是需要水平排列的，那么如果要是水平排列，你这就不需要写什么呀，Block了，但是你不写block是不是这个宽度高度也就失效了，哎，所以这里边我们直接用一种方式，因为这两个东西待会儿我们肯定也是要对他们进行一个什么呀，进行一个这个进行一个定位的，对吧，进行一个定位的，呃，或者的话，你不定位，你反正你肯定要改变它的位置，你不用绝定位，你也用相定位，所以这里边我们不妨就直接干嘛呢，直接给这两个玩意儿，给他来一个，来一个absolute直接给他俩。

开启一个绝对定位，那这样宽度高度也可以设置，然后的话，我们这两个东西是不是也就可以去换一种排列方式啊，换一种排列方式好，那这个定位完了啊，定位完了为了确保我们这个logo大小不变，所以我把这个宽高呢，我给它设置给我们这个logo，那这样的话，我们等于它外边这个容器就有一个固定的一个宽高了啊固定的宽高了，好那这一块设置完了，由于我给它俩开启了绝对定位，所以为了找好我们这个参照物，我给这个logo也开启相对定位，那这样我就知道我这里边的A是不是参考与我们这个logo进行定位了啊，参考于logo进行定位了，那接下来我们要再看的问题就是什么呢？就是我们现在整个的这个这个这个这个logo，这个logo的话，我们现在的话，它是一个我们只看到一个米，为什么只看到一个米呢？因为现在这两个超链接，它们属于一种重叠的状态啊，重叠。

状态，所以导致我们只能看见一个，那我们实际上有一个那个小房子，那个东西我是不是应该往往它的左边放，哎，往左边放，所以这个时候我们再单独给谁设置呢？单独给那个小房子，我们也就是叫做一个什么呢？叫做一个home，点一个home，点一个home，我们要单独给它设置一个样式，其实别的也不需要设置，只需要设置一下它的一个left的值，Life的值，它本来是一个零，是贴到那的，对吧，我们要往把它往哪移呢？往这一块移，移多少呢？移移个logo的一个宽度，所以我们这应该是一个负的55个像素，那这样我们移完了以后，这两个logo是不是正好就摆在一起了，哎，摆在一起以后，在这里边我们还需要做一件事，我们把这个图要换一下，这个图已经拿好了，我直接给它放过来。

Ffa，诶这个MG下边啊，MG下边这个图我们叫一个什么呢？叫一个，诶直接设置CTRLCCTRL粘过来这个图叫做一个米home.png所以这块我们直接改成一个这个home.png那现在我们这个两个图的位置是不是就已经给它定好了，哎两个图的位置就已经定好了，这个是我们这后这是我们这个小米，那么默认情况下，我们在这儿实际上是不是应该只显示一个呀？哎，只显示一个，只显示一个的话，我们应该在这来一个overflow，也就是说我要把这个溢出的内容给它裁掉，裁掉以后的效果就是这个home现在我们能不能看见，哎后现在我们是看不见的，我们能看见的是不是只能是看到的是这部分，因为现在home并没有并没有显示啊，并没显示，那这样的话，等于我们这个home实际上是在这儿干嘛呢，在这就已经藏起来了啊，在这就已经藏起来了，那现在我们要实现的一个效果就是当我鼠标移入的时候啊，当我鼠标往里移的时候。

我们的这个home是不是要给它显示出来，哎，要让这个home显示出来，显示出来其实就是把这两个元素干嘛呢，整体的去往整体的去移动这两个元素啊，整体移动两两个元素，那这个时候的话，其实。嗯，我们的一个结构上就会出现一个小的问题，因为现在这两个元素，我们的外围的元素是一个H1，而这个H1是不能动的，对吧，不能动的，所以这个要移的话，我们想一下，嗯，那这个我们移动的时候应该是先把这个东西是不是给它移走啊，哎，把这个东西给它移走，所以这个时候我们就直接给我们这个logo啊，Logo给它加上一个什么呢？加上一个后。

Logo ho以后的这个这个第一个超链接，也就是我们这个A啊，我们这个AA有一个名，我们叫做一个这个米，对吧，我们要用它的位置，他应该干嘛呢？他应该从，诶这是我们官网原版的啊，他应该从这个位置是不是移动到这个位置，是不是就看不见它了，诶看不见它了，所以这个时候我们应该给它加一个什么呢？加一个叫做一个left left的值，我直接给它设置成一个55个像素，那这样的效果就是当我们啊，当然我这没腰写这个后应该是冒号一个后，当我鼠标移动上去以后，它就应该干嘛了，哎，他应该就移走了，应该移走了是这么一个效果，但是现在你看不出移动，因为我没有加这个什么呀，过渡效果，所以我需要在A这再加一个这个transaction transaction，我们设置的是一个life的属性，比如说我们还是0.3秒啊，0.3秒在这儿来看效果，这时候移动。

这个时候移动的话，我们来看一下啊，Life的一个transaction 0.3秒，Life的一个55像素啊，它没有什么变化，注意了，我们这来说一下现在为什么我移动上去以后，它没有变化，没有变化的原因，注意了，我们这个过度效果进行切换的时候，它必须是一个什么呢？从某个值到某个值之间的一个切换，比如说我从零到55，那我就可以过渡啊，或者我从十到55，我也可以过渡，但是有一些情况下，我们这个值比较特殊，比如说我的值是凹凸，凹凸表什么意思，凹凸表示自动，那我要从凹凸到55，那这个东西我们的这个什么呀？我们的这个浏览器它没法计算，因为它不知道凹的具体值是多少，所以就没有办法去实现这个效果，所以你要想实现这个动画切换我们的这个life的值，你必须写一个有效值，而你现在看这我是不是没有写life的值，你没写life的值，它等于没有一个起始位置，所以这里边你还要显示的写。

成一个life的零，这你写不写都一样，因为本身就是零对吧，本身就是零，那这个时候我们再移过去，它是不是就会有一个诶收起来的效果了，哎，收起来的效果，那这时候我们的这一块就完事了，然后我们是不是还要让我们的这个home，这个logo它是不是要出来呀？哎，它要出来的话，同样也是一个道理，我们直接给它加上一个这个后位冒号，一个后位，那它出来的话，其实我们就是把它的left值改成什么呢？改成零，那这个时候它就可以出来了，哎，是不是就达到了我们这样一个效果呀？哎，达到我们的这么一个效果，其实整体来说也也并不难，其实就是移动的时候修改了一下他们的一个life的值，你要加过度的话，就把它这个什么呀，把这个transaction给它加上就完事了啊好，这个logo整体来说我们就完成了，也是稍微的有一点难度，主要结构的设计上你需要给它考虑一下，然后的话再细化一点的话，其实logo的上一般我们还要加一个什么呢？加一个title，加一个title，比如说title我们就是一个什么呢？就是一个小米。

啊，小米那这样的效果就是当我去移入到这里边以后，它会出现一个小米的这一个字字样，对吧，有一个提示文字，然后的话你还可以干嘛呢？一般情况下我们也会在我们这H1里边写点字啊叭如说我就写一个啊，这是一个小米官网写一个字，写这个字的好处就是什么呢？当你的搜索引擎爬到你的网站，爬到这个H1的时候，它就能识别出了你这个网站是小米官网，能识别出来了，但是其实你会发现写完这个字以后，我们这就很恶心，这是不是也出现这个字了，这个字注意了，我们写这个字的目的是为了让搜索引擎看的，而不是让网页中示了，所以这个字我们还要写，但是我不能写出来，那怎么办呢？我们可以在这个logo里边，我们加一个这个T一个T一个，我们之前说了，它是一个首行缩进，对吧，我如果只写了一个十像素，那它会往里边缩十个像素对吧？那我可以写什么呢？我可以写负十像素，那它是往反方。

像缩对吧，那这里边我可以直接给他来一个负9999像素，那这个时候这个字其实基本上已经出现在我们这个浏览器的外边了，看不见了，也就是说它不会在我们界面中去显示出来，但是搜索引擎依然能看到，所以我们用它去隐藏什么呢？隐藏我们这个文字，这里边我们来隐藏什么呢？哎，隐藏我们这个logo中的文字，呃，那这个是我们非常常用的一个隐藏文字的一个手段啊，Text in设置一个比较大的赋值，这样文字就看不见了，好，那我们整体上这个logo就完成了啊，我们写个注释，这是设置我们这个logo的一个什么呢？诶logo的这个H1的样式啊，H1的样式，然后这是下边，这是干嘛呢？这是统一设置我们这个logo的这个超链接啊，超链接统一设置，然后往下的话，这个是设置什么呢？诶设置我们这个home这个图标啊，Home这个图标。

然后呢，这个是我们这个设置，哎，设置我们这个诶叫什么呢？鼠标诶一入以后，我们这个两个图标的一个位置啊，两个图标一个位置都比较简单，然后里边具体的细节我就不再去详细说了，当然结构上其实结构上还可以更完美一些，我这个结构结构上比较简单，结构不麻不麻烦，但是我们写样式就会麻烦一些，结构上其实呃，这个东西还会有优化的范围，但是现在我们作为第一次写的话，你能写成这样就已经就已经OK了啊，就OK了，不用那现在没有什么太高要求，还是先把效果实现好，然后我们再想如何去优化好，我们先来停一下。