尚硅谷前端基础 (113)

好，那么我们接着来往下来进行啊，往下来进行的话，其实我们在做就是做下边这块了，我们首屏的也就是最后一块了，把这块做完了，我们这个项目就算做完了，那下边那些我们就不再做了啊，那种大块的布局呢，嗯，我还是虽然我不做了啊，因为。我觉得其实好像都差不多是吧，我觉有点懒得做了，但是如果你是一个初学者的话，我建议你的话，嗯，自己还是尝试去写一写啊，自己尝试写一些就是，呃，光把老师讲的你做会了还不算厉害对吧，就是还不算你会了，就是你得自己去找一些东西去做一下，所以你做完这个练习呢，可以再找一些这种。京东啊是吧，淘宝啊，这些网站自己再做做，其实只是内容的多少所谓的复杂呀，简单容易啊，那就是你耐下心的都能做出来，技术点我们都已经掌握了，对吧？技术点都已经掌握了，然后你做的时候呢，你可以看一下是吧，哎，你说这个网站到底那做的好不好，诶有没有什么问题，有没有什么不好的地方，那比如说像小米那个对吧，做了这么半天了，你有没有发现它有什么不好的地方，对吧，那其实。

你像我在做的过程当中，其实我之前也做过一次这个，因为要讲课嘛，讲之前可能要做过一次，做一次，其实你会发现小米的网站它也是在渐渐的发生改变，他也在是他也在发生改版，有一些地方他一些做一些细节的调整，但是他调整的好不好，那就不一定了，对吧？所以你要知道一个网站你要自己在心里有个数啊，这个网站设计到底好不好，哎，漂不漂亮，诶设计的精不精美是吧，这个代码写的厉不厉害啊，你这块你要能看出来啊，看出来好，那么接下来呢，我们就写下边这块，下边这块呢，它这块是一组啊，这个是一组，这个诶小的链接，小的图标，然后这儿很简单，这就是三个图片，相当于是一个是一个广告吧，哎，广告，所以这块整个这一个部分呢，我们给它起整整一个div就行了。

嗯，我们整个下边在back top啊，这个是我们这个，哎，固定定位的工具条，我们写个故事啊，定位的一个工具条啊工具条，然后下边这个呢，下边这个是我们的这个，呃，班的底边这块，我们想想，我们给它起一个这个起一个。起一个什么名呢？Service service上边我已经我已经起过了。已经起过了，哎呀，起名现在是个问题啊，这里边是一些小米九，小米MIX3手环，它是一些广告的宣传，然后这里面是一些，这个是一些超链接，对吧，超链接。啊，我们这儿就叫做一个这个a aid aid吧，A的啊A的广告啊，广告这是我们这个创建我们什么呢？创建我们这个广告的容器啊起这名有点可笑，因为这小米这里边都是广告对吧，都是广告它宣传自己产品吧，啊起一个div，点一个I的，我们还是来一个rapper wi APP啊呃，但是其实这儿没必要起rapper了，因为这个时候它就一个了，我省点事啊，就直接个艾艾外边我加一个W，我直接让他呢居中就完事了，然后呢，在这里边呢，它实际上每一个实际上这里边在这个I的里边，它分了这个四个框对吧，四个框第一个框呢，我们可他来一个，你像这个就是，呃，直接我给他来第一个，我直接给他来一个ul class，我们这儿叫一个这个shortcu啊short shortcu我们快捷方式啊，快捷方式里边呢，有几个Li Li呢，我们里边要放这个超链接，很明显它肯定得能点对吧，井号我们这先写字啊，这个叫做一个小米秒杀。

小米秒杀，我们先把这个字啊都给它写上，一共是六个啊，一共是六个二，这是34566个，我们都给它写上啊写上诶out out加shift加F小米秒杀，然后这是一个这个企业团购，企业团购企业团购，然后这是一个F码通道啊F码通道。

F码通道啊，然后下边是一个米粉卡，米粉卡。呃，再往下呢，这是一个这个以旧换新啊，以旧换新，以旧换新，然后这是一个话费充值，话费充值话费充值啊，然后呢，哎呀，它还有一个那个图标字体是吧？图标字体，图标字体我们给写什么，我这写一个这个ii的话，我们class class知道一个as，我们找一下图标第一个是个表是吧？表clock c clock有没有。Clock。

诶，他不给面他不出来是吧，你们看这搜一下c clock，诶他这有一个表啊，但是他这个表啊老丑了是吧，其他这个东西就是整的都是这种实心的啊，实心的就不能整一个细点的是吧，当然免费咱也就别挑了，看有没有别的啊太。Time time是个叉啊。那咱就别挑了啊，那我们就直接找那个，就用那表吧，难看点FA clock。CTRLC啊，这图标啊，用啥都行啊，我们这就演示一下就完事了啊，然后呢，下边是一个楼是吧，一个楼building是吧？诶，Buildil building，没有building，哎，还真有FV，我们这来一个building啊，往下写，往下写企业团购，这我们给他来一个爱标签I标签的class，哎，也是来一个class，我们叫sa，然后这来一个sa，诶叫做一个building building，呃，Building再往下还有什么呢？还有这个F码是什么玩意儿，F有没有F？

