尚硅谷前端基础 (107)

好，那么刚刚呢，我们完成了我们这个hier啊，头部的这个左侧的一个这个logo啊，整体来说并不难，但是涉及到一些，呃，主要涉及到他那一个动画的效果啊，稍微麻烦一点啊，那这个呢，做的时候细心一点啊，一定要呃参照着我这个视频也一定要认真做一下，然后再往下的话，我们做我们这个中间这块，呃中间这块呢，看起来是很简单的，它是一个什么呢？它是这么一个导航条，并且它这个宽度在这儿我已经给你量出来了，应该整个宽度是一个八百五对吧？850，但是其实很多同学你看到这儿的话，你就会觉得有点有点奇怪了，哎，奇怪在哪呢？诶这整个宽度不就才这么点儿吗？那为什么你量的时候是是从从这儿开始量的呢？哎，从这开始量呢，那如果说仅仅就我们这个页面来讲，这个确实非常简单，但是你要考虑到它的一个实际情况什么样的，那这时候我们就需要看一下网站原网站，我们原网站的话，我们直接来看。

看一下啊，现在这是一组链接，这组链接我们可以点，我随便点进去一个，随便点进一个以后，以后你注意啊，在我们这个页面以后，它是不是也有这样一个导航条啊，诶，但是你注意它这个导航条跟我们这个导航条，你看结构上基本上是一样的，唯独多出了一个全部商品分类，唯独多出了这么一个东西，对吧，唯独多这么一个东西，那这个东西注意了，其实在我们这个页面里它也有，它其实在这两个页面里，他们用的导航条是同一个啊，是同一个，但是为什么在首页里少了这个东西，因为他把这东西给你隐藏了，你看你点过来，我们来看一下啊，点过来。A，标签全部商品分类，这是不是也有啊，哎，只不过是给藏起来了，所以这个时候注意，虽然看上去它只有这么几个部分，但是由于它是一个完整导航条，实际上这一部分菜单它给给藏起来了啊给藏起来了，所以你做的时候一定要注意啊，你要把这个菜单也给它体现出来啊，也给体现出来，然后我们来看一下，那我们就照着这个做就可以了，对吧，照着这个做，那这里边的话，首先我们先来创建整个一个容器啊，来表示这个彩灯，那我们就这样，呃，在我们的页面里啊，在这我们来创建一个，哎，也是我们就要在头部里，它因为它也属于头部嘛，诶这儿呢，我们来在也是在这个head里啊，在这个head里，在这儿我们来创建一个我们这个中间这个导航条的一个这个容器，啊，导航条一个容器，那这个呢，我们叫做一个div，给它起个类名，我们叫做一个navy的一个rapper啊wap navy的一个rapper，然后在这里边。

既然是个导航条嘛，既然是个导航条，那我们就在这儿直接写一个这个ul啊，这儿来我们创建我们导航条，哎，创建我们这个导航条，导航条的话，这块我们需要整出一个，我们叫一个这个div，哎点就ul嘛U啊，然后给他一个class class我们叫一个navy，然后里边我们写的是Li Li里边我们放的是超链接啊，还是我觉得javascript的冒号分号，哎，只是我直接，其实我这直接写井号啊也可以啊，也写也可以，我们实量事吧，写一个A，然后的话我们一共有几个链接，我们来看一下，第一个是我们全部商品分类，诶全部商品分类，然后一共有几个呢？一共有一二三四五六七八九十，一共有十个，我直接复制一下一二三四五六七八九十。第二一个我们叫做小米手机，小。

推手机啊，第三一个我们叫做一个red米啊，Red米电视啊，红米电视。Red米啊，红米啊，空格红米，然后下边一个是我们这个电视啊电视再往下呢，是我们的一个笔记本，笔记本，呃，然后再往下呢，是一个叫家电，诶家电，呃，再往下我们叫一个路由器，路由器再往下叫智能硬件，智能硬件，然后这个是叫做诶智能硬件，智能硬件，然后是我们的叫做一个服务，还有社区啊服务，还有我们这个社区，一共是我们这么几个链接啊，链接结构上就这样就没问题了啊社区啊结构上就这样了，就没问题了，然后我们接下来我们要设置一下它的一个样式，样式的话我们就直接参考我们这个设计图了啊，我们来写我们的这个样式，那这里边其实你写完了以后，你首先你会发现。

