尚硅谷前端基础 (142)

好来后呢，我们接着往下做啊，往下做下边这一部分呢，我们把这条辅助线啊隐藏起来，CTRLH隐藏辅助线啊隐藏辅助线，那这个的话，它整体上又是这么一块对吧，又是这么一块啊，那由于刚才我们量的时候，其实我把这部分都给上边是量了，对吧？也就是这一块都是上边这块的，那也就是说我们的这一块呢，我应该给它确定到哪呢。哎，我们就直接给它区分到这就可以了，哎，然后下边我们再给它当成编剧再设置就行了，所以呢，我们现在的话，这整个的话，我们看一下这个东西给它起个什么名。起个什么名，这个是我们什么辣list list course就是呃最新的课程，然后这更多对吧，更多，那这里边我们直接给它来个来一个这个div吧，嗯，Div我们给他一个class啊，Class我们叫Co SE course啊Co SE诶Co cos的一个list啊，Cos一个list Co。

没问题啊，SOSE这是我们的一个，等于是我们的一个列表对吧，列表整个列表里边呢，实际上分了两个部分啊，这里边是上边是它的一个标题啊标题然后呢，下边呢，等于是我们的这个，诶这这个某各个项对吧，各个项那标题的话，我们这儿直接给它放一个这个div吧，Div给它一个class，我们这叫做一个title t title的话，我们这儿一共有两个，一个是左边的，一个是这个右边的，左边的话我给他放一个这个，放一个这个别H1 h1太大了是吧，H1上边已经有过了，我们来一个H2。嗯。对HRHR应该是合适的，那这个呢，它应该不是需要你去点的，所以它就是一个内容，这是一个最新的一个课程啊，最新课程，然后呢，下边那个是一个超链接，超链接我们就直接写就完了啊，超链接我们这直接给它来一个class啊class我就叫做一个末吧，诶more Mo，诶然后呢，这写一个井号，它这是一个英，哎英文对吧，我就直接中文了啊，我们就直接诶更多哎，然后加号完事啊整个这个标题写完了，然后标题写完了，这个整个div是一个标题，然后下边这是不是一个我们那个列表啊，哎，有一个列表，列表的话在这里边我们给它整个放一个div，叫一个class，我叫做一个it啊it，也就是说我这一系列整个它是叫做一个这个it啊it，然后里边的每一个div，我给它起个名，叫做一个I it，或者这个我们叫it list。

叫做一个item list啊item list然后里边的每一项我叫做item啊item，那这个里边啊，我们写一个，这写一个注释吧，这个是我们的课程列表，课程的一个列表，那这个呢，是我们的一个列表的一个标题啊，列表的标题再往下下边呢，这个是我们这个呃，列表的一个容器啊，列表一个容器，然后里边我们有列表有一项一项对吧，我们先写一个啊，我们先写一个，那其实写一个就都出来了，对吧？都出来了以后，这个列表的话，它整个是一个容器，我们就叫item item里边的话，它放了第一个是一个这个图片，图片我们给它放到一个div里边吧，Div里边div我们给他要起一个class class这个是我们的一个，这个我们想一下，这叫什么图片呢？

这叫一个。闷吧man闷的一个MG主图吧，哎，我这这这名儿不太合适，应该叫做一个这个。封面是吧，封面，我们看看封面怎么翻译。

我们直接搜索一下啊，翻译我们叫cover啊，Cover翻封面我们叫cover吧，Cover啊，所以我们不知道的名我查一下啊，查一下cover的话起这个，然后这里边我们要需要放一个这个img，放一个图片，然后的话，下边的是我们的一个这个课程的一个标题对吧？课程的一个标题，我们这儿给他来一个这个H3 h3给他来一个class class我们这儿叫做一个Co Co course的一个title啊，Cos一个title，这是我们课程的标题，这个叫什么呀？Photographer一个course就叫做一个这个摄影课程啊，摄影课程，摄影课程的话，然后下边呢，就是我们的这个这个这个这个头像了，对吧，头像的话，在这我们直接给一个div div的话，我们给他一个class class我们叫做一个user的一个音符啊，因为它是显示一个用户信息嘛，用户信息它分成了两部分。