哎呀，不找了啊，找一小青蛙这玩意儿，你这基本上应该是他。自己制作的这么一个东西啊，我们就找起来太费劲了啊，FA，这来一个FA，我们叫做一个fog啊，青蛙复制一下棉粉开，棉粉开是什么玩意儿。依旧幻想这是谁写的，我的天哪。尼等卡啊，我写一名，怎看我的天呐，诶有时候写这玩意儿你自己写的挺有意思是吧？哎，尼等卡，然后这是以旧换新，以旧换新啊，然后下边是话费充值，这都没问题啊，然后图条字体我换几个换几个，随便找几个吧，这有一个。

呃，有意思的吧，这个机器人换一个。哎，别都弄青蛙是吧，哎呀，机器人来一个，然后呢，找一个这个键盘keyboard。还有话费充值是吧，话费充值它有没有什么信用卡什么的SIM用卡。SIMSIM卡，哎，SIM卡是吧，有这么一个随便写吧，或者话费充值，其实应该用那个手机的图标对吧？手机的图标好，那我们就算写完了，然后看效果啊，这一刷新是不是就都出来了，哎，都出来了啊，待会我们再调整样式，然后的话，诶这这这哥们哦，他对，因为我们这个整个高了嘛，他自然就下来了，对吧，因为我们通过这个包头的定位了，下边这个位置我们就不用管了啊，然后再往下看的话，我们就是中间还有这个看图片啊，这儿是不是有三个图片啊，还有三个图片，三个图片的话，我们这个我们可以整体啊，给它来一个这个ul，整体来一个ul啊，我们这儿直接来一个，哎哎UUL呢，我们这儿就叫一个class class我们叫一个A的一个MG是吧，广告的一个图片，然后里面我们放三个LY，这图片很显然也得能点，对吧，然后里面放图片，图片呢，我都整好了，呃，在桌。

桌面上叫31233个gpt，那现在我们这个图片用的就比较随意了，我们真正去开发的时候，这图片你看我这么乱的放着就不太合适了，我们要分一下类是吧？这个图片是干嘛的，这个图片是干嘛的，我们要进行一下分类啊，那这里边图片整完了，我们就来引入一下了，第一个我们这直接MGSLC应该是我们点斜杠CA，哎，这个img下的一个，这个1.gvd啊，1.gbd，一共我们是有三个图片，我们直接三个lie复制就完事啊，这来一个2.dbd，这来一个3.dbd，当然这out该写呢，你也可能需要写一下，正正式开发的时候啊，我们这练习就不写它了。

这一刷新啊，刷新一下诶图片。没有啊。引带点M，这是一个A的一个，Imga的一个，他图片没出来。我们看一下啊。Element，我们的这个A的A的img，我们看一下图片图片的路径有没有问题，A标签里面图片图片没有问题。

图片儿放哪去了？图片没出来，我们跟这写点字啊，写点字我看看。啊，出来了啊，在这儿写点字。它等于只给我出来了一个啊，前面都没出来，我们来看一下啊，可能是我在这个图片上有什么特殊的样式，导致图片可能脱铃导流了啊，我们看看，嗯，Aadad list style那。嗯，没有特殊样式。Li也没有A标签呢，A标签这都是统一的，没有问题，图片呢。图片的样式也都是默认样式，没有特殊样式，诶那这图片为什么没有了呢？没有了图片那就有一种可能，我猜想可能会有一种可能是它被上边这给盖住了，什么这个盖住了，我们来看一下上边这个啊，上边整个这个框是一个呃，Ul外边是一个banner，然后这是一个banner wrapper banner wrapper的话，我们来看一下它的渲染是一个1903，然后乘了一个这个460，这样我们把这上边这个板子我给它住了，我看看有没有，如果板子住了出来了，那肯定那就是被它盖住了，对吧。

出掉啊，保存这一刷新，哎呦，图片依然没有出现，那就不是斑子事了，我们把这个嗨点给它住了。直接给他删了吧。我都删了，诶都删了，都删了依然没有出来，那你就找不着他们的事了啊，那这里边我们再看看吧。这图片儿哪儿去了？嗯，这样吧，我们先写吧，结构上我们已经写完了，我们先写点样式，写点样式，待会儿要没有的话就就再再再找吧，结构上应该是没有问题，应该跟这个结构没关系，呃，我们这个是叫做一个这个A的是吧，A的一个WW已经写了，它是一个居中的，然后这是一个A的img啊舌头看都写好了，A的这个标签呢，我给它粘过来，然后这个元素啊，我们直接写样式啊，在这我们直接点一个这个A啊，设置我们这个什么呢？诶，设置我们这个下部的这个广告这个区域，广告区域我们直接点一个a dad的话，我们先给它设置一个background管子，Color，我们先看看啊，这图片太比较奇怪，我也找不着了啊，我们来看看到底跑哪去了，我们这一刷新这个东西现在跟这儿呢，但是就是这个图片它显示不出来大小也有，然后图片呢，就是没有img标签没毛病，然后这是一个A标签，这是一个ul class，一个A的img没毛病啊。

