尚硅谷前端基础 (111)

好，那么接下来呢，我们来接着来看我们的这个小米的官网的一个练习啊，其实呃，麻烦的地方都差不多了，下边东西都比较简单了啊，唯独可能还有这块啊，我们的这块比较麻烦一点，其他地方都相对来说比较简单一些，那接下来呢，我们来做中间这块轮播图，轮播图我们之前做过了对吧，做过了跟之前那个N没什么区别啊，轮播图都是这么一个结构啊，都这么一个结构，所以我们来先搭建我们这个轮播图的一个结构，那在这里边我们来写一下，那这块的话，它就又是一个又是一个单独的区域了啊，等于我们这个头部就写完了，那下边就是我们中间这个内容，这那这个是什么呢？这是我们创建我们这个b banner的一个容器啊banner什么叫banner呢？Banner叫旗帜啊，旗帜就是一般的话，你去打开一个网站，网站里面最大那块一一你第一个看见的那个东西就叫banner是吧？这个你像这就最大了，那这就属于叫banner啊旗帜就是呃，网站里面最吸引人那块东西。

是吧，所以我们这叫做一个banner，同样呢，我们也来一个容器吧，诶，Div点一个这个ban ne呀，Banner一个raper，哎，然后里边我们再来一个div点一个板凳啊，在里面来放这个东西啊，嗯，当然这个东西其实你不边放不放那个容器都行，因为它本身整体就是居中的，没有多余的东西，放不放都行，嗯，放上一个也没什么影响啊，然后放完了以后呢，在这里边我们是一个DIY，是我们整个这个轮播图的一个容器，那既然是轮播图的话呢，在这里边我们要放这个图片啊，放这个图片，这个图片里边我们放的是Li，外边放的是一个A标签，A标签里边我们应该放的是一个图片，也就是我们这个img标签，图片的话，我从官网上下载下来的，不是这回的之前我下载的，但是这这个图片大小一样，就就就就行了是吧，放到我们这个img下。M1下班点一班点二，一直到班点三，班四一直到班点五啊，我们我们这直接来一个这个，我们这直接来了一个这个点斜杠，我们来引入图片，Img下的一个这个班ner1.gbd，然后我们这一共是有五个图片，所以我这复制五次啊2345格式化一下out shift加F的F啊格式化一下，然后在这儿我们这个结构啊，就是轮播图的这个结构，基本上就这样了，对吧？然后这个ul是表示我们这个图片的，所以我们给它来一个class，我们叫做一个img的一个list，那除了图片以外，我们下边五个图片对吧，下边还有五个这个导航的小点的对吧？导航的小点呢也简单，我们这直接来一个div吧，Div呢，我们来一个class，我们叫put。

哎，Put呀，Pointt呀啊pointer呃，或者你叫别的也行是吧，叫什么都行啊么，比pointer比小手啊，比纸纸那个东西点那个东西对吧？Pointer pointer里边呢，我们就直接给它提供五超链接啊A标签，这直接javascript javascript的CPCIPT冒号分号，然后我们这一共是需要五个超链接啊五个超链接我们这直接复制一下哦，Shift个在加下啊复制那现在我们这个结构就已经给它设置完了，结构设置完了以后，我们来写样式啊，我们先看看写完了长什么模样，诶这是我们写的是吧？诶写完了以后是不是就就就长这样了，哎，长这样了啊，当然这里边我们要一点点去调整，首先呀，刚才我们这个我看我写没写W，哎这个班我这边写一个W啊，因为它整体是不是得去居中啊，哎，整体是需要在我们这个屏幕当中去居中的啊这么一个东西，然后我们来写样式。

放在这儿吧，哎呀，这太大了。我们把它呢，往往上挪啊，放在这个位置。然后呢，我们这个呢，往下挪。调小一点啊，我们可以一边看一边来改它啊，然后的话我们来写它的样式，首先的话明显啊，我们这个图片它比较大，图片的大小已然是超出了我们页面的大小，哎，为什么它整这么大，因为它就是避免你的屏幕是一个高清屏的时候显示不清楚，所以它一般都会指定一个比较大的图片，那你像这个图片，我们来看出大格的这个图片，它的大小应该一般都是二倍的是吧，一般都二倍或者三倍，我们来看一下它的信息，1920乘以一个720啊，1920乘以一个720，那咱们这个本身那个是一个多大个的。