一个是我们div，我给他放一个图片，Class，我们叫一个avatr啊，哎，这是我们一般放一个图像的意思啊，头像里边呢，我们就直接给它放一个MG吧啊MG，然后这里边呢，还有一个div，我们来放它的一个这个名字啊，Class我们叫做一个username啊，Username或者叫nickname吧，它的一个昵称啊nickname nickname呢，这里边我们写一个名，随便写一个吧，写一个写一个谁呢，写一个写写一个随便写一个人名，写一个令狐冲，哎，令狐冲，然后这写完了啊，我们这补个注释啊，这个呢是我们的一个封面啊封面，然后下边呢，这个是我们的一个这个小标题，哎，小标题，然后下边呢，这个是我们的一个用户信息，用户信息，然后很明显我们现在差了两个图片，一个是这个图片，还有一个这个图像，这个好切，我们直接切一下就完事了。

选中图层，然后摁着out，就留它一个，然后直接这个图像，图像裁切这一切，诶你看就剩它一个，整个它是不是还有一个边啊。他这个图片啊，都这么哎，都这么缺德是吧，都给你留一个边，都留一个边，我们自己切一下吧。所以这个图啊，不是一个比较好的一个设计图，很多地方设计的是有问题的，因为我这个图也是也是从网上去。随便转一下这么一个图，所以你们在用图的时候，其实还是啊，我们练习呢，这里面并不是说，哎，主要我们这个练习本身它有多重要，还是通过这个练习啊呃，来练习来对我们之前的那些技术点做一个这个巩固。行了，就是它了，诶图像我们给它裁剪下来，裁剪出这么一个这个图片来啊，我们就裁一个就完事了啊，然后文件我们这直接存储为存储为存到我们桌面上，诶这是PSD去了，我们直接来一个这个导出，快速导出PG啊，我们直接cov叫做一个这个cover。

呃，Cover保存到桌面，然后呢，这个往回退啊往回退退回来，我们这儿还有一个这个头像，嗯，这个头像呢，我们直接给他选一下，我看了一下头像啊，头像呢，诶就是一个圆的直接文件，诶这个头像我们来给它裁切一下，裁一下诶这个就这个就这合适了，这就无所谓了啊，我们直接来一个图像导出一个PD还是啊这个我们叫做一个叫做一个AVA tr avat啊两个图片，然后把它回到之前的状态。然后呢，把这两个图片拿过来。

17拿过来，然后我们就直接给它设置场景了啊，这个第一个img，我们这个这个这个这个cover cover，我们这个是一个这个img下边的一个这个17下边的一个cover.pg第二个呢，是一个这个头像，我们img下边的一个17下边的一个这个AV t.PNNG，那现在我们这个结构就给它设计完了，结构设计完了，我们来看网页显示什么呀，诶是不是显示这么一个情况呀，哎，这么一个情况，然后剩下的事儿就简单了，我们就一点点来给它设置样式就完事了，那下边呢，这个是设置我们这个课程列表，设置我们这个课程列表，首先它这个图里边它的宽度也是这样的，所以我们把宽度呢也给它确定下来，我们叫做一个courses的一个list courses的一个list的话，我们就直接点一个cos list，同样ET也要对我们那个W那个类进行一个扩展，因为它也得在中间去居中，然后的话我们得到的是这样一个效果，对吧，已经贴过来了。

贴过来以后的话，我们要设置那个字还不对，我们先一个个设置吧，我们先设置它这个标题，标题的话，它这里边我们叫做一个title对吧，叫做一个title，所以这里边我们直接写一个点一个title，点这个title的样式呢，首先的话，它这个字儿啊，嗯，我们先呢，首先这两个字它是水平排列的，对吧，水平排列一个左边，一个右边，我们现在是垂直排列，所以呢，我直接来一个Dis play，我们来一个这个flex，诶给它开启一个这个flex flex啊开启一个弹性盒，然后这两个东西就横向排列了啊横向排列以后，它们两个是不是要左右对齐啊，左右对齐我们直接用我们这个叫什么呀？叫做这个just fat content，我们叫做一个space space的一个叫做比比比，Betweenw在他们之间设置一个距离，诶，就变成两端对齐了，然后居中的话，我们应该是叫做一个LA的一个content的啊。