我们在这直接引一个图片看看啊，这我们直接引一个img，我们来一个这个点斜杠，Img下的一个1.gpd直接引一下路径，哎呀哎呀。

哎，闹鬼了是吧，这个时候他是不是出来了，哎，这个时候出来了，但是刚才我们写到那里边，他就没有出来，肯定是哪又写错了，你们看一下啊，哪写错了。那是ul的事吗？Ul里边随便写点东西看看出不出来，不刷也能出来啊，我再写个L，这样把前面的注释打开。所以有的时候写的时候，写的时候会遇到一些奇怪的现象啊，你做的时候，我们有时候可能一下子也找不到，我们自己测试一下，写完这东西看看能不能看见，诶诶诶，这个AAA是不是写完了，是不是确实看不见呀，证明我这里边的东西写的有问题啊，LY有问题，把这去掉，换一个LY。

哎哟。那名吗？那名再加上。哦，Class，一个爱的一个img，诶，我这个类名有问题啊，类名有问题，我们来看一下这个类啊，类名有问题。点开爱的img，爱的img在这我也并没有给他设置任何的样式啊，为什么出不来呢？哎，这个事儿其实你会发现，我一旦不写这个类名啊，我把它恢复过来，恢复过来把这类名给它去掉，保存一下，你刷新哎，是不是能正常显示啊，哎，能正常显示，但是我去掉这个类名，加上这个类名以后就看不见了，就这个名儿的问题呗，名的问题，改一名glass，我们就一个。

AA的一个，我就叫一个ibs吧，我就不改名，我就不再写那么麻烦名了，我在这个再看你还没有，你还没有，哎呀，这回可有了，为什么我写那个就没有呢？A的img保存一下。那我猜到了，应该跟我的编辑有关系哈，编辑有关系，我试一下，我换一个。你看这是我们这个。Vs code的问题啊，Vs code肯定是他在这里边对我的这个I admg这个类做了什么操作，你看我单独打开就没事，但是我通过我的这个编辑器打开的就不行啊，就不行，那我也不去找他的原因了啊，但是我就直接改一下名啊，能解决就解决一下了，但是你们在写的时候也是啊，有的时候可能会遇到一些奇怪的问题啊，它不一定是你写的问题，很有可能就是你这个，诶编辑器给你带来一些问题，遇到一些问题你你就试一下，我们最简单的方式就是什么呀，就是就是排除法啊，排除法把所有的问题都排除了，剩下的肯定就是它的一个原因了啊原因了好，整个这块写出来了，写出来以后我们来写样式，把这个就可以注掉啊，这就没用了，好，那现在我们来看它的整个宽度们就不用改了，整个宽度就是这样的，对吧，整个宽度就是这样，那现在呢，我们需要让首先的话，我们整个这个容器它是有一个高度的，对吧？高度我们这这写了，这是一个170像素啊一。

70像素，所以这个时候的颜色我先留下，我这来一个高度，是一个170的像素，高度写上，高度写上很明显元素溢出了，溢出先不管它，高度写完了以后，它上边还有一个这个边距是吧，它是往下走的，有一个14个像素的一个外边距，所以我再给它设置一个margin top是一个14像素，我们调整一下啊呃，图片呢，给它放到。

图片放大一点。放到这个位置，然后呢，这个网页呢，我放到。这个位置不好看了。哎，没关系，反正我们就坐着一块儿嘛，对吧，我们一块儿一块儿看啊，一块一块看。来大概这一样啊，这样这样一个效果啊，左边是我这个图片，然后中间是我这个这这这东西图片的话，高度我们这个margin刚才已经设置好了，Margin刚才我们看到是一个这个14个像素，然后这个元素整个就下来了，下来以后的话，我们这三个块啊，首先其实这看是三个块，但是我实际上我这是两个块，哪两个块呢？一个是我们这个这个这个shortcut，还有一个是我们IMGS，所以这两个块我们应该都是一个向左浮动，所以这我们直接点一个ad，下边的点一个这个shortcut short short shortcut快捷方式，它应该是一个向左浮动，那同样我们的那个玩意儿，那个叫做一个点一个ad，我们下边一个IGS，这个应该是也应该是向左浮动的，对吧，都是向左浮动啊，都是向左浮动，向左浮动完了以后，那注意了啊，那然后呢，我们这个它这里边那些图片是不是也应该向左浮动啊，哎，它不是图片向左浮动，它是那个什么呀？它是Li对吧？Li，呃，Li的话应该是我们的这个img。