写到了base里边，本身是一个叫做1226的，它实际上给我们整了一个这个1920的，这是。这是多少倍啊，这是一个。0.5多了，多了50%吧，应该是是吧，大概是这么一个意思，但是我们我不不算这数了啊，反正一般的话，要不然就是两倍，咱们三倍，它这应该是1.1.5倍的，我看看啊C计算器我们计算一下，我们直接来个1226除以一个这个1920应该是1.5吧。

诶。哦，应该是一个1920除以一个这个1226大的除小的对吧，1.5对吧，应该是一个1.5倍，大概这么一个样子，嗯，但是咱们就不管它了，它这个图肯定是要大一些，比我们容器要大，它为什么要整大了，它就是希望就是高清屏幕也可以正常显示，但是虽然图片大，但是图片的比例是没问题的啊，片的比例是没问题的，所以这一块我们设置的时候，我们只需要来调整一下图片的一个比例就行了。index.css往下写，我们这个是来设置我们这个班ner，班ner的话在这我们这是一个点一个我们叫做一个这个ban呀，Ban呀搬那我们先搞一下它里面的图片，我们给它来一外，直接来一个100%宽度和负元素一样，那这样的话，你看这个布局是不是就正合适了，哎，就正合适了啊，然后你要设置的话，还有那个线的问题，但是这其实体现不明显，你要不想写不写也没事，但是我们还是写一下吧，沃。

LA设置一个套，把那个编剧给他整没了，这样就对齐了，对吧，这样就对齐了，哎哟我呦呦呦，我现在是一张图片是吧，我这个名写的不好。应该是一二。三四。五啊，应该是五张不同图片，五张不同图片对吧，然后现在就是我们这五个图片，很显然它是需要摞起来的，但是我们实际上其实要看一下它的切换效果，它现在是怎么切换的，它实际上现在是通过我们去，诶点击这个东西去切换的，那这里边我们应该是把我们这个图片给给落到一起啊，哎给到一起，那所以这个里边我们就直接来干嘛呢？哎，来给这个图片，图片是放到哪啊，放到这个Li里边的，所以我们直接来BN banner下的，我们叫做一个img list，点一个img list下的Li Li呢，我们让它来一个绝对定位啊，开启一个绝定位，那这样的话效果就是所有的Li都开启了绝定位，那是不是就都脱离文档流了，脱离文档流了以后，他们现在应该就已经盖到什么呀，盖到一起了，那这样的话，你看跟我们，哎图里的效果这图有点。

这图的话，我们高度调整完了100%，但是好像这个宽度设置诶。宽度没生效。宽度没生效，我们来看一下哪的问题，宽度100%并没有生效，刚才我写这个样式有问题吗？我们先给它除掉，这个时候是没问题的，但是当我设置完了哦，当我设置完了position，设置一个absolute，那这时候我们会发现我们这个宽度它失效了啊，失效了，为什么失效了，这个是由于于什么，还是我们那个初始包含块的问题，现在我们给img设置了一个宽度是100%，表示什么意思呢？表示我们的MG的宽度是它这个负元素的100%，但是我们说了这个说法不严谨，严谨来说应该是img的宽度是它的包含块的宽度的100%，那刚才它它，但是对于MG来说，它的包含块就是Li对吧？Li，也就是说img的宽度是Li的100%，那刚才我们没有给Li设置绝对定位，那这个时候Li的宽度就是谁，就是它负元素ul的宽度对吧，而ul的宽度就是这个。

班ner的宽度，所以最开始的时候的宽度就是班的宽度，但是现在我们让Li脱离了什么？脱离了文档流，Li脱离文档流以后，它的默认宽度是被内容撑开的，那默认宽度被内容撑开，现在就会出现一个问题，IM Li说，诶MGR你是做子元素嘛，对吧？你多宽我就多宽，诶MG说了，哎，我是你宽度的100%，R说了，你多宽我多宽，MG说了，你是我，我是你宽度的100%是吧？哎，LY说了，你多宽我多宽，那这俩人是不是打起来了？哎，为什么？因为他俩的互相参照，互相参照就不知道最后到底要听谁的了，所以这宽度现在就失效了，等于现在就是图片有多宽它就显示多宽了。所以出现问题的原因就是我们给Li开启了绝对定位，但是没有给它的这个祖先或者副元素开启相对定位，所以这里边我们要考虑一下，现在我们期望Li相对于谁定位，哎，那很明显我其实更新更想的相对于这个。