A，呃，拉一个抗，我们这应该也是一个叫做，哎直接来一个什么呀，Center，哎居中对齐嘛，哎这样哎呀。居中，他这儿还没。Alan content啊，应该是我们写错了，应该是Alan it对吧，对齐那个项LAN it，诶那这样我们就达到了一个居中对齐的效果啊，这两个我们就给它对齐了啊，这个我们是设置什么呢？这个是我们这个主轴，主轴的空间啊，然后这个是我们辅轴的一个对齐方式啊，辅轴的一个对齐的一个方式，好，那这一块我们就都设置完了，都设置完了以后，我们再设置一下它的字体，字体我们这是分两块，一个是我们HR的，一个是HR的，还有一个是我们这个A的HR这个字体呢，我们来看一下这个字体整整体来说呢不大。不大，整体来说它是一个33像素，33像素是一个这个颜色，CTRLC33像素，我们看一下刚才我好像哦，哪有东西写错了。

你看我这个A，我这个字体，我这儿还写的是一个这个36像素对吧，36像素开始我记得我量的是一个50像素，50像素我量完了以后，我说说有点大是吧，为什么大呢？因为我这没有除以什么呀，40我这应该用的是re啊re。Re，是不是应该是这个效果呀，哎，这个效果这同样也是你写16，你写多少都好，这应该也是一个re，哎，除以一个40的一个re，诶，刚最开始这个单位我们写的时候出点问题，出点问题二审。再来一个这个50像素啊，50像素，哎呀呵，那这样的话。40。好，这样就处理完了，处理完了以后，它其实呃这对齐它有问题是吧，待会我们要处理啊，这有一个bug，待会我们处理它，然后我们先把这下边写了，不然待会又忘了，H2的话，我们这是一个大小，是一个这个33个像素，这里边我们直接写一个fo size fo size是一个33除以40，然后我们这是一个rem，这一保存这个字体大小设置上了，然后颜色的话是这么一个颜色复制过来。

复制过来，我们这直接来一个color，然后井号给它一粘，哎粘过来，然后这个颜色我们也也有了啊，颜色也有了以后的话，它还有一个小的特点，它左边这还有一个这个有一个小边框对吧，有一个小边框，这边框我们好设置，直接给他设置上就行了，这边框我们来看一下，应该我看这样子应该是一个一个像素左右。呃，应该就是一个一个像素，我们来看一下颜色就完事了，颜色呢是这个颜色，所以这个时候我给它直接设置一个这个borderder的一个left，一个像素，然后来一个solid，把这边框一设置跟字应该是一样大的，那这样的话我们就给他。

Border life的保存一下。没写什么呀，没写九号这边块是不是就出出来了，这边块出来了。感觉有点儿。有点细似的是吧，能弄粗点两个像素。两个像素差不多是吧，我们给它弄的粗一点，弄得粗一点，然后的话，它这里边等于其实这个东西它是整个给你往里挤了一下，对吧，整个往里挤了一下，我们给它加一个这个Ding pading left pading left的，比如说我就写一个十个像素这块就无所谓了，这种微调地方你写像素也可以啊，然后这样我们这个位置整个是不是就OK了，哎，最新课程有点有点有点有点大了，来一个四个像素，四个像素哎，给他设置一个距离啊，给它设置出来就OK了。

然后呢，这个是我们这个最新课程这块，然后下边呢，是我们右边这个这个。这个更多这对吧，更多的更多，这我们来看一下这块呢，我们来这个字体自己选中一下是一个28 28像素颜色呢，复制一下28像素。SIZE28除以一个40RE rem呢，这里边我们直接再给它设置一个color，是这么一个颜色，这一保存看我们效果，诶这个字是不是也就就OK了，诶就OK了啊，但是注意啊，你像我们之前做这个移动端的时候，做这个PC端的时候，我们经常说是吧，你写完了，你可以给它设置一个后，但是这儿是移动端，你就不要设置后了，因为移动端没有后，为什么呀？因为移动端是通过手指的，你手指怎么算后，后不上，要么就点，要么没点，对吧？所以移动端上没有ho这个问题，所以你就不用管它，那这一块这个标题我们是不是就给它设置完了，诶这设置完了以后，其实这已经完成一大半了啊，完成一大半了，然后的话，我们回过头看一下这个标题的问题，这标题我们发现写完了以后，它整体干嘛呀，整体它这个位置，它是它是整个给你整的，有点是不是非常的靠下呀，哎，并没有达到一个居中的效果，那这样我们刚才用的那个用的是那个那个那个呃烂呃。

