尚硅谷前端基础 (141)

好，那么我们接下来来做一下这个练习啊，那这个练习的话，我们就是我们第一次做了一个移动端的页面，那那个我们就在这里用了一个那个，呃，比较简易版的一个这个VW一个适配，当然肯定要用到我们那个那个less对吧，那个less，然后你就注意啊，我们这块的换算这个值的话。我们先把项目搭起来吧，呃，我们的这个在这，来我们来创建一个新的项目。新建文件，我们来写一个17，这个是一个我们这个移动端的页面。点一个HTM，嗯，代码呢，我们先把结构写出来啊，结构写出来，嗯，这个的话我们改一个标题吧，这个网站叫啥玩意儿啊I艾伦艾。艾多给他翻译一下吧，叫爱学习吧，爱学习是吧，爱学习啊，我们写这么一个网站的话，然后我们搭建一个基本的一个结构，那像这个东西的话，我们，嗯，还是我们既然我们说到要用我们的这个lesss了，对吧，S了，那在这我们先新建一个lesss文件啊，我们叫做一个这个style，点一个这个lesss啊style lesss，那这个lesss我们创建完了以后，很明显我们在这应该去应该去引入对吧，应该去引入我们的这个，诶我这个map没给我出来啊。

哦，是没哦，没写代码了，在这儿的话，我们应该引入我们这个lesss啊，来一个这个link link的话我们这直接诶点斜杠CSS里边的一个这个style.css那像这种移动端的页面，一般情况下我们也不用写那个重置样式表了，就直接让他用它那个，呃，我们就简单重置一下行了，因为重置样式表在我们移动端里的话，呃，意义不是那么大啊，不是那么大，然后的话，我们这儿也需要用到我们这个图标字体，我们也引入一下我们的图标字体啊，CSS我们下边的这个，诶在我们FA下边啊，FA下边一个这个O点一个CSS图标字体引入进来，因为我们要用一下这个图标字体啊，O点一个CS，哎，点in吧，我们用这个压缩版，那这个时候我们这个基本的结构就是这样了啊，然后在这里边我们可以写点代码，我们可以把这个重置代码，然后给写到这儿啊星号，我们来一个MARIN0，然后来一个这个拍定零啊重置代码我给它写到这个位置，那就OK了，然后我们来打开这个网。

直接给它打开啊，那现在就是这么一个效果对吧？我们切换到这个移动端的状态，好，那这个网页我们这现在打开了啊，往这叠起来，我们就在这个IPHONE678里看，或者iPhone叉里边看吧，啊，它是这么一个效果啊，然后的话我们就可以接下来来看一下我们的网站了，网站的话我们先把这个适配给它整完了吧，适配的话，首先我们那里边有一个要设，要给HTML设置一个这个那个那个值对吧？HTML，所以我们来给HTMMR设置一下样式HTMR的方size，方size的话，我们这里边它的那个计算的法则应该是一个100除以一个这个七百七百五对吧，100除以750，然后我们再乘以一个这个40啊40它应该是这么大的一个这个V，呃，V100VW吧，哎，100VW除以750，再除以一个40，那这样他就会给我们算出一个大小来，我们来看一下能不能算出来啊，是不是就是一个5.333这么一个VW，哎，算这么一个数值。

所以就这么一个这么一个公式啊，当然这里边你也可以把这个整个这个设计图的一个大小，你可以给它定义成这个，定义成这个变量，定成变量，比如说我们这来一个叫做de SN design，就叫叫做一个这个叫做一个这个。Total wise吧，Toal total的一个啊，就是我们设计出一个宽度啊，宽度我们这可以写一个这个750啊750，然后呢，你这在除的时候，你就可以直接除这个变量了，对吧，除这个变量了，然后以后你再这除这变量，其实效果是一样的，以后你再你再去改的时候呢，诶这一块。