Banner banner也就是这个外层容器吧，哎，外层容器所以在这儿呢，我给banner呢，开启一个相对定位position，一个relative，那这样这个时候Li的宽度就相对于谁呢？相对于班ner来计算了，那我们的图片的宽度是不是也就可以也就可以生效了，哎，那现在图片的宽度高度就都没问题了啊，所以注意这个问题啊，好，我们现在这个东西设置完了，那也就是说现在我们这五个图片是落到一起的，那我们真正要切换的时候是调整一下它的层级显示，显示层级调高就出来了，不显示层级调低就隐藏了，是这么一个事儿啊，那这里边我们就不多说了啊，图片的事我们就处理这么多，然后就是我们这个下边那一组五个小点儿，也就是我们这个是不是这五个小点啊，哎，五个小点的，我们叫一个这个pointer小点点，小点点的话呢，在这里边我们已经这个元素已经写好了，就是我们这个ER啊，Pointer这个跟我们之前的是一样的，对吧，这个是设置什么呢？设。

是我们这个五个这个导航的一个点，导航点的话，我们这直接来一个点，一个pointer，首先这个pointer我们肯定也要让它是一个绝对定位，不然你压根都看不见它啊，看不见它，然后呢，我们这个五个点，也就是我们这个pointer里边的a pointer里边的A呢，你要让它出来呢，它肯定得是一个块元素，对吧，但是设置完块元素以后，会导致你那个竖着排列，所以我们就直接让它向左浮动变成一个，诶就是脱离文档流，然后呢，宽高也可以设置，那这五个A的宽高的话，我们设置多少在这儿已经给我们写出来了，你看它是不是一个圆形啊，哎，圆形你看内部是一个什么呀，六像素，所以很典型，它的宽高就是一个六像素，Y是一个六，Hi，是一个六，然后在这儿我们给它设置一个background color，我们来一个一红色，我们先让它干嘛呢，现在显示出来，诶是不是跟这儿呢，诶跟这儿呢，啊现在还很小很小，然后我们还有一个什么呢？它是不是它整个大小是12啊，诶整个。

大小12里边是一个什么呢？是一个三，那就证明它还有六个像素的边框，那六个像素的边框那就应该是一个什么呀，四个方向应该就是三个像素，所以在这儿我们还应该有一个叫做一个borderer borderder的话应该是三个像素，然后我们来一个blue啊，随便写一个blue，然后来一个这个solid的，然后并且它还是一个圆角，圆角的话，我们直接包的它就不是圆角了，它是一个什么呀？它就直接是一个圆形radiers，我们直接来一个50%，让它变成一个圆形，那这个效果是不是出来了，哎，在这儿呢，然后它的位置是靠在右下角，右下角我们直接给这个pointer，这个div去定位，那右下角那就是包零，然后来一个这个什么呢？来一个RIGHT0，那这样这个位置是不是就靠到这个UA包零啊，那现在你注意了，它的位置还没过去，为什么呢？因为现在我们这个poner是绝对定位，它是相对于谁呢？相对于banner去定位的，对吧？因为banner开启了相对定位，但是为什么会给放在这儿呢？因为。

现在banner里边的只有图片，只有我们这个这个这个个这个ul，对吧，而我们这个ul是不是已经脱离文档流了，脱离文档流导致班ner的高度就已经丢了，所以这个时候我们还应该给班ner指定一个高度，它的高度是不是应该就是四百六啊，哎，避免它的高度也因此塌陷，所以我们给它搬那来一个高度是一个460个像素，那这样高度不塌了，你看这个时候是不是就跑这儿来了啊，就跑这刚才那个扳子搁哪了，刚才那个div它实际上只有这么点，只有这么点，那所以定位呢，肯定就跑这儿来，对吧，但是我设置完高度以后，我这div就跟图片一边高了，这样就没有问题了啊，所以这块一定要设置，设置好了以后，我们这五个点就跑到了这个右下角，当然跟我们图里边这个位置还有点差距啊，但这个位置它没写是吧，没写我们就设置一下吧，左边一段距离是不是下边一段距离啊，我们简单量一下。