烂的一个it斯，等于他这并没有给我们，哎，这个center特啊，并没有我们达到一个完全居中，它可能这个位置稍微有点偏。看一下啊，有点偏，哦哦哦，应该是这个爱学习，这哥们是个什么玩意儿啊，爱学习是一个这个H1对吧，那这应该是H1的问题，因为它这个字H1本身居中了，但是这个H，但是这个字啊，他没有在这个H1里边去居中，所以这个时候我们来看一下这个H1。H1现在是这么大个对吧，H1整个可能是居中了，但是这个字儿呢，并没有在H1里居中，所以达到这么一个这么一个效果，它看起来是一个没有没有居中，没有居中的话，我们来看一下H1，我们怎么给它设置一下，直接给它设置行高就完了，这直接给它来一个拉hat Li hat设置跟高度一样不就完了吗？对吧。

还是我们老方法，哎，以前的手段不能忘，那这样是不是就哎这样是不是就达到了一个这个居中的一个效果，哎这样就居中了。这样就居中了。但是这两个感觉。爱学习是肯定居住。哎，确实居中了是吧，但是视觉上看着还有点别扭啊好，整个这个上边的其他的都做完了，然后做我们下边的，下边的是我们的这个整个这个。这个东西，嗯，这个东西往下看吧，往下看我们这个title完事了，Title是我们的这个标题对吧？Title完事了，下边我们要做的是我们这个item，这个list item list，这整个是item list对吧，整个是item list，那现在我们这要处理的是我们这个item list里边的这个item啊，所以在这儿呢，我们单独给item来设置样式啊，这来啊设置我们这什么呢？设置我们这个课程这个列表的一个项，列表项的话，我们这叫做一个item，没错吧。

是叫做一个item，那这个item list啊，它就不用设置了，直接设直接写行了，Item的话，这里边的话你们看看啊。Item列表项，打开它item，首先整个它有一个宽度高度，宽度高度量一下子就完事了。三百二三二四三二零三二四啊32034，所以这块呢，Y是一个320320除以一个40RE，然后hatight呢，是一个这个324除一个40RE，对吧？这样一保存它的宽度高度就已经确定了，确定了然后它有一个背景颜色，背景颜色呢，我们background color，这个很显然是一个白色的啊，白色的然后呢，它有点小这个阴影是吧？小阴影我们是一个box shadow box shadow，零零，然后我们来一个十像素，然后这来一个RGBARGBA我们来一个000，然后这来一个点三，这都是已经很熟悉的代码了，应该对吧，保存一下我们来看效果，诶整个就出来这个效果，然后有点小圆角是吧？Borderder，这个radius borderder radi呢，我们来一个这个十，呃，十个像素或者五个像素是吧，哎这样哎radi这样我们效果就已经出来了，对吧，整个这个夸效果出来了，但是很明显现在这个图片是比较大的图片比。

它大呢，我们这里边应该给图片设置一个这个img，下边我们给它设置一个这个YY的话应该是一个100%啊，它不能太大，对吧，100%，那这样是不是就就窄了呀？哎，窄了窄了以后的话，我们还是一点一点的处理这个问题，首先呢，我们这个玩意儿也挺大的，是吧，哎呀，事太多了，一个个来吧，我们先整这个，把这个标题整一下，标题的话，我们在这儿是一个卡的Co cos的一个title啊，Cos一个title在这我们直接设置一下，一点一点来，不要着急。

Cos一个title的话，它是一个32像素，字己颜色是这么一个颜色，如果你觉得我做的太快啊，你可以我写一点，你写一点是吧，可以中间停一下啊fo size这是一个这个32像素，32除以一个40是一个re，然后的话，它的color是一个CU color是这么一个颜色。这一保存，然后这个东西就设置完了，对吧，这个字体就完事了，这个字体完事以后再往下呢，是我们的这个头像，嗯，头像的话。