DS里的LY，诶，我们想一下啊，还不光是IMGS这一组是不是也得浮动啊，那就干脆一步，对不？就AI的下边的所有LY我都让它来浮动啊，让它来浮动，那这样的话，它的这个包括我们这些图片啊，包括我们的这个文字呀，诶就都变成了这个横向排列了啊，这样就都是一个横向排列，当然现在是太大了啊，太大了排不到一块儿去，待会我们再改，那这里边整完了以后，我们该浮动的就都给它设置好了浮动啊，准备写逗号，该浮动的我们都给它设置好了浮动，然后我们就一块一块设置，一块一块设置，首先我们设置左边这块，左边这块呢，也就是我们这个这这这稍子卡在这啊，把它放下边，诶这样会不会好一点。

诶，这样稍微好一点对吧，设置我们这个shortcut啊，这一块的话，我们是整个它是一个宽度是一个234，我们整一下啊，我们设置我们这个左侧的一个快捷方式，快捷方式啊，我们直接是一个I的下边的一个shortcut，点一个shortt，呃short cutt的话，这里边的话它有一个整体的宽度，宽度是一个234个像素，234的像素，高度是一个170 170实际上就跟负元素一边高，我们写什么高度是一个170啊，170啊，然后的话还有一个背景颜色，Background color background color呢，我直接给它一个这个颜色是一个井号是5F5750，井号5F5750啊是这样一个背景颜色，有点灰不唧劲的一个背景颜色，对吧，那大概是这么一个效果，那这一块我们先给它设置出来，然后的话，这边这些元素跟它之间有一个14个像素的距离，我们直接来一个。

Get，来个14像素，把皮加元素往右边几十次克像素啊，然后是下边我们这组图片，图片好设置，我们先给它设置上啊，这是设置我们这个左侧的这个图片，左侧的图片的话，其实主要就是大小的问题，他们的大小呢，我们应该是I的下边的一个叫做一个I'mgs imgs下边的一个这个Li Li，它们每一个图片的宽度都是固定的，应该是Y是一个316个像素啊，并且我们来看一下我们每一个图片之间是不是有一个15个像素的一个外边距啊，哎，所以这个时候我们直接给它来一个这个哎，Margin，哎，Margin left，来一个这个什么呢？Margin right啊，Marin right右边右外边句margin right right margin right。

Right呢，我给它来一个15个像素啊，把这个外边距给它设置出来，然后图片的话，现在也过大，图片实际上应该是跟我们这个Li一边宽的，所以我们这直接点一个ad，我们点一个imgsmgs的话，我们就是MGS改它里边的MGMG应该Y跟复元素一边宽，那应该就是100%的宽度，一保存，那这样就出来了，出来了以后的话还有一个问题，我们这个图片一般都会涉及到的verical alarm来一个top啊，让它这个里边那个不要连着这个基线对齐，但是其实你会发现我这改完了以后，我这个图片它依然不上来，为什么不上来呢？不上的原因就是因为我刚才设置这个外边距margin right，我是不是等于给三个元素都设置了，哎，给三个元素都设置外边距的话，那这个时候就会导致一种情况，那后边元素也多一个，那这样就意味着我们整个宽度实际上就超过了负元素的宽度，所以这个时候我们最后一个不应该要弯距，所以我们直接找Li我们这个。

是一个什么呀？是一个冒号，叫做一个last child啊，叫做一个last child last child最后一个子元素，它是应该没有编剧的，我们直接来一个margin。Marin我们直接给它来个零啊，然后这样一保存，你看这回这元素是不是正好就横过来了，哎，我把这个背景给它去掉啊，给它去掉，那这个时候其实你直接一看啊，我们直接保存一下，再看效果一刷新，诶整个这一块效果是不是就出来了，哎，你看跟我们这个图里边是一模一样对吧，一模一样的宽度一调这样就OK了啊跟图里边就OK了，所以左边这三个我们一次性是不是就给它完成了，诶就给它完成了，然后接下来我们来麻烦一点，就是调这个左边这个问题，左边这个的话，其实它会它挺奇怪的，小米这个往官网的它也做了调整了，你看啊呃，整个这块的话，这个字比较好处理，那我们就先处理字儿吧，啊先处理字，首先这个字整体来说有一个颜色是一个CFCCCA，所以这里边我们先给它设置颜色，设置颜色呢，就是我们shortcut里边这个a shortcut里边的一个AA的话，我们给它来一个color color的话应该是一个井号，叫做CF。

CCCA是这么一个颜色啊，字体颜色设置上，哎，这少一个点。点啊，那这样颜色就给它设置出来了，设置出来以后呢，注意这每一个你看官网原版的话，它整个是不是都可以去点呀，诶整个它实际上都可以去点的，那这个时候我们应该整体它其实就是一个A，所以这个时候我们要把它给它设置成这个A啊，设置成这A，所以这个时候我们要给A设置一个Co元素，Display block啊设置一个块元素啊，这是设置我们这个快捷方式中的这个超链接啊，超链接超链接设置成跨元素，跨元素的宽高的话，我们都量了，高度是84，宽度是76啊高度是84 hi的是一个84个像素，然后我们这个高度是一个什么呢？诶，宽度是一个这个76个像素，把它的高度给它定下来，定下来基你看基本上就是在这儿就是什么呀，就是平均分配了啊，平均分配了，然后这里面的话，其实我们的这个图标字体感觉上应该比这个字稍微的要大一些啊，要大一些，并且这个图标字体它是不是会会独占一行啊哎，会独。

