63.尚硅谷_css3_flex案例.wmv原创

好，来看一下，我们用来做一个东西啊，这是淘宝吧。OK，来看淘宝，淘宝的这个导航一看啊，我一看他就像。是不是上来这个等分布局嘛，有没有发现是不是一个等分布局啊啊，可是本质上这个方式不是用来做的。啊，他们是用来看一下阿燕。啊，这是我们在移动大会讲的一个适配方案，按I适配方案啊，这个方程是会去讲懂不懂啊，可是这个东西因为淘宝的受受众实在是太大了，他们要考虑很多兼容性问题了，懂吗？啊，所以说这个X可能他们没有去用懂不懂，可能在一些比较小的布局上面，他们会用flax布局，能不能讲这项目的受众不一样的话，技术选型是不一样的，像如果你这个项目的受众极其的广的话，要考虑到浏览器极其多的话，那你用的技术一般都些比较老的一些技术。对吧，当你这个项目的受众哎，并不是很多，或者说你是个内网项目啊，或者说你这个用户群体本来就不大需要考虑的。

浏览器的这个版本啊，以及这个种类啊，很少，那很多新的技术都是可以用的啊，像我们近几年出来的VIVO啊，RA啊，像这种东西是不是啊啊像这种东西做一些可能说啊中小型项目啊，或者说做一些就是要对兼容性要求不高的项目都是可以的，懂不懂一旦遇到这种很大的电商级别的项目啊，其实他们更喜欢用这块。啊稳嘛，懂不懂，而且不会用几块3.0，会用几块瑞一点几或者几块二点几啊接容678吗？能没讲啊，这里分项目来的，有没讲，就说学的个技术到底怎么去用啊，要学会去用它啊，可是我们来看一下，如果这个项目的受众不是很多，那我们考虑这个这种东西的话，看上去第一眼就应该是什么。是不是，而且你要知道你们去那些项目去的公司的话，肯定肯定不是受众太广的一些公司，懂吗？OK，因为没有太高的门槛嘛，跟没讲，就是几年工作经验之后的话，可能要去一些比较高门槛的公司吧，跟不讲啊，所以说你们在一些比较新的技术的话，你们一定要去使用它啊，OK，那么来看一下这个东西我应该怎么去画。

啊，我们也要考虑一些什么flax的兼容性啊，这边我们稍微去考虑一些兼容性啊，这个在移动端嘛。懂吗？那我们说你比如说我公司直接干嘛支持安卓这一款手机的，是不是只要你做安卓上的东西，那我问你，你在做这个布局的时候，我说能用新版本的吗。有没有一定要新老，新老版本结合起来考虑吧，是不是？那想想现在有几行？一行还是两行让你去做，你是想分一行做还是分两？再好好想想，分一行做还是分两行？

肯定得分两行做，我们说老版本里面是没有多概念是不是啊，那肯定得干嘛分两个点，两个容器吧。是不是啊，是不是得有两个入项，OK，那想想我们把这个东西写一下。OK，我们来个flex案例，CTRLCCTRL。03OK莱克斯克斯案例啊，我们说做个淘宝是不是做个淘宝，你有没有平，有平吗，现在。右边。又好了，再来看一下好怎么做个淘宝。啊，我们没有做过淘宝OK，我们只是实现了一下它的一个导航而已，是不是OK啊，你说单单如果说单不考虑性能，不考虑受众的情况下，让我画这个页面一天。

肯定能画完是不是，你要是考虑性能，考虑受众，考虑功能的话，饶了我了，OK，好，来看一下，所以那我们来个什么，你直接去TF吧，CTRLCCTRLB是不是OK，我们是什么。来index吧，DHDY是不是来看一下应该怎么写，全部干掉。OK，首先设计SC结构长设点。来个D密码，先给你来个包过去，是不是这个ID叫什么？问识别个导航啊，叫never。是不是OK，导航里面的咋整几个容器啊，两个E给一个class叫做航吧row肉嘛，是不是走你一行里面几列五列，一行里面五列嘛，是不是OK div给一个class叫什么艾特嘛啊起名字也是蛮有什么艺术的，是不是走你那想想一个艾特你们应该怎么写，是不是一个链接要点上去啊，那肯定是一个什么A标签，OK，我先把这个链接进了J进了j v X c r I pd进掉，是不是OK里面什么天猫是不是不是淘宝是天猫啊，不不天猫是吧，不叫天猫，叫天狗，只有你OK几个五个。