头像的话，首先我们这个头像，我这给他整的，这是不是有点有点太大了，哎，这个字有点大，头像我们先不管啊，头像我们先把这住了，这有点太恶心了，因为上边这我们还还没整好呢，对吧，上边没整好呢，我们一一点点来，不然整的容易整多了，就该忘了这圆角有点大改小一点，然后呢，我们整个上边这块给它整完了啊，然后下边这是一个头像对吧？呃，很显然呢，现在我们这个你看啊，我们包括这个图片也好，包括我们这块也好，它很显然它是离这是不是有一个这个有一个这个边距啊哎，有一个边距，所以这个时候我们把呃直接呀，诶你当然可以用那个弹性盒去尝试设置，当然我这儿呢，我就不想用那个了，我因为它这间是个距离嘛，我们就可以直接通过那个边距去给它指定啊指定诶比如说可以给他指定一个上边的内边距，是不是可以给他把它直接，诶我们想一下。

他这两上下的距离是不是是差不多的对吧。哎，不对，我们还是得需要给它，至少我们两边得需要给它挤一下啊，至少两边得需要挤一下，两边的话这个距离我们来看一下。两边这是一个21。这是一个22，那我们就取个整吧，都是22，所以我们直接给这个容器，就是这个item两边给它设置一个什么呢？设置一个这个，诶拍Ding把它往里挤嘛，Pading的话我们都是一个上下不要左右，是一个22除以一个40，来一个rem，但是你设置完这个pading以后，我整个盒子就可能会被撑大了，被撑大的话不太好，所以我们在这儿给它设置一个box s的话我们直接来一个border box，也就是说现在我这个这个head表示算是边块大小了，那这样我的盒子整个它就不会被挤大了，那这样我们这个图片的效果是不是就出来了，这图片效果出来了，然后我们就可以接着往下调了，下边是我们这个摄影课程，摄影课程也就这样了，然后我们来设置我们这个头像这些东西，诶给它打开头像的话，这明显是有点大了，我们来看一下这个头像应该是多大个头像的话，我们从这量一下。

头像应该是一个42乘以42，哎，42乘以42，所以这个时候我们直接给它这设置一下，我们这个是一个AVA tr AVA tr，我们这直接点一个这个AVA tr avat2，它的Y是一个42除以一个40RE y它是一个这个42除以一个41个re，然后的话height也是一样，也是一个42除以一个40RE，其实这些我们该提变量应该提一下变量啊，这一设置一下，然后它里边的img我们直接设置就完了，Img的话我们直接Y就设置一个这个100%就完事了啊，那这样我们的得到一个东西就是一个，诶其实我是不是已经写100%了，这都不用写了，这一去掉啊，然后这一刷新这头像是不是就OK了，头像OK了以后我们来看一下它这个名字啊，这个用户名。

不户名儿呢，我们给它来确定一下大小。大小是一个24，颜色呢，是这个颜色啊24，呃，这个叫什么玩意儿啊。这个属于那个user in for里边的，我们来看一下我起的叫什么，叫做nickname啊，叫nickname，这我们直接写了点一个，我们叫做一个nickname啊，Ni me nickname，呃，我们这个fo size size，刚才看到是一个24除以一个40，然后是一个re，然后color的话我粘过来了，直接井号这一写一保存。然后看效果一刷新，诶，整个这块是不是就出来了，哎，整块又出来了，然后剩下的地方我们就是一点点调了啊，我先补个注释啊，这个是设置我们图片。

设置我们图片的一个宽度啊，不然不写注释角你可能看不懂啊，补一下注释这个呢，是我们这个什么呢？这个是我们这个课程的一个标题啊，课程一个标题，然后这个是我们这个头像，这个是我们这个头像，然后再往下最后这一个是我们这个用户的一个这个昵称啊，用户的一个昵称，那这样我们就整个这个设置完了，内容的话都设置完了，然后剩下的就是我们细节要去调一下了，首先我们看昵称，这昵称这一块，现在我们这个名字的话，跟这个块它是垂直排列对吧？我们需要它水平排列，水平排列的话很简单，我们外边是有一个容器的，外边有一个容器叫做一个user infer对吧？User infer我们要它水平牌，我只需要把这个user infer干嘛呀？哎，把这个user infer呢，设置我们这个用户信息的一个容器，我们只需要把这个user INF设置成这个弹性盒，直接来一个display。