Total s，它这块我还得加上这个。啊，我这写的是啥呀，我写的是等于号，这应该我们生物变量，它是不是应该是一个这个冒号啊，哎，冒号完了直接除，这好处就是你这个图你可以变，你以后变成125了，你直接这一改就行了啊改改成125，那就直接就直接就跟着变了，我们来看125这个值对不对，诶125也没问题，对吧？你但是就是你总是除以40嘛，对吧？好，那这个是我们说前边的一个搭建，就给它搭建完毕了，是吧，这么一个效果，然后的话，我们整体这个网页的话，它还有一个这个背景颜色，背景颜色的话，我们也可以统一给它设置成背景颜色，我们来吸一下啊，吸这个颜色，背景颜色是一个这个颜色啊，这个东西你也可以给它设成变量，不设置也可以啊，我们直接给这设置一个background color background color，我们来一个井号，一个这个颜色啊，设置上这个背景颜色，然后就是这个效果啊，这里边写个注释啊，这是设置我们这个诶根元素，哎根元素那这儿呢，是设置我们这什么呢？诶设置我们这个re。

啊，Rem的一个比值啊re比值就是说我们这个字体，我们不是为了真正去设置这个这个字体，我们只是为了设置一个这个比值是吧，当然这个40呢，你也可以作为变量图哎，整出去，当然这个这一块整不整都无所谓了，反正我们就用它了啊，然后整个这块就整完了，然后我们来看一下我们这个图。我们的这个图的话，看这儿啊，首先我们这个图，你像这里边的元素，我们先从上边来做吧，上边的话我们先来整这个结构，整这个结构这个就很简单了，是吧，外边整个一个容器，容器，然后左边是一个这个菜单的这个，然后这儿是一个这个标题，这是一个搜索的，那实际上我就是一个容器，里边有三个部分组成啊，由三个部分组成，所以呢，接下来我们这儿直接写结构，在我们这页面这我们来创建一下，这里边我们来创建什么呢？哎，创建我们这个头部的一个容器，头部一个容器呢，我们这儿用一下我们的新标签吧，我们叫一个header header呢，我们这来一个class，我们叫一个top啊top top的话top吧，Top顶部的一个工具条，顶部的一个工具条呢，我们这创建完了，然后再往下，我们这整个分成了三部分是吧，三个部分左边一个我们来写一个，呃，左边一个我们叫做一个class class我们叫做menu menu的一个这个呃，Me。

Nu的一个，我们想一下它是一个图片menu的一个button吧，哎，Menu的一个button，然后往下边一个div，诶这就不能div了，这个是我们一个标题对吧，我们写一个这个H1就是一个标题啊，标题我们class，我们叫做一个这个title，呃，叫做一个这个logo吧，这是应该属于一个logo的一个范畴啊，Logo这个应该也是可以点的，可以点的的话，我们可以给它放到一个A标签，来一个井号，然后里边的话是有字字的话就叫L乐，L乐我们就全都给他中文化吧，我就给他写一个爱学习，爱学习爱学习，然后再往下右边的话是一个这个这个放大镜是一个搜索按钮啊，搜索按钮的话，我们这儿也是来一个这个div吧，Div我们改天来一个class class我们叫做一个SE ch search的一个必填，然后里边呢是一个这个按钮，按钮的话这里个这两个玩意儿吧，你放不放超链接都行啊，你想放的话也可以放一个啊menu button，我就放一个超链接吧。

这里面也放一个超链接，但是这块的话，它实际上本身呢，本身的话它是一个这个。是一是是一个这个按钮，它应该是可以点的，对吧，可以就是它是有一个图标字体的，所以我们这里边我们给他设置这个图标字体，图标字体的话，这三道盖我们来看一下有没有吧，找一下我们这个这个玩意儿，这个放大镜是肯定有的，放大镜应该就叫search啊，叫一个search。