你截图工具简单量一下左边左边左边是一个。35啊35，然后呢，我们再看我们这个下边。下边是一个22吧，22我们就直接来一个right啊，Right不是左边我们的右边啊，右边是一个35个像素，35个像素下边呢，是一个这个22像素啊，不是写一个这东西自己估一下也行啊，这东西无所谓，位置是这样的，然后它这个之间是不是还有一个距离啊，还有一个距离的话，我直接给这个A，我们来设置一个margin a，也就是我们这个AA，我们给它设置个margin一个left吧，Margin left我们设置一个六个像素，诶六个像素啊，那这样的话，我们让他们之间有一个这个距离，诶这样是不是效果就好多了，哎，基本上跟那个原图的差不多了啊，位置我们就没有去特别细的梁啊，特别细的梁我们大概估一下就完事了，然后的话就是这颜色，哎呀，这红跟蓝呀，配一块实在是太难看了，对吧，太难看了，我们这块修改一下颜色，颜色的话，它这给我们提供了两个颜色，一个是RGBA，一个000.4，哎，一个等于是一个白色透明，还有一个黑色透明，你。

很明显这个背景颜色是应该比较深啊，背景颜色比较深的话，那我们直接给背景颜色，我们来一个rgbargba，我们直接来一个黑色的一个点点四透明，而我们的这个边块的颜色呢，稍微的亮一些，亮一些我们就给它一个白色一个透明rgba rgbargba，我们这是一个255，然后255 255透明度是一个点四啊点四这样我们来看效果，这样一保存我们再来看，哎，那是不是，诶感觉我这个。

边块似乎稍微的有点粗，对吧，稍微有点粗，有点粗，有点粗，我们把这个边块可能哪块量的数据不太对，我们把边框调细一点，边框呢，我们给它来一个两个像素吧。哎，两个像素感觉好像稍微的。稍微能好一些对吧，稍微能好一些，但是感觉里边有点小了，嗯，往里边三个像素，把里边调大一点，把里边调成八个像素。

诶，怎么感觉都不好看呢，那就还两个像素吧，我觉得两个像素还能，两个像素还稍微能接受一点是吧，两个像素还能接受一点，基本就这个效果了，我们就不比了啊，那好，那这一块就整完了，然后还有一个就是当我们鼠标移入的时候，它的颜色会有一个改变，然后我们这直接来一个pointer，然后这儿我们是直接冒号一个它的颜色改变，应该它只改，它应该是改变了我们这个背景颜色，还有这个borderder颜色，对吧？呃，Background color，我们这直接来一个borderder color borderder color的话，我们来看一下改成什么颜色，这样吧，我们给它做一个这个反色的处理，哎，我让边框变成背景，背景变成边框，所以这个时候我们让这个两个色，哎标一个。掉一个，那这样的效果我们来看一下，诶，就是这样的效果，对吧，整个效果还还可以是吧，还可以接受，然后的话我们就设置一个默认选中的，跟我们之前一样啊，稍微讲的快一点，A的话我们就加一个class，我们叫做一个act active，它是默认选中那个东西，所以这个时候我给A的话加一个这个，这再写一个选择积分组，我们这是一个点一个这个pointer pointer下边一个A点一个a active，当后这个active这个也变成这个颜色，那这样我们这五个导航点是不是就完事了，哎，这个导航点完事了，然后接下来要做了一个就是我们的这个小箭头，小箭头的结构上我们还没写啊，结构上先写啊，左右有一个导航的一个箭头在这儿，我们写一个吧，Div，我们叫做一个class class我们叫做一个这个next，诶pro吧prev pro加上一个next，然后这里边呢，同样我们放两个超链接啊，放两个超链接，哎呀可剪切CTRLC。

我复制一下啊，第一个超链接呢，我们叫做一个pro啊，上一个啊上一张，第二个超链接呢，我们叫做一个next啊class我们叫做一个next，叫做一个下一张啊两个超链接，一个表示上一张，一个表示下一章，那这个东西啊，我们有两种处理方式，两其实不一定两种啊，可能很多种处理方式，那其中一种这两个箭头呢，我直接使用图标字体，哎图标字体诶还有一种呢，诶小米官网原版的，它实际上是用的一个精灵图啊，所以用我们的雪碧图也可以实现这个事儿，所以你看这它实际上在这儿是不是给你提供了这么一个图片啊，这个图片里包含了四个箭头，一个是向左的，一个向右的，诶两个向左，两个向右的是吧，那这种情况你看这个图，这个图很显然就是什么呀，就是你正常情况下你什么呀，你没点的时候，它是不是这样啊，哎，它这样，那我们这个黑的图应该是什么，我鼠标一入以后，我点的时候是不是应该变成黑色呀，诶黑色，所以像这个练习。