干一行，所以这个时候我们再设置一下图标字体，这个里边呢，我们直接来一个这个I啊，图标字体放到I里边了嘛，这样里边我们来设置我们这个图标字体，那让它独占一行的话，我们最简单的方式，我们就直接给它来什么呢？也把它转换成一个块元素啊，把它转换成一块元素，那这样它就独占一行了，对吧，独占一行，独占一行以后呢，我们这个图标呢，它要水平居中，水平居中，我们直接text LA来一个center啊，让它水平居中，那这样我这个图标就居中了，那其实我直接给A这来设置，给A来设置的话，因为那个字它也是水平居中的嘛，对吧，这样我们连图标在这个字都水平居中啊，水平居中，然后一个就是我们这个垂直方向一个位置，垂直方向这个位置的话，其实现在你再用那个烂氦的横高去设置就不好设置了，因为它整体来说它是两行，它是两行，所以这回设置的话，我们就直接用margin去设置了，但是我们用margin去设置之前呢，我们先看这。

呃，这个字实际上它咱们先设置这个距离吧，上下是不是应该会有一个这个有一个距离啊，哎，有个距离，这距离是多少。距离是多少，我这没有标，没有标我大概量一下啊。

它的一个距离呢，我们看上下应该是一个20个像素，那20个像素我直接让这个I呀，设置一个margin top来什么呢？来一个20像素，那这样它就整体干嘛呢，整体就往下走了，往下走以后这个，哎呀这个图标稍微有点小，有点小，我们单独调整一下它的方size，把它的方向再调大一点，比如说我调成20个像素，我们看看效果。20个像素基本上是合适的，对吧，基本上合适的，那这样就没问题了，然后的话，这个字的话大小，这个字又稍微的有点大，字稍微有点大，我们把这个字单独调小一点字，我们来一个14像素来看。14，那12呢，哎，12像素应该是一个比较合适的啊大小，那这个样，这个整个这一块就完事了，然后的话，这个字跟它之间会有个距离，有距离，我们再给它来一个margin bottom，这个距离不是特别大，我觉得十个像素可能都有点大，十个像素有点大，那我们就来六个像素。

六个像素也。嗯。我们来看一下啊，这个这个玩意儿有问题啊。什么问题啊，你看这个它这个东西调完了以后，这个整体是不是往下往下沉的太多了，我不写的时候看跟哪啊，不写top的时候，它是在靠上特别靠上的位置，但是我如果设置一个20的话，它整体就沉的太多了，所以应该是我那个距离。我想一下啊。Margin top我们看一下啊。这个下边这个太靠下了。这个Li这么大个，你看一下啊。哦，下边这Li等于是已经溢出了，我说怎么这么这么这么这么别扭呢，对吧？Li Li的大小，Li怎么这么大个，Li是一个76乘以104，它不应该这么大呀，Li是76，应该是84啊，高度应该是84，现在等于它的高度变成了104了。

LI104谁给他设置的，我们看一下样式啊。Float left。他这104是哪儿来的？哦嗨，又是那个老问题，什么问题呢？我们现在是给那个I设置了一个这个块元素，然后给它设置一个top I是A的子元素对吧，是A的子元素，所以这个时候你这设置完了以后啊，Top导致这上边距折叠了，上面折叠了以后现那就等于你这个20像素给A了，那给AA就往下走，A往下走就把这个把这个什么呀，把这个Li就给它撑开了啊撑开了所以导致Li的高度变高了啊是我们这个高度啊外外面去折叠一个问题，这个问题的话，我们可以一种方式，我就可以直接给我们的这个A呀加可fix，那你这一个个加还挺麻烦的，我不加了啊，一个加挺麻烦的，我们用什么呢？我们用那种方式，我们是不是还有一个BFC啊哎，我们直接来一个overlo黑的给它开启这个BFC，这样你看这个位置是不是就非常完美了，哎，非常完美啊，所以出现问题的时候别着急啊，慢慢去调一下好，那基本上我对这个位置的话就已经停。

这位置我觉得还挺好的，然后我们再看看原网这效果动以后它是变一个色，变一个白色，所以我把这个设置。后位的话，我们就直接来一个他。CTRLC我们直接来一个ho后以后呢，我们它变一个color color变成一个这个井号，一个FF啊变成一个白色的啊这样效果，然后我们再移动，哎，就这样一个效果啊，就很好了啊很好，好这个效果做完了，那基本上我们这就已经完事了，差不多了，但是其实它还有一个比较恶心的东西，什么恶心的东西呢，你看啊这个图啊，你细看的话，它实际上这里面会有一个这个边块了。