OK是吧，这个爱复制五分吧，你别傻乎的把这个肉给我复制五分，能不理讲这边的OK是不是OK，天猫聚划算，聚划算是不是还有张图啊，是不是图，我们再来天个国际吧，OK，还什么外卖？

OK，天狗超市是不是？OK再来再来什么，再来个肉吧，OK，再来日再来看第什么充值中心，是不是充值中心。充值中心是吧，还有什么飞猪旅行，叫什么海风旅行，海风旅行OK走你好，再来看还有什么领金币OK领金币男嘉宾啊。一看就是我平常去的站点，不是很正规啊，经病啊，你没有去去过非诚勿扰的现场吗？非诚勿扰在南京是吧？肯定去过啊，不要钱的，什么当嘉宾啊，就是我们学校在非纷勿扰旁边，就在那个江江苏卫视旁边嘛啊，然后我们学校有专业叫广电广播电视编导嘛，是吧，他们就在里面实习嘛，所以经常可以搞到门票，我们可以去嘛，是吧，你们是不是看上去那些女嘉宾都涨得一样高啊，是不是我就在那个底下做的他们垫的那个泡沫要垫这么厚啊，就是有些不需要垫，有些要垫这么厚啊，然后你们看到这个孟非是不是特别的慈。

讲是不是，是不是他在现场会骂人的特别凶，就是哪个女嘉宾不是会抢答嘛，是不是就是我上次去的时候是正好坐我旁边的一个，不是坐我旁边，坐我斜上方的一个女嘉宾老是抢话，你知道吗？抢那个主持人的话懂吗？然后莫非当场就骂他了，而且骂的特别难听啊，就是一些，就是不可能在电视上播出来一些词，懂吗？啊，这是南京本地的一些脏话啊，我不知道你们有没有听过南京的脏话啊，在。

南京就是一个很奇怪的城市啊，不管是男孩子还是女孩子啊，他们就是其实不是说脏话啊，就是就是这样的，就是平常他们讲话就是这样的，什么意思啊，就是。哎，不好讲，就是这个讲起来就是正正常交流啊，都是脏字开头张字结尾的啊，就你讲一句话，不带几个脏字都不叫南京人能不讲，所以说你一个外地人第一次去南京的话，你就感觉这人怎么老妈啊，其实很正常啊，他们讲话方式就这样。

你就那种骂口，而且他们讲话你会发现很有特点啊，然后你时间一待，待长了，你就会你就会喜欢上这种方式啊，你知道我这种讲话方式我改掉，你知道我改了多久啊，超级难改。好，我们来，我们要干嘛啊，我们现在是不是做了两行来看一下这里。是不是这样的，是不是我们说现在我们是不是要稍微去设计设下这两行应该怎么走啊。是吧，首先我们不管我们什么，我们说这个never吧，Never底下的什么外，它肯定是个什么啊，不不不是外什么肉蛤蟆，它的十倍一定为。Le是不是displayx，你看是不是就是一行了，是不是，而且干嘛。几十之后呢，等分布局呗。是不机器好写了，是不是OK，怎么去等分布，咱写等分布，你能把这些定死吗？

不可能吧，我们先先把这个等分布局给他写出来吧，怎么写的布好不好想自己想想点什么肉，然后呢。它下面什么所有的点咋现在是等分吗？肯定不是是吧，干嘛。简不简单，容器是不是出来了，可是你如果不理解的话，简单是很简单，你让我CTRLCCTRLV我都会，是不是不理解，你写起来就是痛苦的。你就是不知道为什么，能不能理解啊，OK，来看一下现在是不是等分，看打不打脸不打脸是不是等分布句啊出来了吧，现在是不是让这个东西干嘛艾特里面嘛，为什么。

深刻嘛，你看等分布局是不是真的很好想？机器简单嘛，用去加OK这里。来下，你看是不是就过来了，怎么讲OK，然后呢，我们说这个下划线全部干掉吧，A标签上面的这个什么text不不不什么为什么，那是吧，然后呢，把这个color换过，Color换成灰色是吧，OK是不就过来了，差不多吧，颜色是不是OK，然后呢。然后咋整切切凹凸有了。我帮你切完了啊，帮你切啊，你就说我不会切图啊，OK，走，你来看一下现在咋整。其实整个布局已经出来了，是不是，可是有一个小问题我们来看。什么小问题？大家看一下我这个A标签的这个。

