尚硅谷前端基础 (135)

好，那么接下来我们来做一个练习啊，我们来做一个这个淘宝网上的一个东西，首先打开你的淘宝啊，那这里面注意我们要做的并不是淘宝的PC端的网站，我们要做的是它的一个移动端的网站，移动端的网站我们怎么去看啊，怎么去看，那注意了，当你打开你的开发者工具啊，你直接F12打开你的开发者工具看这儿，这儿有一个这个手这个一个pad，一个手机这么一个图标，你点这个图标，那这样就切换到了我们一个浏览器，它在模拟一个手机访问情况，然后在这个位置可以选择你的手机的品牌，那比如说我现在选的是一个iPhonex，你自己选一个你的手机啊，你自己选一个就行了啊，但是不要选这个，诶responsible responsible是一个响应设计，这个我们暂时先不用，我们先用这个手机的模式，选完了一个手机，随便一个手机都行啊，然后直接点击刷新，那这样的话，一般网站都会自动切换到它的什么呢？它的一个移动端的页面，那这就是淘宝移动端页面，也就是说。

这个网站现在看的效果就是你在手机上看到这个效果，那接下来呢，我想做这么一个东西啊，做淘宝中间的这个这个这个导航栏啊，这个导航栏，这个导航栏其实并不难啊，并不难，一看就一共有12345，一共有十个链接，对吧？十个链接，那实际上这儿对应的是不是就是十张图片啊，哎，那我们要做这么一个东西，我们要怎么做啊，怎么做来我们来一块做一下，首先呢，这个图片啊，我已经整好了，图片我们在我给放哪去了，我们的sources资料里有一个淘宝的文件夹，这里边我放了是不是十张图片啊，哎，就是这十张图片，所以接下来呢，我们来先创建一个项目啊，我们在这儿呢，来直接新建一个文件，我们来一个16叫做一个淘宝，淘宝的这个导航条，哎，淘宝的导航那在这里边呢，我们来创建一个新的文件夹，哎，不是新件夹，在MG里创建一个。

新的文件夹我们该是一个16了，然后把这几个图片我给它拖进去。拖进去，那在这里边我们就可以写一下了，我们可以先写一下它这个结构，它这结构其实很简单，我这玩意儿就看一遍，以后你都不用再看第二遍了，是不是就水平排列的呀，哎，就水平排列这么这么这么这么一个结构，我们就直接给他写就完事了，那写的话，我们在这里边呢，我们给他这么样写，嗯，淘宝导行在这儿我们来写一个啊，我这里边呢，我就直接简单的重置一下样式了啊，我们来一个这个，来一个这个style标签，Style标签我们在这儿来一个这个诶星号，我们来一个马丁零，然后来一个PA啶零。哎，重置一下，然后在里边我们来写样式，首先呢，我们在外边创建一个外层容器啊，创建一个这个外层的一个容器，外层的一个容器，哎，我们就直接整div吧，哎，整一个这个div div呢，我们给它来一个class，哎，那这个是我们整个的一个导航条啊导航条然后的话，我们这个应该是分了两层对吧，一层是五个图标啊两层一层是五个图标，那么我就在这儿呢，哎上下我就直接上下整两层div啊两个div，呃，两个div呢，或者我们既然是在这写一个模拟的是一个移动端的网站，对吧，我也可以直接换一个我们这个什么呀，换一个我们这个navy啊navy这我们来个class class呢，这个是我们呃叫做一个navy inner吧，诶，Navy的一个inner啊inner，然后呢，这我们直接，哎，其实我这个应该是这样设计比较合适，外边我用na，里边我用什么呀，里边我用div，要边用na里边用div那。

这里边的div呢，我们就要一个NAV inner，然后div里边是不是又有这么五个五个小五个这个图片啊，哎，五个图片五个图片呢，我还是用一个div吧，Div里边我们来放一个超链接，这写一个井号，井号呢以后呢，我们在这里面放我们这个图片MG，诶MG的话我们想一下这个图片我们是设置成img呢，还是设成一个背景图片合适一点的，我们想一下。