我们来一个flex设置为弹性盒，它俩是不是自动就浮过来了，哎，自动浮过来了，然后你有可能还希望我们看它的对齐方式，对齐方式的话，我们来看一下，对齐的话，他俩人就是没啥特殊的是吧，居中啊，首先是一个居中，然后中间有一个边距就行了，所以这个就好好整了，所以我们这里边直接设置一个这个什么呀，哎，直接设一个a land，一个it，来一个这个center，它垂直方向是一个居中的，然后给这个头像呢，我或者给这个昵称吧，昵称的话我给他一个margin left margin left呢，我写一个值，写一个值，写一个值，比如说十个像素啊，拉一个距离，这个十有点大了，来一个四个像素啊，给他设置一个距离，这这这种微调的话，你用不用那rem都行啊，但你用了也行啊，用也行，六个小组哎，把这个距离给它设置出来就OK了啊，然后的话就是我们上边这个整体这三个，这三个的话，实际上在我们的图里的话，他们是不。

应该是一个也是一个竖着排列对吧，竖着排列，然后他们上下的距离是不是等于是这是不是等于是一个平分的一个距离啊哎，平分一个距离，所以呢，这里边我们就直接设置一下，找到我们最外层的容器。最外层的容器是谁呀？最外层的容器叫做item item在这儿，Item我们给它来一个Dis display，一个flex Dis display，一个flex，但是它里边就不是水平排列，它应该就是竖着排列，所以我们这来一个flex的一个这个呃，Flex，一个flow flex一个flow，我们这儿设置一个叫做column啊column然后换不换无所谓，就是设1COLUMN就行了，竖着排列对吧，然后他们的对齐方式，我们垂直方向，你就是这是不是有空白空间呀，哎，空白空间给它分配一下就完事了，这里边我们用的是一个叫做一个呃扎不是大体我们叫一个a land，一个content，我们应该是叫做一个这个，诶叫做一个这个space啊，Space我们叫什么呢？那比betweenw的话，哎，当然我们现在看，我估计我设置什么都没用了，诶Eve设置什么都会没用，因为现在我们来看一下吧。

他这块。这个高度这么高，这个高度这么高。我们来看一下啊，这里面这个图片外边是一个div div的话，其实你很明显能看到图片给div下边多了一个边对吧，所以我们把这图片也设置一下，我们给它设置一个这个vertical LA，我们来一个这个top，把它那个边呢给它对给它去掉，哎，边去掉以后这个div，然后这个是H3，这个是我们那个用户信息。用户信息的话，我们会啊，现在我们的主轴是不是纵向的，主轴是纵向的，我主轴对齐，我还用我content，我应该用什么呀？我应该用just，这样是不是就距离就拉开了，哎，这样距离就拉开了，我们来看这是even，我们要是around呢。

样子一吞呢，哎，那看来还是那个even里是一个最合适的，那这样这个距离就正好就对的，就特别齐了，对吧，就特别齐了，好，那现在我们这个整个这个夸也就对出来了，夸对出来了以后，然后看啊，它现在跟这个课程这稍微的有点有点近，有点近的话，我们来看一下，那这里面整个的话，它跟这个课程。你看一下啊，它跟这课程之间是不是也有一个距离啊，哎，也有一个距离，那刚才我们他们的item最外层，Item最外层的话是一个这个list list，也就说这整个是个list，我看一下啊，刚才我忘了list，我有没有整高度list list list。啊，List，我这并没有给这个list设置高度，对吧，我并没有给list设置高度，所以呢，接下来我给list指定一个高度，把它的高度定下来，List的高度呢，应该是我们这个list应该是从哪呢？从这儿上边这个标题嘛，一直到我们这个最底边，我直接给它定到这个位置啊给它定到这个位置，这个位置呢是一个这个高度是一个437 438啊438，那所以我们这个list子的高度，我们给它写上高度是一个这个438除以一个40像素，诶，Re rem的话，那现在的话，我们就等于给我们整个这个容器的高度给它定了啊，就是这一块的高度就给它定出来了，高度定出来了以后，它里边是有两个子元素的，一个叫什么呢？一个叫item list，还有一个叫title，那同理，这里边我也希望给它用一个什么呢？用一个这个弹性盒，直接来一个display，我们来一个flex，设置完弹性盒以后，我们让它干嘛呢？也是让它。

它一个flex flow，然后让它干嘛呢？Column，诶也就是说我还是希望纵向排列，纵向排列我们主要要设置一下它的一个排列的一个方式，还是一个扎斯匹的一个content content的话我们来看一下，它应该是这有距离，这有距离。