Search在这儿呢，所以我们这直接给放大镜里边我们放一个I标签。这里边我们直接放一个这个I标签，I标签，然后这来一个class，我们叫做一个FA，然后来一个as，一个search，然后这这个三道盖应该有STEM stream有没有啊。哎，在这是不是有一个这个河流，这么一个水流，这么一个形状啊，哎，我们就用它了，那在这里边我们直接来一个这个，哎哎也是一个这个class，我们叫做一个FA，然后这是一个这个哎，Strip这一保存我们来看效果，哎整个这三个的结构我们是不是可以整出来了，哎整出来这个结构以后，我们再给它设置，我们就可以直接去里面去写这个样式啊，写这个样式在这儿我们来一个个写，首先的话，我们这三个玩意儿应该是一个横过来的，横过来呢很简单，我们整个容器应该是给它设置一个。

设置一个这个，诶用我们一个弹性盒，把我们容器是不是设置一个弹性盒就完事了，哎设置我们这个头部的这个，哎头部啊这个hier hier的话，我们这个类的话，我们起一个名叫做一个top，一个雪没写bar，哎top bar我们叫做一个top top bar的话，在这里边我们应该是一个display，我们叫做一个flex，诶给它开启什么呢？诶开启我们这个弹性弹性容器啊，我们这来设置我们弹性容器，设置弹性容器，然后以后我们会发现这三个玩意儿自动就横过来了，横过来以后你设置完弹性容器，实际上这三个玩意儿它是有一个高度的，对吧，我们把高度给它定了，高度的话我们来看看。高度的话，它是一个175个像素，所以这里边我们来设置高度。设置这个高度，高度是一个hi的是一个175，不要忘了除以一个40啊，170像素，高度给定下来，高度给它定下来，然后看它，实际上它也整个会有一个宽度，你看它的宽度，基本上我们整个所有元素，其他是不是都这么一个宽度，宽度是一个多少宽度，它这是一个六百六百九十三是吧，找这么一倒霉数，倒霉数倒霉数吧，我们直接给它写上啊，这还来一个设置宽度，设置我们宽度，那这个宽度的话，我们来写上啊，我们直接来一个这个Y啊Y呢，我们来一个这个，那是多少的呀，693 693除以一个这个40像素啊，40像素，但是这个宽度的话，实际上你会发现我们不只是它下边这些是不是都是这个宽度，哎，都是这个宽度，那既然是这样，都是这个宽度，那我干脆就把这个值给它提出去啊，给它提出去，那这个是我们的一个这个呃，Center吧，Center的一个外啊，我们中间居中的一个。

的宽度应该是这么一个值，那这个时候我要用它的话，我直接去引入就完事了，我就不用再去再去算了啊，每一次都用，然后你改的时候直接一改也就行了啊，那宽度我们这这应该是rem啊re这也是re啊，都写写习惯re这一保存，然后整个这个宽度是不是也都给它定下来了，哎定下来以后的话，宽度是定下来了，但是它这块还得有一个这个哎居中的效果，因为它得是在这个，在这个中间啊，在这个中间，呃，在这个中间的话，我们。

我们应该直接写一个什么呀，我们这不这么写了，那这么写就麻烦了，我直接写一个类叫一个W，叫一个W的话，我这直接把这个样式呢，给它写在这儿啊，写在这儿写到一个这个Y是一个这个值啊，是这个值693除以42EM，然后呢，还得有一个居中，居中的话，那就我们这直接就来一个margin，来一个零，然后来一个凹two，它自己然自然而然就居中了，对吧，我们把这W写上，写上以后呢，这我就不用写了啊，然后这儿我直接让他对它进行什么呢？扩展冒号，我们直接来一个这个ex extend ex TD X extend，谁呢，X extend，我们这个叫做一个这个点W啊点W对我们这个W这个类进行一个这个扩展，那这样直接扩展以后的话，你以后实际上在用，它实际上生成完这个效果，它实际上用的就是一个这个选择器的一个分组。