Img和背景图片，其实呢，这块都都差不多啊，都差不多区别不大，那我们省点事，我就直接设成这个图片吧，哎，我们就直接是找到我们img下边的一个这个16下边的一个，1.gbd啊，1.gpd，这个是我们的第一个，那我们这一共有几个呀？哎，一共有五个，每一行有五个吧，诶每一行有五个，那这个呢，我给他起个class，这个class我们叫做一个这个item吧，Item那我这儿一共是有几个呢？一共是有哎2345啊这有五个，改变一下图片的名称，这个是二，这个是三，这个是四，这个是一个五，哎，那当然这个out，我们就不用写了啊，不用写这个描述了。然后的话，我们下边还有一层对吧，下边还有一层，下边还有一层结构应该是跟它是一样的，跟它一样的，我们就直接复制一下啊，直接给它复制过来，复制过来以后改一下图片，这是该六。

哎，这是一个七，这是一个这个八，哎，这是我们这个九，这是这个是。好，那这一块我们就设置完了，然后来看一下效果，直接运行，哎哎呀呀呀呀。一个都没出来是吧，图片的名字应该是写错了，应该是什么呀？应该是叫，哎呀PG我都写GPD了对吧？PG啊，我们这样直接给它找一下啊，CTRLF啊，我们用这个CTRLH是替换对吧？GBG替换成PD啊，PD替换一下。替换。诶，这个是在这儿呢，替换替换替换替换替换替换替换替换替换换保存，诶这个时候是不是图片都出来了，哎，图片都出来了，但是现在比较可怕的一件事，现在我的图片都是一个竖着排列的，对吧？竖着排列的，那接下来我们就来写它的样式，这个结构的话呢么，稍微的有点复杂一点，对吧？我们最外层是一个navy啊，最外层是一个navy，而这个navy我们直接写一个我们这个类也叫navy是吧？Class叫navy，那这个时候我们来设置一下我们那什么呢？诶设置我们这个外层的一个容器，外层的一个容器它的宽度应该是跟屏幕一边宽的，对吧？所以这个时候给它一个宽度，直接来一个Y是一个100%，屏幕多宽它有多宽，当然写不也都一样啊，你不写也也也一样，然后的话，我们现在来看我们这个na里边它有两个这个div对吧，有两个div，这两个div的话应该就是上边一层下边一层对吧，上边一层下边一层，那这两个div我们想一下。

诶，我用不用把它们把这个nay设置成这个弹性弹性容器啊，其实在这儿的话应该是不需要的，因为这个div是不本来就是垂直排列的呀，哎，所以我们不需要管这个navy了，那我们直接找它下边这个navy in的navy in里边等于它里边是有几个这个item啊这个是什么呢？这是我们它它里边这几个玩意儿是不是这几个div，这几个item是不是应该是横向排列，哎横向排列，所以这两个navy inner的话，我们都应该把它干嘛呢？哎，这儿来设置什么呢？哎，设置我们这个，哎图片的一个这个，哎这个是每一行的容器吧，每一行的容器，那这个时候它们两个里边的元素是不是应该都是横向排列啊，哎，横向排列那么简单一点，我们就把它们都设置成什么呢？哎设置为，哎设置为我们这个弹性容器，直接来一个迪斯play，来一个flex，那这样你看很轻松的，是不是让这里边的元素就。

横过来了，哎，就横过来了，哎，并且最爽的是什么？最爽的是其现在我们你看啊，我通过拖动诶诶诶诶拍爽倒了，我拖动的时候你看我这个图片的大小改不改变，哎，不改变诶但我们现在看这种情况为什么可以给我们充满，哎，那注意了，现在我这儿设置完了以后，你看显示效果还可以是吧，还可以接受，但是现在我们来说一下我现在这里边的每一个item啊，每一个item，每一个item呢，我可以给它设置一个背景，背景颜色item，我们给它设一个background color，我们给他来一个井号BFC，井号BFC每一个item的大小出来了，对吧，它是把元素，诶它他其实也没有把元素撑满，是不是还有空白了嘛，那我们这儿真的希望我这放大以后，这元素是应该把这个空白的也给它撑满，哎，也给它撑满，所以这个时候我们的item，它的那个增长系数是应该有啊，哎，增长系数应该有的，所以这个时候我们直接给他设置一个，所有的item我们都给他设一个那个。