那他这个算什么呢？Even里也不是。哎呀，那就不行了。那就不行了，他这要用flex等于麻烦了，因为这个里边我们现在没有适合这种方式，现在等于它后边有距离，它后边有距离对吧，你用even力的话，那那等于那个前边也会出现这个什么呀，因为前边也会出现这个距离，对吧，因为前一个距离嘛，对吧？嗯。Between也不行，那不用flex这块用flex就麻烦了啊，所以我们用的时候你要参考一下啊，别别别确保你这个东西别用完了以后，你这个用起来更更麻烦就不好了，那这里边呢，我就直接给他们设置一个这个什么吧。

这是一个外编剧吧？诶或者呢，诶或者这样也行，这样也行，我把高度调小点，我把高度定到这个位置，定到这个位置大概是一个393个像素，393 393个像素394吧，394。394个像素。394个像素的话，那现在的话，他们的距离我就可以给它放到中间了，我是不是直接设置一个比between，这个距离就出来了，哎，比between，那然后的话我还是display flex，然后呢，我们来一个flex flow，然后直接哎，Flex，一个flow flex一个flow，我们设置一个column，然后呢，这个距离我们是一个这个just side content，我们设置了一个space between，那这样应该这个距离正好就拉开了，对吧？正好拉开了对吧，这个距离就正合适了，然后的话，由于我这个宽度是设置到这儿了，你看他们两个之间是不是还有一个距离啊，所以我再给它呀，加一个下的margin，这距离是不是就挤开了，哎，下margin我就加一个46 46的一个marin bottom是一个46的像素，诶46除以一个41个，Re，那待会儿我再整它的时候，它自动给它挤下去啊，就不会产生干扰了，好，那整个我们这一块就给它整完了，对吧？那同理，我们现在它是不是需要放放多个呀？哎，放多个我们来直接。

复制一下，不再多写了。Item现在我们这只有一个啊，给它叠起来，我这复制一下CTRLC，我们先复制两个看效果，这保存一下看效果，诶复制两个出问题了，复制完两个他们是不是就垂直排列了，哎，那这两个我们同样希望是不是也是横着排列，哎，横向排列，横向排列的话，那我们这个item应该让我们item list也是一个Lex flex box啊弹性盒item list我们这写没写，还没写item list，那我们在这来写吧，第二一个item的一个list item list这也应该是一个display，一个flex，那这样他们就直接就干嘛了，哎，就横过来了，横过来以后呢，其他的点的话就没啥了，对接方式我们都不用管了，那其实还有一点的话，就是需要注意的是我们的这一组，它的标签与标签之间，这个卡片与卡片之间，它是有一个距离啊，所以这个距离我们好办，距离我们直接给它设置一个marin，一个marin right是不是就出来了，哎，Mar right这应该是一个二十二十四，所以我给每一个。

它这个item都设置一个margin right margin right的话，Margin right是一个24除以一个41个re，这个距离设置出来，它之间的距离是不是自然而然就拱开了，哎拱开了非常完美，然后呢，我们就可以来写多个了啊来写多个了，多个的话其实也就无非就是再复制几遍，我们写四个吧，诶写四个意思意思写写六个吧，六个啊调整一下格式，那这里边我们现在整个这个结构这一保存，诶这是不是就出来了，出来了以后，哎呦我的妈呀。

哎呦，我去他出来以后，整个是把我们这个块给我们弄小了，哎弄小了，因为我们刚才给它开了一个弹性核，而弹性核它默认是不是有那个缩减因子啊，哎，缩减因子，而我们这时候不希望它缩，哎不希望缩，不希望缩，那我们就给弹性项设置flex，诶注意啊，这flex要给弹性项设置，直接来一个flex，我直接来一个什么呀，那我不希望你大，我也不需要你缩，你是不是就这么大个，哎那就这样就设置完了，所以你看到的话，我们还需要再设置的话，那就是它下边是不是还有很多个列表啊，哎，下边还有很多个列表，所以这个时候我们可以再把整个这个list再给它复制一遍，诶C程列表复制一遍，CTRLCCTRLVCTRLV复制三个啊，然后我们这一刷新走一个，这是不是就出来了，哎，这就来了一个课程列表，诶你看它这个整体的一个，诶整体的一个效果，这怎么还能无限往下滚是吧，那我们来看一下啊。