个问题，我整个这个超链接是不是给它贴到这儿去了，哎给它贴到这去了，为什么呀？哎，因为我们的这个东西它还设置了一个浮动了，你设置完浮动以后呢，其他元素是不是就移过去了，哎移过去了，所以这里边我们还接着来，我们来设置什么呢？这是往下写，我这里来设置我们这个中间的这个导航，导航条，中间的导航条呢？呃，这样啊，我们之前在我们的。

编辑器里我们开过一个这个自动存储啊，自动存储在设置里边会有一个这个，呃，Auto save，我把它打开了，对吧，我把它打开了，那现在我把它关掉，诶我不让它有这个自动存储这功能了，因为我在这一整这个自动存储吧，我这只要一写完代码，它是不是随时刷新啊，哎，随时刷新这个一闪一闪的不太好，所以把它关上，关上以后呢，我就手动保存CTRLS手动保存一下啊给它关掉，然后中间那个导航条，我们叫做一个叫做一个hier hier下的一个navy，哎，Navy，呃，Navy的话，我们直接写一个hier下的一个navy wa APP呀，Navy的一个rapper，那这个东西很明显，我们应该也让它向左去浮动啊，保存一下，那这样是不是就横过来了，哎，横过来了，然后同样我们需要让它里边的这个Li是不是也横过来呀？哎，所以在这儿我们还要设置里边的这个Li，诶设置我们这个导航条中的链接，诶导航条中的这个Li，那所以我就直接点一个。

哎，Navy rapper navy rapper下载Li，我直接让他来一个float left也向左浮动，然后保存一下，我们来看效果，整个我的这一堆菜单是不是就都横过来了，哎，都横过来，都横过来以后L横过来了，但是这个时候我们的这个整个这个navy是个ul，它是不是有可能高度塌陷呀，哎，我们为了避免这个问题，我们给它加一个可粒fix啊，避免这个高度塌陷的问题，好，然后整个这一块就处理完了，那接下来我们就要设置一下它的整体样式，首先的话，我们的这个条整体的一个宽度我们也已经量了，是一个850对吧，850，所以这个时候我们直接给我们的这个navy这个rapper设置一个宽度，你给这个navy rapper设置也行，或者给他那个URL设置也行啊，我们直接来一个hier hier下的一个这个点一个navy，呃，Navy这是来设置什么呢？诶设置我们这个导航条，导航条啊，这里边我们直接给它一个宽度宽。

它给他一个850个像素啊，然后这一保存，诶宽度就整完了，整完了以后看不见，看不见可以给他整一个背景颜色，我们看出来它在哪啊BV啊，然后这里边保存一下，诶是不是就整个这块啊，诶整个这块，但是很明显它现在的高度是不够的，对吧？高度是不够的，它的高度应该是被这个撑开的，所以这个时候它的高度应该是跟它负元素的高度是一样的，所以你也可以写一个啊，给它一个氦的，比如说氦的是一个什么呢？诶，氦的是一个这个100像素啊这样哎，我们一保存它的高度整个就被撑开了，哎撑开了高度以后再来看超链接，这组文字应该是在负元素中垂直居中的，所以我们还需要来一个烂hat，也来一个100像素，那这样就可以让我们这个文字在它的这个负元素当中达到一个垂直居中的一个效果，然后再要处理的就是我们注意了，这际上我给你标注了一下，它实上我们整个ul跟我们的这个菜单之间。

这是有一个七个像素一个距离啊，哎，现在我这写完了以后，它整个是贴到一起的，它之间实际上是有一个距离的七个像素啊，那这里边呢，我就可以直接给我们这个navy rapper，给他来一个margin left margin left来什么呢？来个七个像素，那这样它就会整个把我们这个夸往右挤七个像素，那整个它现在位置基本上就在就定在这儿了，就没问题了啊，然后的话，我们来看这个图，这个图的话，实际上你看啊，这个全部商品分类离这个小米这东西是不是还更远呢？哎，更远没关系，待会儿我们再调他们的一个一个边距啊，一条边距就OK了啊，然后这里边我们来看这儿，下边呢，我们接着写这块呢，我们接着再来设置我们这个字的样式啊，字体样式这里边我们直接是navy rapper下边的一个Li，然后Li里边的一个A方size我们来量了，这是一个16像素啊，方size是一个16像素，其他的东西基本上就不需要动了，把这个字体大小你这一调它基本这个。