你可以用这个雪碧图做，也可以用我们的那个什么呀，也可以用我们的那个那个那个图要自己做，那我们雪碧图我们之前可能练的还不够多是吧，哎，其实也不少了，但是我们在这儿还是再重复的去使用一下这个东西，那我们先来把这个图啊，我给它弄进来。

直接放到我们这个IMB下，先把图给它弄进来，弄进来以后呢，在这儿我们既然要用雪碧图去实现这个功能，我们这里面我们先来干嘛呢？哎，首先还记得我们之前说那步骤吗？我先把它用打开啊。用Photoshop打开，那这个时候我们之前说过一次，我们这个图的一个使用的一个步骤，使用一个步骤，首先你要先确认你要使用的是哪个图，那我们这里，我们这里边是不是一共有四个图，哎，你先要确认你要用哪个啊，你要用哪个，然后你是不是要测量一下这玩意儿的一个大小啊，哎，大小，这大小好量，因为每一个图的大小都是一样的，所以我们来量一下。

大小是一个宽度是41，高度是一个69，所以那我们这两个div的是不是就是41还有69啊，哎，41还有69啊，在这儿我们来设置一下啊，设置我们这个两个这个什么呢？两个箭头啊，两个箭头我们直接点一个PV，然后next啊，这两个下边的超链接宽度刚才是多少？41吧，F8宽度是41，高度是一个69啊41，然后hi是一个69个像素高度定下来，然后我们给它设置一个background color，我们先看看它啊，Background color background color，我们来一个red啊，Red我们这一保存，现在我们一刷新看不见对吧？看不见，为什么看不见，因为还是我们还没有给它开启定位呢，你不给它开定位，它现在在这玩意儿的下边呢啊，下边呢，所以这个时候我们这两个超链接，我们单独给它进行定位，注意了这两个东西就不能像那导航点一样了，导航点我们是不是统一定位的，但是。

这两个东西由于他们一个在左边，一个在右边，位置不一样，所以这里边我们必须要给它单独定位，所以我们单独给他们开启一个什么呢？开启一个相对定位啊，都单独定位，这个时候一刷新，你看这块是不是就跑这儿来了，哎跑这儿来了，然后的话我们要设置一下他们的一个位置啊，我们先设置位置，待会儿再设置图标位置的话，我们就得分别设置了，我们先设置这个bra，诶当然其实有一点我们可以统一设置，因为他们实际上这两个无论一个在左边，你是在左边还是在右边，他们两个垂直方向是不是都是居中的，哎，垂直方向都居中的，所以我们先可以让他来一个垂直居中，怎么来垂直居中，垂直居中TOP0 bottom0，然后margin的话，我们直接来什么呢？来一个这个凹凸上下凹凸左右零，那这样的效果就是我们这两个玩意儿是不是就都居中了，哎，就都居中了，达到这么一个效果很简单对吧，但是这里边现在。

垂直方向定好了水平方向，我们还得单独去设置水平方向，一个是pre，还有一个是我们这个next啊next next很简单，Next我们直接放到最右边是不是行了，哎，所以next的话，我们直接来一个RA0放到我们那个最右侧，那这样的话它就直接跑右边去了，对吧？而我们这个life呢，比较麻烦点，它需要是不是放到这个位置，哎，这个位置，这个位置的话，它的偏移量应该正好是这个元素的宽度，它的宽度是多少？我们看看图片，它的宽度是一个234，所以我们pro的life的值应该是一个234个像素，234个像素设置完了以后，你看我们这两个块的位置是不是就定下来了，哎，定下来了以后，接下来我们来设置，那就不能是这个背景颜色了，它应该用的是一个背景图片，所以背景图片我在这儿给他们来统一设置。background一个这。