对吧，直接选择题分组，也就是说都会在这儿自动去应用啊，自动应用好，那我们这儿写完了以后，整个这块就出来了，出来了以后，嗯，然后的话，我们就可以让它内部，内部的话，它这个排列排列效果的话应该是你看啊，我们它这个图排列效果应该是，诶它是不是这儿有距离啊，然后两边是没有距离的啊，两边没有距离，只有中间有距离，那这应该是我们叫做一个那个用那个justify content啊，所以这个是来设置我们这个对齐方式，对齐方式我们这应该用的是一个justified，一个content，我们应该用的是一个这个space，哎，Space比between在两个之间有这个空格，然后一保存这个距离是不是就出来了，哎，就出来了啊，并且在这儿的话，它需要是一个这个是一个这个垂直，垂直居中，垂直居中的话，我们就来试试我们这个吧，我们叫做一个这个line的一个这个一个这个content。

一个我们直接来一个center，它做一个垂直居中，哎，那整个这个距对齐是不是就下来了，哎，所以你会发现用这个非常简单啊，这是设置我们这个辅轴的一个对齐方式，然后整个上边是是不是就出来了，哎，出来以后我们来设置它的字体，字体的话我们直接在这里边写了，我们要设置里边它的字体的话，就是这些A的样式，对吧，A的样式，A的样式的话，首先的话，我应该把它这个下划线text directionration，我们应该给它去除掉，而且这个下划线吧，应该所有都没有，都没有的话，我们把它写到外边，那这样就直接所有的A的下划线就都没有了啊，然后在这儿我们再单独给它设置一下，呃，颜色呢，我们来取一下颜色的话，中间这是一个黑色的。

中间这应该就是一个纯黑色的，我们来看一下就是诶。还不是一个黑色，要是翻蓝这个颜色是吧，所以我们就直接写一个这个color color我们来一个井号是这个颜色啊，这个颜色，然后呢，大小呢，我们可以量一下大小啊。是一个50个像素啊，50个像素，那我们这儿直接写一个这个fo size啊，Size是一个这个50像素，但是你这么写的话，牵连会比较广，会把这两个玩意儿也带上，很明显这两个这两个东西是不是没有那么大，哎，这两个我还得再去调整一下，这个呢，是字吗？这个不是字了，这个就是一个图标字体了，我们直接吸一下颜色吧。洗脸好洗脸。诶颜色就是一个999对吧，999，那这里面呢，我们直接给谁设置呢？这个应该是我们A里边的一个I标签对吧，A里边的I我们直接给它卡了来一个井号，一个999，然后自己大小也没有那么大，它大小呢，可能我觉得14个像素可能就就可以了。

这一保存，哎，14有点小了，14有点小，我们来一个这个18。嗯，那就来个16，哎什么一下。这个字50是实在是有点儿太大了啊，50我们调那个数应该不准，我调小一下，可能也是我中文的原因啊，我把它调成这个三十三十吧，30。哎，三十三十六呢，哎，这样的效果我觉得还可以接受是吧，我们自己把这个结构给它调整一下，哎呀，这爱学习实在是太难看了啊，行吧，我们就直接自己设计，我们自己优化一下完了啊，用中文就用中文吧，那整个我们这一块就是不是就就完事了，哎，整个我们这个头部就完事儿了，头部完事以后我们再往下接着做，头部往下呢，下边有一个图，这个实际上呢，应该就是一个什么呀，应该就是一个这个轮播图啊轮播图，所以这个也好做，我们直接把这图给它干嘛，诶给它切下来就行了啊，我们来选中图层，自动选择选中图层，选中这个图，然后直接按照out点这个眼睛，我们是不是直接把这个图给拿到了，哎，然后直接我们来一个图像，图像来一个这个裁切，把这个图呢给裁一下。

诶给切出来以后，其实也会发现问题，这图像啊，它上下带白边了，带白边的话，我们还不能这么玩了，你这么玩以后，到时候你一保存的话，把那白边一块也给它存出来了，那你我们就干嘛呢。切一下。用我们这个选择框给它选一下啊，从这个左上角这选一下。上边应该是多选了一个像素，待会我们再切一下。