Flex，诶flex的话默认值是一手是没有这个增长系数，那这个时候我们给它改成一个这个凹凸，凹凸的话，是不是它就也会自动去增长了，哎也会自动增长，也就是说这时候当你的改你这个大小改变的时候，你的里边的元素是不是会宽度会自动去改变，哎会自动改变是这么一个效果，那这一块我们设置完了，然后我们再看一个问题，现在实际上默认情况下，我们item的大小实际上是不是被这个图片去撑开的呀？诶被图片撑开的，那我们这个时候我们就可以看一下原版了，原版的这个网站，你看它这个图标跟我们这个图标一比，是不是很明显，我们这个图标是不是有点太大了，诶原版的图标没有这么大啊，没有这么大，它之间是不是有这个距离啊，哎，有这个距离，而我们这个图标等于现在真的是实在是有点有点太大了，所以这个时候我们需要设置一下图标的大小，我们不能让它干嘛呢？让它这么大啊，让它这么大，所以这个时候我们来设置什么呢？哎，我们先来设置我们item里边的img。

我们就做一件事儿，我们的宽度是100%，也就是说我要让图片去参考什么，参考元素的大小，那这样可以有效的避免我们这个图片从什么呢？从我们这个元素当中溢出这儿来设置我们图片的宽度，哎和什么呢？和副元素宽度一样，哎和副元素宽度一样，好，那这样我们就设置完了，那这个时候感觉效果是不是就就好多了，哎就好多了，但是实际上如果你还是对比那个原版的话，你会明显感觉到我们这个图标稍微的有一点点的有一点。

诶稍微一点大，所以它这个图标你看中之间这个间距是不是会很小啊，而我们这个图标间间距它这个很很大，我们这个间距很小，为什么小，那就是因为我们现在这个整个这个item实际上是比较的比较大的啊，比较大的因为我们给它设置了一个这个增长系数，它是不是会自动去增长，然后把这个元素把这个一边给你，给你铺满了呀，哎给你铺满了，但是呢，但是现在呢，我们又诶不希望有这么一个效果，你确实是可以增长，你确实可以增长，但是呢，我不希望你的大小啊太大，我希望什么效果呢？哎，我希望你给我这个图片之间呢，你给我留一个什么呢？留一个比较大的距离，而不是说就是让这个图片能多大就尽量的什么呀，尽量多大，也就是说我希望让他们之间的什么呀，哎，之间的这个间距要干嘛呢？要要大一些啊，要大一些，哎呀，那这一块我要怎么做才能确保他们之间的间距要大一些。

诶，那这里我们就要处理一件事儿了，那现在如果我们用的是一个flex凹的话，那这时候就会出现一种情况，什么情况呢？那就是它会让我们这个元素增长，增长到一个什么效果呢？就是你之间这个距离有多大，它就会用多大，那有多大就会用多大，那就会导致我们元素的话没有一点空白的空间，实际上这一块现在每一个是不是都是一个div，每一个都是div啊，所以这个时候你那这凹凸你就不能写了，因为你只要写成凹凸，它是不是会自动的增大，哎自动增大，那好，凹凸我给它注了，注了以后OK，是不是确实不增大了，哎不增大，但是这东西也挺奇怪的呀，也不好，那怎么办呢？诶来，那这个时候我们可以给他设置一什么呀，我可以给他设置一个外，那这个时候我可以让这个item的外，比如说我就让它是什么呢？哎，是我们整个宽度的一个15%，让它的一个宽度是我们整个这个负。

元素宽度的一个15%，那现在你来看它的大小是不是也会随着改变呀，诶因为复元素一大它就大了嘛，哎，复元素一大它就大了，但是这样它有什么好处，这样的好处就是我的item，它不会说把所有的空白都给你占住，这是不是就有空白空间了，哎空白空间了，有空白空间了在我们navy inner这我们在设置一下什么呢？设置我们这个主轴上，我们这个空白的一个什么呀？诶分布我们这个属性叫做一个just five的一个content，那我们看一下它原版什么效果，原本什么效果，你看诶左边距离小，这大这大这大这大是不是右边距离小，效果是不是显而易见什么效果，哎，它用的一定是一个space一个什么呀，装分配在周周围嘛，这样一刷新，你来看这个距离是不是就就出来了，哎，然后呢，我们把这背景颜色一去，你再看效果，诶，那这样是不是基本上跟原版就很接近了，当然很明显啊，我这个距离应该是有点。