看到了吗？哎，这F码通道这儿，你看这儿左右，诶你看上边有一个，左边有一个，下边有一个，是不是有一个边块，哎，有一个边块，这个边块挺缺德的啊，这边块缺德的首先呢，我就挺有意思啊，以前小米这个边框不是这样的，以前小米这个边框呢，它是什么呀？它上边上边是没有的，左边也是没有的，就说它只有什么呢？只有中间这块有啊，只有中间块有诶那现在不知道改版以后它为什么要改，改成这样是吧，也就是说上边有，上边有，上边有，左边有，左边有，左边有，这个中间有，中间有，中边有，但是什么呢？右边跟线儿没有是吧？它这个设计风格很奇怪，我觉得它原来那个设计风格我觉得还可以接受，这个东西就设计的有点有点难看了，所以小米这个改版啊，我可能感觉小米这个前端工程师这个待遇现在不怎么样了是吧，这设计就是肯定很丑是吧，包括你看上面下载APP，这APP这个三角啊，你看他那原版这明显是偏的对吧，明显是偏的，也不知道怎么想的是吧？诶所以你看啊，它不一定某一个网站它做的这个设计就好啊，做的设计就好，所以你。

可以看一下它有什么问题啊，有什么不好的地方，就包括这块用这个这这个这这这个这叫什么玩意儿，叫这个雪碧图，都是稍微有点麻烦啊，稍有点麻烦，所以你看的时候一定要，哎就是有想法是吧，哎，他做的怎么样啊，到底好不好，哎有一个初步的一个想法，好，那我们现在不管他了，我们就实现它这个边框吧，哎，那就假设它这个边框实际上实长得不好看，但是实现起来比之前那个版本要要简单一些啊，要简单一些，那我们现在来看一下它那个边块挺缺德的，缺德在哪儿，缺德带它不是边块，它不是边块，为什么呢？你看这边块，我这元素是不是这么大个啊，这边块是不是左边缺一块，右边缺一块啊，如果我们用这个boder，这个东西实现不了，因为我们的boder是不是必须跟我们元素是一边宽的呀，哎，所以这里边你用boer根本就实现不，所以它的这个边框，它实际上不是边框，包括小米官网那个也是一样的，它实际上是通过一个元素整的元素，诶我宽度这一设定。

宽度设定完了，然后干嘛呢？哎，然后我这给你整一个这个高度就一像素，然后设置一个背景，那这个边框是不是就出来了，哎，这个边二出来了，所以它这个东西并不是通过这个边框去设置的，而是通过一个元素去设置的，那这里边其实就是通过什么呢？我们最简单的方式就是通过这个伪元素来设置啊，就是通过这个伪元素来设置什么？思路很简单，我们拿A举例子。呃，我们这个边框我想一下，我是给A设置，给LY设置，给A给LY都行，我们给LY设置吧，因为这个A干的事太多了，我们给LY设置第二一个这个shortcu shortcut里的LY，呃，我们先来什么呢？诶冒号，冒号一个before啊before的话就选中了它里边的所有LY，我们在这儿先来设置什么呢？我们先来设置我们这个上边块，上边块的话，那我们这用了一个笔before，那我们这content来什么呢？我们content来一个空串，我写一个内容吧，写一个内容以后，你看我这count的这个是不是就跑这来了，哎，就跑这来了，当然你这不需要加内容，你给它去掉就行了啊，去掉就行了，然后整个这块的话，那这个块你肯定得需要去进行定位的啊，肯定需要定位的，所以在这我们给它来一个这个position，哎，Position我们来一个这个a salute啊，给它开启一个定位，然后的话，它的宽度我们可以试一下，我们可以整宽点宽度，比如说我来一个50像素啊，当然比较窄了，Hi的是一个一像素啊，然后background。

我们来什么呢？我们来一个这个red backgroundg color，我们来一个red，那这样我一写，你看这上边是不是就出现了这样一条边框，哎，所以它的方式也也比较简单，当然我们现在这个长度不够啊，长度不够我们还需要调整一下它的一个，它的一个长度啊，它的一个长度，这玩意儿多长啊，哎呀，没量没量没量没量没量，我们现在量一下啊。

上边儿这个边框儿。哎，注意你量的时候啊，你要把这个图片调成这个百分百的比例，不然你用这个截图工具量啊，你量的是不对的啊，或者其实你也可以在这个里量也行，你在量。你看是不是应该是这个。把它放大一点啊，在Photoshop里量，Photoshop量的比较准确一点，我们量一下这个边框的一个宽度啊，横向这个边框，这个边框的宽度应该都是一样的，哎呀呀呀呀。宽度是一个。这眼神儿不太灵。