对吧，多选了一个像素，我们给他。猜一下。诶裁一下正好截这么大，我们点的是，诶我们把这个什么呀，它后边有一个透，有一个白色背景，把这个背景给它去掉，然后点击这个图像，图像呢，我们这有一个这个裁切直接给它，诶不是裁裁裁裁切去了，裁剪裁剪给他裁一下，然后呢，我们就得到这么样一个图片，图片呢我们给它保存一下，其实这个图片的话也不太好啊，我们直接文件。导出哎，存储为哎，我们直接快速导出PNG吧。导出BNG，我们到桌面上，我们叫做一个这个呃叫banner吧ban banner点一个PNG把图片给导出来，然后呢，这块我们给它拖进去，在我们这个img下，我们新建一个文件夹，这是我们第17个了，17个了的话，我把这图片给它放进去。

好呃，这个图片我们切出来了啊，它这图片本来默认设置一个圆角，其实这圆角我们按理说不应该切的圆角的话，我们应该直接通我们样式设置它加这么一个圆角，其实还还挺大的，那这里边我们就切了，就切了吧，以后写别的时候我们可以就考虑就可以不用切了啊，然后往下再看图片切完了，然后这图片上边的大小你也定了，图片也好定图片把它宽度一定，是不是就完事了，哎，那在这里边呢，我们在这个头部就完事了，下边呢，我们来创建一个这个div点一个ban，叫做一个banner banner里边呢我们放个超链接，超链接里面呢放一个图片啊，它是可以点的一个图片，对吧，我们这是一个这个点。Img下边的一个这个17，下边的一个这个banner，点一个PNG，我们这一保存，然后在这儿我们这个图片就已经出来了，当然很明显这图片肯定大，因为我们说了它本身是一个二倍的，对吧，它肯定会大，但是我们要调整，那这里边这个图片我们这儿就非常的简单了，我们这来设置什么呢？设置我们这个BNN呀，设置我们这个banner，这我们直接点一个这个banner BN n呀，Banner的宽度也得是跟它一样，所以我们这直接来一个这个extend，诶扩展这个点W，那这样banner的一个宽度就可以确定了，啊可以确定了，确定完了以后实际上图片还很宽，它就会溢出，那这里边我们直接设里边的图片外，给它设置一个100%，100%以后的话，它就应该正好跟它一边宽了。

诶，那现在我给它设置百分百，它并没有生效，我们来看看这个样式哪出问题了。选中一下这个图片，图片外边是一个banner class ban banner啊，这还banner.top bar了，没有top bar啊，直接是班字冒号寸，这样我们这个图片的位置是不是正合适了，哎，正合适了，那这样我们上边这一两个部分是不是就就完事了，哎，就完事了啊，然后再往下呢，再往下呢，是我们的一个这个非常简单的这么四个块啊四个块呃，等于是我们四个项嘛，你看这是买CAS买就是我的课程啊，我的课程我调小点吧，我们直接就能看了，反正老切来切去的还挺麻烦的，那这个呢，我们来看一下这个结构啊，这也放这。

把它先点出来。你往这边去看这啊这个结构的话，我们这个啊写个注释，这个是我们这个班的下边的这个是我们的一个等于是一个菜单吧，对吧，菜单，所以在这儿呢，我们直接给它加一个这个navy吧，Navy navy的话，我们给他一个class，我们叫meu啊menu，这个navy里边呢，有四个菜单啊，有四个菜单，四个菜单呢，实际上我们就简单点，我直接写四个超链接就完事了啊，四个超链接，四个超链接里边有名字啊，那第一个我们叫做我的课程，我的课程，然后第二一个叫做一个star teachers star teachers我们叫一个哎，明星老师。