字一对了就OK了啊，字一对就OK了，然后整个这个字调完了，再来看我们的实际上每一个字跟每一个字之间，它是不是还有一个这个，还有一个这个距离啊，哎，每个字跟每个字之间有一个边距，这我量了应该是左右都是一个什么呀，20个像素啊，左12个像素，那这个时候你要设置的时候，你就要需要去，哎，需要去注意了，这个20个像素你到底要要给谁，因为它不像我们垂直边距，它有重叠的问题，你都写20距离就20了，它没有这个问题，左右方向外边距，水平方向外边距，它会把两个边距给它加到一起，诶左边十右边十加一块变成了什么呀，变成20，所以你在设置的时候一定要想明白，这个编剧你要给他设置给谁，那所以我们这儿就呃省点事了，我直接把这个编剧呢，设置给我们这个A的一个marin right啊marin right，我给他来一个20像素，也就是我只给他设置了一个右外边距，那这样的效果是只有右边有。

离对吧，那单侧的话就变成了一个20像素，那这样的话，他们之间的距离就都是一个非常正好的一个什么呀，正好的就是一个20像素啊，就这么一个效果，那这一块整完了以后，我们接着再来看这一块整完了以后，我们整个这个布局就出来了，但是这里边我们注意有一个问题，什么问题呢？就是我们实际的效果图的话，它跟我们的这个还会有点区别，也就是说这个字离我们的这个小米这它是不是还有一个距离啊，哎，还有一个距离，这个距离的话，我们可以给它设置出来，那这个距离是是是多少呢？我们大概估一下吧。嗯，到这儿的话应该是一个。65对吧，65，但是刚才我们这儿还设置了一个七个像素啊，七个像素那实际上就应该是一个58个像素，也就是说这个字儿离这个小米这个边上的话，还有58个像素的一个距离，那这里边的话，我们设置它也比较简单，我可以直接给谁呢？直接给我的这个谁呀，我们的这个u lul给他直接来一个margin left，哎，Margin left来一个这个58个像素啊58个像素，那这样他就会正好干嘛呀，哎，往左移动58啊，往左移动58，但是这个时候注意有一个问题啊，有一个问题，那这里边实际上我们设置完这个这个58个像素以后，我们实际上这整体它是不是就往这边挪了，往这边挪，待会儿我这再整元素的话，实际上就会占据这个位置啊，占据这个位置，所以我这设置一个margin left，设置一个58，实际上啊不太合适，因为这样的话会导致我们这个框整体往上挪。

而我们希望的效果是，是不是只挪这个东西啊，哎，只挪他把这些东西往右挪，而不是让他们整体往右移动58像素，所以这个时候我更合适的话，我应该用的是一个pading left啊，我通过pading把它往这边挤，那这样它就什么呀，位置就不会变了，只是我的这个字儿去去移动，懂这意思吧，哎，是这么一个效果，但是也有一个问题，你设置完拍进去以后，它整体的宽度是不是被被加宽了，哎，整体的宽度被加宽了，所以这个时候你还要把它的整体宽度给它，哎给它修改一下，其实这个宽度啊，你要不想写啊，也完全可以不写，你就直接让他被内容撑开在这儿是不是也没问题，诶，没问题，所以咱们省点事，这宽度我就不写了啊，这五百八也无所谓，因为它这块的位置它是向右浮动的嘛，对吧，它的位置只要不用没到这个位置就都没有问题，所以这个宽度我们也就不设置了啊不设置了，当然你说老师我还想设置宽度，你设置宽度的话也。

也行，但是你设置宽度，你就不能再设置八百五了，因为你设置八百五的话，它整个就太宽了啊，就太宽了，你要设置宽度，你得从八百五里边把这58减去，那应该是一个七百零七百七七百七百九十二，哎，应该是这样一个宽度才是一个合适的，那其实我就更倾向于就直接干嘛呢，就省略，省略不写了啊，省略不写了啊，让他直接被内容撑开就完事了啊省略不写了好，那这里边呢，我给你把这注释给你留下啊，你要用哪个都行啊，两种都行，好，那这一块我们就整个这个东西就给它处理完了，非常简单啊，非常简单，然后我们再看的一个问题就是，诶，这全部商品分类呀，也就是我的第一个Li默认情况下，它是不是是是隐藏的呀，哎，是不显示的啊，不显示的，所以这个时候我们要把它去隐藏起来，隐藏起来的话，我们其实呃，如果是我们小米原版的话，它肯定是通过GS去实现的，那我们现在不会GS，所以我们只能用CSS。