64像素应该是刚才我看。哎，宽度是一个64的像素啊，那64的像素呢，在这儿我们就怪，我们就写一个64 64的话，颜色的话，我们也吸一下它这个颜色。颜色是一个这个色儿。诶。665157。颜色设置一个这个色，然后诶井号没写，写上井号，然后这个时候我们的颜色就已经出来了是吧？哎，你看我这上边块是不是就已经就已经出来了，诶这这这这。哎，你看上边这个也在这儿呢，然后下边这个在这个位置对吧？在这个位置，当然现在它的位置是不对的，我们还需要调整一下它这个位置，因为我们这已经给他开了绝对定位了嘛，对吧？绝定位调整位置，那这个时候我们绝对定位，同时我给Li开启一个相对定位，那这样的目的是什么？这样的目的就是我们要让的每一个边框都相对于它自己那个LY干嘛呢？相对定位啊，所以这时候我们定位，你定位起来也好定位了，你不用一个一个定，你这样的话统一来定就行了。首先这个边框应该是在我的这个，我先写上吧，我们应该是一个至少你得是一个left的零，然后是一个TOP0，对吧，那这样它就跑到我们这个整个这个框的一个这个左上角了，对吧，左上角了，然后整个这个框你得是需要在那儿去居中的，对吧，居中水平方向你得居中，呃，水平方向居中的话，其实我直接来一个mardu。

Margin，我们来一个这个垂直方向零，然后左右是凹凸，这样一刷新。看看能不能居中啊。诶，他没居中过来没居中过啊，我没写RIGHT0啊，Right也得写个零啊一保存诶那这样它是不是直接就在那居中了啊，所以这一块我们就哎就不用设置了啊，也省事了，那好，那这一块我们设置完了，然后我们这个top的距离啊，上边这个边框你看在这边上基本上看不见了，所以在我们图里边这个边框的位置基本它是往下往下移了一些啊，往下移了一些，但是这里边我不去设置那个top，为什么不设置top，你要注意啊，它这个图比较有意思，有意思哪儿，你看啊，我整个这个高度是七十一百七对吧，整个高度是170，但是我每一个这个框的高度是多少，是84，两个框是84，哎注意这个84是算是边框的高了啊，是84，那这个时候我整个是一百七上下两个框，高度是两个84，两个84，那就是一百六十八一百对吧，168，那也就是说实际上它这是不。

这差了两个像素，哎，就是说实际上我们这个框啊，它没有把这个元素给撑满啊，没有把元素撑满，所以这个时候呢，我可以直接给上边设置它多了两个像素嘛，哎，我可以直接给上设置一个两个像素的拍顶回头往下挤就完事了啊，所以我们找到这个谁呀。

两个像素或者一个像素，看它的距离是多少。两个像素啊，两个像素的话，我们就直接给我们那个他们的那个副元素，副元素是是是是是烧的这个ul对吧，Ul的话我们给它加一个pading pading的话我们来一个pading top padding top加一个两个像素整体往下挤啊往下挤那高度减一下，高度变成一个168，一百六十八一保存，这样是往下走了，哎，那这样这个边框你就能就能看出来了啊，就能看出来了，这这这感觉有点有点浅呀。啊，原版的也那样对吧，原版的也那样有点浅啊，当然你觉得浅的话，你可以把颜色调深一点，我就不调了，咱们跟原版一样就行了，然后现在我们是不是通过笔four我们就实现了这个上边框，哎，上边框，然后再看图的话，我们还有一个什么呢？我们还有一个这个这个边框是不是这有一个，这有一个这有一个，哎，你看这边没有，所以这很明显，这都是一个左边框，对吧，这一个左边框，那所以呢，我们再用这个after，我们利用after，我们来设置我们这个左边框，左边框的话，我们这直接点一个a dad，这我们来一个这个short card，然后还是Li左边框，我们就用一个after就完事了，After其实代码啊，上边都一样啊，上面都一样content，然后诶别别进群content，然后absolute absolute完了以后，我们在这要要给它设置高度对吧，高度注意啊，横向的我们设置宽度高度是一，纵向的我们设置高度宽度是一啊，你要注意它是谁是谁两。

看下吧。多少是一个71啊。70啊，七十七十个像素啊，我们这一个hi是一个70像素，然后我们这个Y是一个一个像素，颜色跟它是一样的啊，颜色跟它是一样的，哎，但是它呀不好看，我们这不好看出来啊，我们先改一个red，待会再改回来啊，这一保存这边框就出来了，哎，当然现在这个位置全都不对，全都不对的话，它是左边块，左边块我们应该是一个TOP0 left也是一个零，预保存就上去了，对吧，上去了，然后它应该是一个垂直居中，垂直居中的我们再加一个包M0，然后我们来一个margin margin上下是凹凸，左右呢是零，这样一保存就达到这么一个垂直居中的效果，然后还是同一个问题，这一块左边是不是也会有一个贴的太死了，还是看我们这个图，它也是啊，也不知道怎么想的啊，里边设计师啊，还是前端工程师啊，设计的东西，当然可能可能人家有这个更高级的想法，咱们想不到是吧，但是我觉得这设计的挺挺奇葩的是吧，那这里面我们来看啊，它一个宽度是76啊，每一个小。