哎，明星老师，明星老师啊，然后明星讲师吧，哎，讲师，然后再往下的话叫做一个sub subscriptions这个是这是啥意思，我们下边写一个叫做我的我的我的下载。Subscript突然把这词这个意思给忘了，我们搜一下。Subb CR subscriptions这个词的意思是哦，订阅是吧，哎，订阅，那这个呢，我们就直接写一个这个什么吧，写一个我的订阅。

啊，我的订阅那大概我们写这么四个内容啊，写这么四个内容，然后你要注意它里边实际上是有这个，呃，有这个小图标的，对吧？有这个小图标，有这个小图标的话，我们这儿直接把它我们想一下啊，小图标我们用不用给它单独的，哎，也不用，我们直接给它放就完事了啊小图标我们直接写一个什么呀，直接写个爱标签就行了，爱标签呢，我们这直接来一个爱，这是一个book是吧？Book我们来class看看有没有book。Bookk book，哎，Book是不是就这玩意儿啊，FA一个book，其实我们随便选俩就完事了啊，不用那么麻烦，FA我们这来一个这个FA的一个book，然后的话，它们每一个颜色不一样啊，每个颜色不一样的话就比较麻烦，嗯，我们可以用那个选择器，或者就是那个尾类选择器是吧，或者我们给它加个类吧，Co u SE Co SE我们给它加个类啊，每个都加一个类，然后呢，这个我们叫做一个star STL star，然后下边这个呢，我们叫做一个这个sub啊，Subscript啊，Sub subb，然后下边那个我们给它起个class叫download啊download，当然我们单独给他们设置颜色啊，Download。

OA啊，然后的话，我们每个里边都给它设置一个小图标，小图标啊，我的订阅这儿也是一样啊，我们这儿来写一个小图标，然后呢，这也是一个小图标，我们都给它设置上小图标，设置完了调整一下格式，那基本上中间这个结构就这样了，对吧，比较简单，然后的话我们来看一下网页长什么样子，对网页，呃，这都变成书了是吧？都变成书了也不太好看，换几个图标吧。

嗯，找点儿剪吧。哎，然后这儿来一个这个。写个信吧。还有下来个萝卜打地球。哎，保存那大概整完了以后，效果是这样的，对吧，效果是这样的，然后呢，我们这里边我们就来给他们设置一下这个设置一下样式吧，样式的话我们来看一下啊，首先的话，他们整体上，因为我刚才这个图片应该高度就已经定定死了，对吧？他但是他们整体上这一组整体上是不是应该有一个高度啊，哎，所以把它的高度给它量一下，把它们高度给它定出来，高度的话我们就。来这儿吧，假设是一个三百二十九三百三，我们举个整吧，330，所以这个时候我们来设置它啊，设置这是来设置什么呢？设置我们这个，设置我们这个中间这个菜单，中间这个菜单，我们刚才起个类名的一个menu menu还是让他去ex extend的EXND啊ex extend的那个W。

Exd啊，It对我们W那个类进行扩展，也是让它做到一个居中，然后宽度固定，呃这块写完了，然后我们这里边是，诶它的高度对吧，我要给它写高度来的，高度刚才量是多少来着。量是一个329，所以它的高度就应该是一个329除以一个这个40的一个rem这一保存，然后它的高度我们就已经给它确定下来了啊，高度确定的话，它的位置其实还会有点偏下，然后呢，我们这个每一个框的大小也有，我们要这这这写个注释啊，这来确定我们这个元素的一个高度啊高度然后往下呢，我们来哎设置我们这个框的大小，框的大小的话，那很明显这里面我们这哥们也应该去给它开，哎开启设置我们这什么呀，设置我们这个弹性元素，设置弹性元素，我们这应该用一个display一个flex啊设置弹性元素，然后它里边的是夸呀，不需要弹，其实我们这只是布一下局就完事了，所以它里边的框呢，我们量一下大小，给它确定一下，把每一个框都设置成一个大小就完事了啊，这也不需要弹啥了，所以其实你弹性给它关上就行。