那这样的话，我们的方式就是给这个A的话，我给它加一个，加一个链接，诶加一个类啊，加一个类我们就叫做一个o boot啊都o boot全部商品嘛，那这个东西默认情况下是隐藏的，那既然是隐藏的话，我们就在这里边设置一个在哪呢？在这吧，我们来隐藏我们这个全部商品，隐藏全部商品我们叫做一个点一个哦一个故ose啊故ose哦，故ose，然后我把它隐藏，隐藏两种方式，我们可以用display now，这用display now行不行，你想一下，我直接写一个display，我来隐藏这个玩意儿行不行，哎，注意这用now是不行的，因为你用比特列档隐藏的话，我们说了比特列档一隐藏，它就真的就没了，也就是说它不会占据页面的一个位置，那这样的话就会导致小米手机这一系列东西是往左移啊，哎，往左移，所以我们希望的是o goodose是隐藏的，但是它还占据我们页面的一个位置，所以这里边我们用的应该是一个viibility，用的是。

一个hidden，那这样的效果就是它也会隐藏，但是在页面里就不会占据占据位置了，那这里我只需要把这个背景颜色给它去掉，其实你会发现基本上就跟我们这个原版的效果是是一模一样的啊，但是我们看这个版本啊，看这个版本是不是就一模一样的，哎，一模一样啊，那这样我们给它设置完了以后，接下来我们再看我们需要处理的地方，那接下来再看的话就是小米这个东西，我们移上去以后，它是不是会改变一个颜色呀，哎，改变颜色，所以这个时候我们还要给我们这个A设置一个这个。A在哪儿呢？A在这儿给A设置一个后位，鼠标移动上去以后，我们要给它修改一个颜色，后位的话应该是那个那个井号是这个FF67，诶6700这么一个效果，这一保存，哎这样一刷新，哎看是不是就有这个效果了，哎就有这个效果了，然后还有一个小问题要解决的是，我们现在这个A，它只是这个字，上下都不属于A，上下是属于Li啊，所以你一到这儿的时候，它没有反应对吧？但是这样效果也还可以，但是我们考虑一下原设计图是怎么做的，原设计图你看哎，原设计图我们移到这儿它会变，对吧？它会变，但是我们移到上边干嘛，它也会变，也就说我这个A它上下是有一个范围都会去改变颜色，对吧？你看诶，但是它还有一个讨厌的地方，它干嘛呢？它不是到底了，也说在这一块你是选中这个A的，但是在这块是可以选中的啊，它这个设计啊，也不知道怎么想的是吧，也不知道怎么想的，我们就不追它这个设计了，但是你也可以追一下是吧，我们就说一下，那现在我希望的是。

点这它也亮，我点这它也亮，也就说整个上下这个范围都是A的，那都是A怎么办？都是A的，那这边很显然你就需要把A直接转换成一个快元素，转换成快元素的好处就是你看这整个。哎，那我们这块转换成了块元素，呃，但是我们这没保存吧，CTRLS保存一下，那这样上下范围是不是就都是这个A的范围了，哎，都是A的范围了，你说老师我想做的跟原版的一样，什么意思呢？上边这点不着，下边这一下边能点上边点不着有一部分对吧？那你可以给他加一个什么呀，加一个marin啊把它位置往下调一下，但是我这就我这就不演示了啊，我就不演示了，它这个做的挺挺奇葩的是吧？挺奇葩的，那我就用我们这个，哎，我觉得更好的一个效果，我们来完成这个功能，好，那整个这一块我们就给它处理完了，非常简单的一个导航条啊，非常简单一个导航条，那这块处理完了以后，我们要注意再看那个图啊，图就看不出来了，我们得看那个原网页，原网页的话，其实我们下边它会出现这么一个下拉层，我鼠标移动以后会出现一个下拉层，那我们要考虑一下这个下拉层你要怎么去处理啊，要怎么去做这个下拉层，那待会儿先把这个导航条做一下，然后我们待会。

一块儿来做一下这个萨拉，我们停一下。