点什么呀，有点大了，所以我这个宽度应该再调整一下，我调整到一个18%，我再看效果。诶这样的一个距离是不是就比较的比较合适了，如果还小，你就调成百分之20%，应该就20%这个距离应该就出不来了，对吧，百分20就是这样一个效果了，基本跟刚才是一样的，所以我们距离的话，你可以通过这个大小来表来调整这个它们之间的空间，这个值越小，它们之间的空白就越大，图片就什么呀，诶图片越小，我调到一个18%，那这样我们是不是做到了一个跟他这个效果基本上是，诶基本上是一个一致的效果了，对吧，基本上是一个一致，诶你看诶基本上是一致的，但是我就感觉咱们这还好像还稍微有点大的似的是吧？哎，但是我们做到这个效果就已经干嘛了，哎，就已经可以了啊，就已经可以了，好，那这一块做出来以后呢，实际上它下边还有什么呀，是不是还有文字，哎，还有文字，那我们可以把这文字呢也给它写上，文字的话直接往超链机下边我们来写个SPA啊span，第一个是一个天猫，天猫啊，我们都给它写上啊，写个字就完事了，写字比较简单，第二个是一个聚划算下。

这边一个叫做一个天猫国际，天猫国际啊，再往下是一个外卖啊，但是我这个图片的顺序跟他那图片顺序可能我没太看啊，我不知道一不一样，嗯，但是无所谓，咱们把字写上就行了啊，然后下边一个就是叫天猫超市，哎，那下边一个我们叫做一个充值中心。哎，充值中心。

再往下呢，是一个叫做飞猪旅行，再往下叫领金币，来领金币，再往下我们叫做一个拍卖，哎，最后一个我们叫做一个分类，哎分类啊保存一下我们再看效果，哎，这个字是不是就都出来了，哎，字就都出来了啊，当然字的样式呢不太对啊，我们来调整一下这个字的样式，字儿的话，我们直接调整这个A标签就行了啊，It里面的a it里面的A的话，我们来先设置一下自己颜色，Color的话，我觉得应该是一个比较井号，333这个颜色啊，然后呢，我们这来一个这个tax，我们直接来一个这个捺，然后字体大小的话，我们就调大一点，Fo size fo size，我们给它来一个16个小组，哎，然后调小一点，然后的话我们还有一个text。

X一个LALA，我们来一个这个center啊，文本的话我再来一个水，现在等于我们这个文字在这，我们是不是水平居中居不过去啊，哎，狙不过去，我们来看一下，为什么狙不过去，我们点一下。这是我们这个span，这个是我们这个A。啊，这个居中我们应该给设置给我们的这个item item啊，那这样是不是就达到了一个文字，一个这个居中的效果，哎，居中的效果，那这样我们整个这一块就给它设置完了啊，设置完了，但是我感觉我们来看一下啊。哎，那这样基本上效果是不是还还可以啊，哎，还可以啊，距离的话，就是他们上下之间的这个距离，稍微的感觉好像跟这个原版相比的话，还稍微的有点有一点点劲，对吧，有一点点劲，那我们可以再给他设置个什么呀，设置个marin之类的，你可以给他设置一下是吧，我这就就我就不处理了啊，我就不处理了，但是我们总之就做出这么一个效果就可以了，而且你会发现其实这一块我们弹性有的好处，就是你看我们这个网页放大的时候，这个图标是不是跟着一起放大，诶网页缩小的时候，图标跟着一起缩小，也就是弹性有候很多很大一种程度的话，它可以做一个什么呀，做一个自适应的网页，使我们的网页根据我们窗口的大小的改变而进行一个改变啊，当然这个是我们最弹性盒的一个最最最简单的一个应用，后边我们还会有一个练习啊，会有一个项目诶，会有一个比较复杂的一个练习啊，再来巩固一下我们弹性盒的一个知识啊好，我们先说这么多。