框大小，这是一个。上边多量了一些，量了多少。123多量了三个像素，然后高度多量三个宽度没问题，呃，应该是多少呢？是一个327乘以一个10104。

327乘以一个104这个设计图其实它不怎么地是吧，不怎么地，应该是我们它下边的这个A应该是一个外是一个327，然后327啊327除以40RE em，然后呢，下边我们这个he是一个什么呢？是一个这个104诶除以40RE em 42诶我们学可能会说老师你那里边写的是AA不是行内元素吗？行内元素你怎么也设置宽高啊，诶那注意了一变弹性元素，那这块它就是它就其实就。就无所谓了啊，一遍弹完素，但是我这不应该是点A，我应该是A啊，应该是一个元素选择器啊，一保存这块是不是就给它诶我们来看一下啊。327乘以除以40。Display flex这里边是我们的menu menu里边是这个AA元素的话，它这块呃设置了这个wise has没生效，难道我还得再给它设置一个block吗？也没用啊，不是这个问题，呃这一块我们给它设置了啊，设置完了它没用，你看它这宽度明显不够，对吧？为什么不够呢？因为现在我们默认情况下，我们这个它是不是不换行啊，哎，它不换行，所以他在一行挤着，挤着你就伸缩了，所以它就缩缩不没了，所以这个时候呢，我们应该给他设置什么呢？诶设置我们这个换行，换行我们直接设置一号的什们这个flex，我们叫做一个flow啊，Flex我们叫做一个flow flex flow呢按行排列，然后我们这写一什么呀，哎，写一个rap，哎让它可以去换行，哎，那这样这个距离是不是就拉开了，哎，距离拉开了以后，我们还要分别为每一个去设置颜色，颜色的话我们就来整一下吧。

嗯。诶整一下颜色，首先字体颜色比较统一，都是一个白色的，所以我们这直接来一个color，是一个这个Y的，直接设置白色就完事了啊看效果。

白色，然后呢，Line都已经设置完了，然后我们设置它这个颜色啊，这里边我们第一个第一个我叫做一个castle Co close的一个这个background color，哎，我看一下。Cos啊，Courses课程的意思啊，Cos cos的话，我们这background一个color background color，我们这吸一下它这个颜色。颜色是这个颜色。CTRLC直接来一个井号，然后设置上，然后下边呢，还有一组，还有三个对吧，还有三个233，我们来把这个类名都复制过来，第二个我们叫做一个star star，第三一个我们叫sub，第四一个我们叫download，这没办法，我们必须得单独给它们每一个都分别去设置这个颜色啊，我们来看这个star star是一个紫色的，然后呢，这个是一个subscription，这是一个粉色的，最后这个是一个蓝色的。

哎，蓝色的，然后背景颜色都设置上了，哎，你看这效果就很接近了对吧？很接近了，然后的话，他们还有一个圆角小圆角，我们直接来一个这个borderder的一个这个borderder一个radius，哎，Borderder一个radius，我们应该可能想给它设置一个五个像素，诶那基本上就哎就就够用了啊，当然这一块如果你说我也想这个让他去除以，让他用那个re re去保表示的话，那你就是五除以一个41个re re，嗯，基本上也差不多，那就五有点小了，对吧，那我们就换一个这个十呢，诶设置一个这个小圆角啊，小圆角好，那这个圆角设置完了，然后就是我们的一个这个对齐的问题了，对吧，然后A里边的这东西要对齐，A里边东西对齐的话，我们直接来一个text LA来一个这个center啊，让它去对齐，然后呢。