热区是不是太小了？看一下这A标签，你看热器太小了吧，我只有点到这个文字上面才能去跳转吧，而我的想法应该是点整个应该才能跳转吧，那怎么办？A标签的display block是吧？来看一下A标签是不是就满了，因为你这A标签现在是什么，是我爱的东西嘛，我都已经什么拉斯布局了，所以他不可能啊，对，他确实现在应该是独占银行的。是不是因为我里面只有一个元素嘛。是不是你看我写另外一元出来，肯定是要干嘛被记下去的应该。你看是不是被挤下来吧，对不讲OK，那我们什么揍你好，那现在我的热气是不是也大了，是不是现在我差什么唱图片的是不图片大小我可以在A标签里面再去包个一卖掉。

呃，行。是不是是不是可以，我现在这个A标签跟我这个爱看是不是个吧一样大的，我说你点这个图片的时候，你也得跳转的吧，所以说这张图片肯定是张链接图片，什么叫链接图片，就什么图片在黑标签里面的是不叫链接图片，你写个1SC嘛，是吧，可是你可能这个后面这个文字是不还得拿个失败了包一下，可能还要去做一些布局吧，是吧，那这是我们吧，我们不用麦啊，用麦是可以的，那我不用卖，你看我咋整。我这么玩，我不，我现在干嘛就。这么这么大吧，那怎么办？我说，哎，我不是艾特吗？It底下的什么A吗？是不是？我们来个nice child第一个吧，是不OK，大想想我这个选择题现在应该选中了哪几个？

选中了他，而且还选中了他，可是每张图的背景是不一样的，那不能这么选干嘛？这个肉上面我也给了什么nice什么是不是？是不是这样的，OK，这个选项干嘛？我说你来一个什么。Before元素OK，你看到的是不是OK，然后呢？嗯，想想然后怎么办。看一下这个背景有多大。86乘以85啊，那我们就做86乘以86吧，对吧，那Y是。八六还呢，86PXOK，还有什么。Background URL是吧，第一个嘛，是谁嘛是吧，No repeat，看行不行。

哎，是不是全部都上来了。是不是，可是我们说太大了，是是，而且没有居中吧，你看这个，你看这是我的外卖吗？比说我是不是在这边，那怎么让它居中啊，它居中简单啊，还疼呢，马上下为你左右呕吐啊，会计元素啊。居中嘛，是不是就过来了，都有了是为什么，第一个应该是不是肉。想想怎么是都有了item，应该是肉底下的第一个item吧。是不是应该这个应该这个应该给谁啊。应该给艾是不是肉，第一个肉的第一个艾么，是吧，他的A标签加一个什么。

五人数吗？没问题是吧，就你啊，可能给的稍微有点大了是吧？好，其实在移动端我们说我们量到的是86乘以86啊，其实你要写的时候应该写43乘以43。啊，可是我们暂时先不换啊，这个我们放到之后再来讲，懂吧，OK，那走你其实我们说这些样式不是干嘛，他们通用的都应该有的，那怎么办，切出来为什么那底下的什么点肉底下的点it底下的什么A干嘛，他们是一样的，是不是这个时候你看这这边形是不是还是一样的。诶。看一下应该是一个什么，Before。这里是不一样的，能不理解，OK，下面是不是写写什么特性的样式啊，这是什么共性的样什么那就好，那这个就好吗？好写了这面改后面的吧，一。

四五。什么六？是不是这是是我第一行的第一行的前六个嘛，是吧，零一零二零三零四一共五个，OK，那就五个了是吧，只有你，你看是不全部过来了是吧？下面这话怎么了，把前面改成二。222这个也是二是吧，零六七八九十应该求不出来。这里是不是全部在看，是不是一个弹性布局啊，是不是OK上下想要上面有些pattern的话，你是直接去吗？控制一下就可以了，那么讲你看一个弹性布局是不就出来了，你看我不管到哪边都是一个什么等分的。

是不是不管怎么样都是一个本分的？是不是啊，因为这个图像太大了，怎么讲，你看我F是要去移动端你看。得分了吧，可是很很明显发现跟我这个不一样，差距有点大。是吧，他这个字我看得很清楚，这边只看到不清楚是吧？OK，记住这个站点我们没有为移动端做过任何事情。还是按PC的top来写的。是吧，我P想怎么写是不就怎么想，移动端不一样的啊，这个放到我们移动端课程里面再讲，可是这个等个布局应该要理解了。懂吗？OK，好，大家下课先。