那这里边整体的一个效果，你会发现看起来是不是跟我们那个跟我们那个图上基本是一个效果了，哎，这个一样啊，但是注意其实有问题，而且这问题还不小呢，啊不小呢，我们这个水平方向有多个这个图对吧？多个图那很明显它的设计是让我们可以水平滚的，但是你会发现它的这个水平滚确实能滚，但是它一滚干嘛了，是不是我这个整个网页都滚了，哎，整个网页都会随之一起滚动，而我们希望效果指什么？只是这个区域滚动，而整个网页你是不是不应该滚动，哎，你不应该滚动，所以这个时候我们应该怎么办？哎，我应该是让这个区域自己带滚动条，而不是什么，而不是整个去滚动，所以我们的这个课程列表，整个这个容器，我们来看一下我们叫什么名。特程列表整个容器叫做一个这个list对吧？哎，Cost一个list，它现在的宽度的话，我们来看一下cost一个list list，哎宽度我们是不是用那个W来设置的，哎设置的，那现在等于说它这里边的东西已经从那里边去溢出了啊，已经溢出了，那么既然是溢出了的话，我们直接在它里边，我给它设置一个overfflow一个什么呢？Overflow一个这个outw，诶你就直接自动去滚动就完事了，那这样改完了以后，效果你在滚动就是什么呀？哎，就是在这个区域当中滚动，而别的地方不不滚动了啊，看见就想笑了，为什么呀，你这一滚动是不是把这标题也给带上了，标题滚不滚呀？标题不滚，标题不滚的话，那就证明我不应该给它加入，应该是这个item list，所以我加错位置，找到我们的那个item list item list是不是在这儿呢？哎，我应该给它设置一个over尔flow凹凸，那这样是不是就只有这个区域滚了，别的地方就都不会去滚动了，哎，那这样。

我们整个一个练习就算初步的完成了啊，初步完成了，哎，我看一下啊，嗯，Overflow or two。

福禄啊，但是它虽然是OK了，但是实际上它的一个这个。这样写其实也没问题了，但是实际上他这块等于它有一块就被裁掉了，等于这一块是不是就这边儿是不是就被裁掉了，它只是在这个区域里边滚，只是在这个区域里边滚，那这里边呢。嗯，这有点，那就有点别扭了，对吧，有点别扭了，那所以我们来看一下吧。那我这一块的话，应该是它整个这一块是不是都可以滚动，而不是这块区域，也就是说现在这个边等于被那个复元素给复元素给盖住了，对吧，负元素给盖住了，所以呢，我们想一下，那就让这个item list，我应该让这个item list宽一些。

宽一些，宽一些应该多宽呢？那就等于我的item list，就是整个这一块距离都应该属于item list，它是一个宽度是一个720像素，所以这样的话，宽度给它写上Y，就是一个这个七百二除以一个41个rem这一保存设置出来，诶然后这样的话，我们来看是不是就不会盖住了，诶不会盖住了，那这样就得到一个非常哎就比较不错的效果吧，诶那这样我们的第一个这个，呃，第一次做的这个移动端网站就算是，哎就算是完成了啊完成了，那这样这一个网站完成了的话，诶。我看一下啊。嗯，这样就这样就可以了啊，不用再改了，OK了，没问题了，那第一个应端网站就完成了啊，当然现在我们做的这个网站功能还比较简单啊，功能还比较简单，主要是对我们这个rem适配，以及我们的lights，以及我们所说的弹性盒做一个综合的一个练习，那还是那句话，耐着新的做一下，我刚才讲的可能速度稍微的有点有点快啊，有点快，那这个时候你在做的时候，你看视频做嘛，看视频做你可以哎，看一段停一下，看一段停一下，我写一点，你写一点自己调整一下这个速度啊，做完了以后，我们看看不同的不同的版本啊，我看看IPHONE5可不可以，IPHONE5可不可以，诶是不是也没问题啊，诶你看到IPHONE5里边，实际上它就会比例就稍微小一点，但是比例实际上是不会去改变的，诶就基本上就所有浏览器就都支持啊，都支持好我们这个练习就算是做完了啊，我们来听一下。