垂直，哎，它这个我们来看一下这原版，我感觉好像不是居中的。啊，他原来那个不是居中的对吧，他不是居中的，它是一个。呃，设置了个边距啊，设置边距那我们也别让它居中了啊，跟据原本一样，但是垂直方向是居中的，垂直方向居中的话，我们给它来一个lineon ahead lion he的话，我们这写一个也是跟height一样就完事了啊，让它垂直方向的话可以居中，垂直方向居中了以后，它这个距离实际上你看啊，它并没有设置居中，它是干嘛呢？通过是不是给这个图标设置一个是一个marin给他挤的呀，哎，给他挤的，所以我们这在也给它设置marin就完事了。Margin的话，现在这是一个38，这边呢，这边没这么大。这边是一个三十三十二，32，我们尝试着给谁设置呢？给A里边那个I来设置，I的话我们直接来一个marin marin的话我们这个上不要，然后这是上右下左对吧，右边刚才我们是一个32除以一个40的一个re，然后下也不要，然后左边呢，是一个这个38除以一个40的一个re，这样一保存这个边距就给它设置出来了，然后这个位置是不是就就就就挤出来了，哎，感觉我感觉右边这个距离稍微有点大了，上右。

下左，那这个右边我们改成一个诶。怎么感觉这个右边这个距离。右边是一个32，这对上右下左嘛，对吧，我们改一下，把这个距离改小一点，改成30的。嗯，改成一个28。我们这块就给它灵活的去掌握一下吧，掌握一下呢，有点还有点大，那就20了，就近20，哎这么一个效果，然后左边距左边距离我觉得还合适是吧，就这么一个效果就完事。

好，那这一块这一块对齐了，我觉得色有一个不对的。这是一个粉色的这个沙。哎，好，这就对了，然后整个的话，这一块儿我们基本的样子就已经出来了，没问题了，然后在做的事儿，我们就让他们对齐啊，对齐的话我们先说水平方向，水平方向很简单，两边没距离，中间有距离，所以这个时候我们直接找到我们这个flex在这儿，我们来设置什么呢？诶，设置我们这个对齐的一个方式，对齐方式的话，我们这应该是一个flex的一个，呃，我们不叫flex，我们首先是主轴上对齐水平方向，我们叫做一个just斯fact，一个content，我们这个值应该叫做一个space的一个，这个哎，Between，哎，放在这个两端的距离，然后看效果这一刷新，诶，这个距离是不是就就出来了，哎就来了，然后同理我们还有谁呢？我们还来设置我们这个，哎，叫做一个辅轴方向的一个距离，哎，辅轴方向一个距离的话，哎，这个对齐方式，对齐方式那个我们应该是一个叫做一个a land的一个content a LA content，我们也来个space between啊，也是给它分布在中间。

哎呀。但是这一分布感觉这个距离是不是有点有点大了，我们来看这元素的高度啊，Back color，我们给它来一个井号，一个BF，这个元素我们是不是给它设置高了。这个比分我给它度掉，不是我们挤高了是吧，应该就是设置高了，这害的我刚才量了一个329量，哦对了，忘这事了，我量329实际上是把这儿，把这儿是不是都带上了，哎，但是它上下实际上是有一个边距啊，哎，有一个边距，有一个边距的话，那我们这设置这个space between啊，辅着上space between就不合适了，那我们应该是一个space，一个around，是不是应该合适一些啊，Space around space around，然后把背景颜色再去掉，我们再看效果，这个效果基本上合适了，还有一个叫做space，一个EEVE。

E ly对吧里啊这么一个效果，诶，那这样可能会感觉更好一点，但是我们先这么写吧，Space，我们待会我们在在浏览器端试一下，是在这个，诶手机端我们再试一下，看看兼容性好不好，那这样的话，我们基本上这一栏是不是也就也就完事儿了，哎，就完事了，那其实我们会发现你看写这儿这儿这儿基本上行云流水是把上边这部分就给完成了，哎完成了，所以你会发现当我们有了这个lesss以后，当我们有了这个弹性盒以后，并且再加上我们这个VW适配，我们要写这样一个这个移动端页面，其实整体来说的难度并不是很大啊，并不是很大，然后的话，其实我们差的不多了，对吧，还差我们下边这一部分，那我们先停一下啊，先停一下，待会我们来接着往下来写一下，反正说的时间会有点长了啊，我们停一下。