块的宽度是76，我这个大块的宽度是234，对吧？那我们来看看76乘以一个三，76乘以三三六十八，三七二十一是不是一个228呀，而整个块是234也是，也就是说我这三个块并没有把它给撑满对吧？并没有把它给撑满，富裕多少啊，二百二十八二百三十四是不是富裕了。

是六吧，哎，赋予了六个像素啊，六个像素，所以其实我们实际上这个块在这个框里并不是一个居中状态，而我们这是有一个距离啊，哎，所以在这儿我们把这距离给它加上就完事了，六个像素，这如果我设置六个像素，感觉有点大，我们量一下啊。我这还说六个像素大呢，他这直接给你扔了一个什么呀，他这直接给你扔了一个12个像素，我这算错了吗？这是三七二十一，三六十八，228 228确实差六啊，他这如果加了一个12的话，那这块偏的不就更多了吗？

But that。我要测一下啊，我感觉我不太相信，我的眼睛都。哎呀，太奇葩了是吧，奇葩奇葩吧，那这样我们我先用一个六看看效果啊，我先不按他这个来，我们这再来一个paing left啊，还是给我们这个ul加它left，我们加一个六个像素啊，六个像素，呃，六个像素以后的话，我们234减去一个减去一个六，这应该是一个200。28对吧，228这一保存六加八是四没问题啊，这一刷诶大家看效果，一刷新这个位置是不是就还可以了，哎还可以，我就不按他那个来了啊，可能我截图截的有点问题啊，不按他那个来了，颜色改过来。保存一下。那么整体来说，我们这一块就已经给它设置完了啊，所以这里边的边块实际上我们利用的是一个after，还有笔缝那个伪类来设置的啊，尾类来设置的，那么整体来说我们的这个整个的一个小米这个首屏，我们就算给它布局完了，你看基本上和我们这个官网是是基本上是类似的，对吧？但是下边这部分我没写，但是我们说窄平情况下是吧，你不能宽了，宽了它是这样的啊，它做了一个这个媒体查询，我们这没有媒体查询，所以现在我们先不管它了，所以基本上就就一个模样对吧？基本就一个模样啊，那这个相似度还是还是挺高的对吧，还是挺高的，但是上边这个边距好像稍微有点大，看它有点有点往外长了啊，但是整体的相似度还是哎非常好的，所以这个练习如果你能独立做出来，或者说你至少你跟着我的思路，哎，你可以很熟练的做出来，那你这块证明我们之前学的知识，包括至少布局这一块，你的问题是不大了啊，问题是不大了，所以这个练习也是非常的典型，所以呃。

也是建议你先不要着急往下学，这个练习自己下边呢，可以花费个一天两天的时间，自己多做两遍，你看我讲，我还讲这么半天，你自己要做可能要做更长的时间，所以我建议你要自己干嘛呢，自己。

多做几遍啊，自己多做几遍，然后的话哎多练习练习，有什么问题的话，多看个视频，跟我视频里去对比一下，然后哎查查是吧，哎尽量把这个练习给它完成，哎，而且最好有一个比较好的一个完成度啊，甚至其实说很多东西，你像我们这块，哎呀哎呀呀。这刚要说是吧，然后这就出问题了，你看什么情况，现在等于我这个夸，这是不是少一块啊，哎，这个夸现在少一块，哎，那这个框为什么会少一块，那这个就是我们之前提到的一个问题，这个框我们是设计的时候没有给它设置层级，没有给它设置层级，就导致它等于下边元素是不是都比它层级高啊，那比它层级高就导致它有一部分会被下边元素给给盖住，给盖住的话，那这里面我们很简单，给它设置一个这个层级z index，我们叫做一个q r code吧。

搜一下q r code在这q r code。我们给它设置一个层级，比较高的层级，我们来一个z index z index我们来一个也来四个九吧，它也比较高，这一保存，这样再看是不是就不会被盖住了，哎，所以你会发现写的时候也会发现你随着写，写到下边，可能上边有发现新的问题了啊，发现问题解决问题，我们就是在进步，那你最好的话，你不要光把这块写完了，你可以自己在尝试着干嘛呢？哎，尝试再往下写一写啊，往下写写就是只有你自己能写出来这东西才才算你真的会了，你下边其实就没什么难的啊这这。一个块一浮动是不是就出来了啊，一浮动出来了，所以下边基本上也非常的简单，并不难啊，并不难，呃，耐心的写一下啊，一定会有收获啊，一定会有收获。好，我们的项目先说这么多，当然还有一部分知识，我们待会再去补充一下，现在先说这么多，还是你要自己去写一下子啊，写一下子，刚才这个难点就是这个尾尾类这块啊，自己好好的写一下啊，认真的写一下，我们来听一下。