啊，Image，我们的URL下找谁呢？找我们img，这还得返回两层目录，因为我们在哪不要忘了目录啊，到哪呢？到我们这个img下边去找这个iconl，点一个PNG，这样一保存，那现在我们的这两个的背景图片是不是就统一设置上了，那这个时候我们来看它应该正好显示的都是一个向左的箭头，并且是不是一个。选中的状态啊，哎，选中状态，所以接下来我们要通过修改偏移量是不是来影响它选中的显示图片啊，左侧的我们先设置左侧，也就是前一个我们要设置一个background position position我们来看应该是多少，像左箭头，左箭头是不是这哥们儿啊，这哥们儿偏一亮，我们还得他这比较设计的比较缺德呀。因为这玩意儿是不是透明的呀，透明的的话，我们这儿不好量它之间，而且它这玩意儿它不是贴到一起的，它之间还有这么一道缝，我们给拖个辅助线啊，拖个辅助线。

做个辅助线，然后的话。我量一下它这个负多大啊，负是一个，嗯，就是一个像素的距离是吧，一个像素的距离。一个像素，那我们这也是拖一下啊，把这距离给它拖出来，它这个缝比较烦人啊，比较烦人，拖个辅助线，把它们之间这个间距呢，给他给他拖出来，剩下的事就好办了啊，然后呢。哎哟，我去。恩。基本上就这样了，我们就拖一个，然后剩下的我们就可以算了，对吧，我们可以算这个缝，你知道这four是一个像素，你就可以算了，我们直接量一下啊，我们现在是不是需要让他把这个图片是不是在这去显示啊，所以垂直方向都不用动，我们直接动水平方向就完事。

水用量一下这个距离，这个距离其实就是什么呀，两个宽度加两个一像素，那就是一个84像素啊，80像素84像素，所以水平排摄量是一个负的84像素，84像素垂直呢，不用偏移就零就完事了，应该我们这个正好就是，是不是就这个玩意儿了，哎，这玩意儿了，然后呢。我们的这个next的next应该显示最后一个，最后一个它应该多了一个，多了一个41，再加那一个像素应该多了一个42，多了一个42的话，我们应该这是一个六一百二十六，126个像素啊，这个东西你算明白，到时候自己算一下啊，我这就不废话了，这一保存我们这一个刷新走一个这个，哎呀。我这块好像还算多了，怎么还多。多了一个边儿出来，多了一个边儿，是哪儿多了一个边儿啊？

多了一个黑边，那我这应该我看一下啊，负126啊。我这应该仅仅是多了一个像素，因为它左边这是不是没有那一像素了，它只是这有有一个像素是吧，这有一个像素，然后加上前边那两个一个像素，那是不是加了三个像素，刚才我加了多加了一个像素，那这时候就保存一下啊保存一下。保存是不是就没有黑边了，哎，所以刚才我算错了啊，多算了一个像素，所以你算的时候也注意一点，当然没事，算错了，实在不行自己试一下啊，试一下，然后说这个是我们普通的状态，还有一个状态是我们的whole的状态，Whole的状态其实你只需要换一下图片的话，其实你就简单了，因为第一个就是，所以它的background position，你就直接变成零，变成零，那这样就没问题了，你看一移动是不是就没问题了，而我们的这个叫做next呢，Next稍微的还得算一下NEX，等于是第二张图片对吧？第二张图片我们直接来一个后，第二张图片应该就是移动，移动什么呢？移动一个宽度加一个像素，一个宽度是41，一个加一个像素，应该就是移动一个42个像素，我们看一下这个能不能一下断，对诶是不是就没问题了，哎，那这样我们这两个箭头也就做完了啊，就做完了，其实这东西感觉上其实用这个图标字体会更简单一些啊，更简单一些，但是我们去做练习嘛，哎就不要不不一定非得追求简单的。

方式，我们还是追求能把这每一项都给他去，都得去练一下啊，都得去练一下，那现在我们这块就已经处理完了，然后其实你会注意到我们这个图层会盖住这个三角，因为它我们是没有设置层级啊，哎，设置层级原版里面我们看效果，哎，它图样也会盖住，对吧？但是如果你说我希望这三角盖住图层，那怎么办呢？你给这三角层级设置高一点，但是也搬一般也不需要那么晚一一般也不需要那么做啊好，那整个我们中间这个轮播图这个班字这块就做完了啊，还是主要还是练的一个定位并不难，细心点做一下，尤其是呃，涉及到我们这个怎么把它设置到中间的，怎么让它垂直居中的，是吧，想一下忘了的话回去倒一下，我们之前说定位那块的课程啊，我们来停一下。