尚硅谷前端基础 (132)

好，那么我们来。利用我们这个弹性盒呢，做一个简单的导航条，还记得我们做第一个练习，应该是第一个练习吧，我们记得我们第一个练习我们看一下啊。哎，第一个练习，哎不是第一个。第四个练习对吧，我们做过这么一个W3死库这一导航条，哎，当然我们还说了，它这个导航条实际上设计的挺缺德啊，因为它这个呢，它整个宽度啊，平均分起来挺费劲的，挺费劲的，所以后边我们设置的我记得有一个距离好像设计的比较比较大一些，好像这个这个字的这个拍点好像设计比较大一些，或者它比较宽一些，所以它设计的时候挺麻烦的，但是现在呢，我们有了弹性盒了，那我想做这样一个导航条要怎么做呢？哎，怎么做来我们快速的做一下啊，在这里边呢，我们再来创在练习里边啊，创建一个文件，我们来一个15啊在线我们这个航条在做，我们这个导航条怎么做呢？还是先写一个这个页面结构在这里边，我们先来引入一下我们的重置样表，另一个我们的一个这个CSS下的一个。

比点CSS引用完了以后，我们来写这结构啊，现在写这玩意儿应该已经很很顺了是吧，我们快点写一下，呃，我们直接呃写一个u Lu点一个我们叫做一个navy navy里边我们放的是一个Li Li里边放的一个超链接，对吧，这来一个井号超链接里边我们要写字，一共是第一个是我们HTM门写杠CSS，然后再往下我们是这几个啊，我们2345。677个对吧，是是234567，这下边一个我们叫做brother的一个side啊brother side b哎，B drerid啊，我们的浏览器端对吧，浏览器端的东西，然后下边一个ER server的一个site啊，服务器端的东西，然后再往下是我们一个程序啊pro pro GR m n啊programming，然后再往下是一个XML，再往下是一个web building。

Web一个building啊啊web building，然后再往下呢，是我们的一个这个reference啊reference re啊reference这一保存我们给它运行一下。Open一下，哎，那现在我们是不是得到了这么一个东西啊，哎，得到这么一个东西啊，那这里边我们就可以做了啊，这这就很简单了，对吧，那现在呢，我们先给它设置写样式啊目样式表，Style标签，Style标签，当然这个我们也可以用lights写啊，但是这我们先不用lesss了，因为lights在这儿的话用着比较麻烦了，我们会在一些需要用的地方，哎，一定要用到less对吧？在这里边我们先给它设置一下它的宽度，我们记得它，我记得它是有一个固定宽度的，固定宽度的话应该是一个这个固定宽度ul的宽度是一个1210，高度是48，对吧，我们这直接设置一下，点一个这个navy navy的外是一个1210，然后高度是一个48个像素啊，48个像素，然后呢，它会有一个margin，我们它居中啊，来一个50像素，然后这来一个凹凸啊，位置靠下一点，然后呢，我们需要给它设置一个背景颜色，背景颜色呢。

再吸一下啊。用几色器吸一下是这个颜色，我们直接复制一下啊，这直接给它设置一个background，一个color井号一设置，然后我们这个背景颜色是不是就设置上了，哎，背景颜色设置上了，然后的话，我们接下来我们就先不管那玩意儿了，我们先来干嘛呢？把这字儿给它设置好了啊，字给它设置好了，这个字的话，它是有一个这个哦，它这字儿啊，它是它是截的图对吧，截的图我们直接吸个颜色吧，它这个比较缺德，我们吸个字的颜色。

吸一下，复制一下，在这里边呢，我们设置一下的一个字体效果，点一个这个navy，那我们知道这个A我们应该它是占全，哎，Navy下边一个超链接，这个A的话，我们应该让它变成一个块元素，应该它占全部对吧，占全部大小，然后这里边的话，它的高度的话，这里边我们这个文字是要居中的啊，居中的话我们给副元素直接来一个这个LA hat，来一个这个48个像素跟它的高度一样就完事了，那这个A的话，我们在这儿给它设置一个字体的一个颜色啊，设置上诶这个颜色，然后的话，它这个text的direction，我们的这个下划线我要给它去除掉，然后看我们得到了这样一个效果，然后这个字的话，整个我们需要它大一点方size，比如说我让它来一个这个16个像素啊，它它字大一点，这一保存，诶整个现在是不是这么一个效果呀，然后A的后以后还要变成一个这个黑颜色啊，黑颜色我们取一下这个颜色是一个。

是一个636363对吧，所以这里边它的color啊，我们来给它设置一个whole，点一个这个navy，然后A冒号一个ho的话，我们直接来一个这个background color，我们井号是一个636363，然后这一保存我们来看效果，哎，现在是不是有一个后这么一个颜色了，哎颜色了啊设置上了以后，诶这字还得变色呢。这是一个白色吧，节目就是color，我们来一个这个井号，一个FF这一保存，那现在我们的效果是不是就出来了，哎，就出来了，当是现在的话，我们只是把它这个表面的一个效果给做出来，但是整个布局是不是还没出来呀？哎，布局在这儿就非常的简单了，怎么简单呢？哎，那现在我们既然讲弹性盒，那我们先来给nay将它设为什么呢？设置为我们这个弹性容器，直接display flex变成弹性容器是不是就横过来了？哎横过来以后也会出现一个问题，这个字是不是没有去。

大小没确定啊，那我这大小怎么定啊，I大多大，那现在它变成了弹性容器，那么这个nay里边的Li是不是就变成了弹性元素啊，那弹性元素我们来设置什么呢？哎，我们来设置它们的一个增长的一个系数，诶设我们这个增长系数什么意思啊，现在等于我们这是不是有空白的空间呀，空白空间那我怎么分配呀，爱怎么分配怎么分配，你就直接让每一个Li把这距离你给它平均分了是不是就行了呀，所以我们直接来一个，我们叫做一个X，一个这个Lex，一个我们直接设置一个一，这样一保存是不是就展开了，诶文字没居中没居中，咱们给A设置一个t line来一个这个center这一保存，那这个时候你注意了，我还用不用量每一个多大个了，哎不用量了，你就写吧，它就自动就干嘛了，哎就适应了，懂这意思吧，哎，所以你会发现用这个东西写，当然你这些字体啊，后位这些你该试试还试试。

但是你去布局的时候，是不是就简单多了，哎，三两行代码就搞定了，并且它有好处啊，你现在我这想我就写两个菜单了，我就写俩，是不是也是一个撑满的状态呀，我想多写俩，我想再写俩，那这个时候他还是依然是一个什么呀，依然是一个满的状态，也就是说他可以完全根据你的这个多少来适应它这个宽度，所以才叫什么才叫一个弹性盒啊，它叫一个弹性盒，好，那么这个是我们一个导航条的一个练习，主要是先体会一下这个弹性盒的一个特点啊，弹性特点，当然还有一些设置，我们还没有细致说，诶待会儿把这练习做完了，我们就要细细的去解读这个弹性盒啊，我们先来听一下。