尚硅谷前端基础 (75)

好，那么接下来又到了我们这个练习的时间了啊，那接下来我们就呃，正好通过这么一个练习，把我们刚刚讲的这个定位啊，我们给他巩固一下，那其实就这么一个练习啊，这个轮播图，呃，当然这个轮播图现在它这种切换图片的效果我们是做不了的啊，因为切换图片呢，肯定得需要通过我们的GS去实现，所以我们现在没有办法去做切换图片，所以我们要做的话也只是做这个布局，那这个布局话，其实这个两个东西我们暂时先先不去处理啊，这两个东西我们暂时先不去处理，我们只做这个整个布局，加上这几个点，这两个东西呢，因为用用到了一些别的技术，我们暂时还没讲的，所以现在先放在这儿啊，那我们先来看一下我们整个一个页面的布局，其实它很简单，整个其实就是中间这么整个是是一块儿对吧，是一块，然后呢，诶这里边的话，我们要放这个图片，很明显这里边它是不能放一张图片的，它是放很多张图片。

啊，这样吧，我们一边写一边说啊，一边写一边说，那首先呢，我要整这个的话，它最外层是不是得有一个容器呀，哎，得有一个容器，那这个容器的话，我们直接找一个块就行了啊，你用ul，用div用什么都行啊，我们这儿采取用一个u Li，然后ul里面我们放的应该是一个的LY，对吧，Li里边我们要放的是图片，并且这个图片我们还应该是可以去点击的啊，可以去点击的，然后呢，诶，所以图片外边还得放超链接啊，所以大概这么一个结构，所以这个结构我们采取这样一个啊，外边是u l u Li里边呢是我们这个Li Li里边呢，我们放一个A标签，A标签里面我们再放这个MG啊，大概是这样一个结构啊，大概这样一个结构，好，我们来写一下啊，来写一下。来啊，那这里边呢，我们练习嘛，我们先新建一个文件，诶直接在这儿新建一个文件，我们叫做一个零五啊，我们第五个练习，我们叫做一个这个，诶京东的这个轮播图，京东的轮播图呢，哎呀没写课串名F2改一下名，诶点一个HTL，然后里边我们写一下页面的一个基本结构啊基本结构呃基本结构呢，我们这写出来，写出来以后还是我们先把我们的重置样式表引入进去，重置样式表我在CSS的下边的re.css然后呢，呃，我们先把这个图片给整过来，图片呢，我已经从网上下载好了，123456789，诶七八一共是八张图片，我直接呢在这里边呢，我放一个新的文件夹，诶别新的文件啊，我们叫一个新的文件夹，我们这是一个零五，因为我是第五个练习嘛，把这八个图片全都放在这个零五里啊，我们第五个练习的图片。

全都在这里啊，待会我们在这儿找就行了啊，然后我们来写结构，结构的话我们就希望最外边是一个ULL里边我们放一个这Li Li里边我们再放AA，里边我们再放这个img，就这样一个结构啊，然后直接table果键，诶那这个结构我们就给它整出来了，对吧？整出来了，整出来以后呢，这个A的话，我们这因为也不需要跳转，现在没有目录，我们直接jav c I PT javascript的冒号分号这么一个结构，Ul这呢，我们给它来一个class class我们叫做一个img的一个list对吧，一个图片，一个列表，然后呢，在这我们就可以直接放图片了，那比如说这个的话，我们应该是点斜盖下载img，下载一个，哎，零五下载一个，1.gpgout的话我们就先不写了啊，正常来讲应该写上，当然这我们就先不写了，然后直接右键它运行一下，那现在我们显示的是这样一个效果，对吧，这样一个效果，那当然了，我们整个这个图。

图片它是可以去切换的，那既然是可以切换的，那就意味着我这里边应该是有几个图片，诶，应该是有八个图片，所以我应该把这八个图片全都写下来啊，那在这儿我直接2345678，但是图片我们需要改一下路径诶二。

然后三。然后四，然后五六。七。八啊，一共是八个图片，呃，为了我们清楚一点啊，在这儿我们提点样式啊，Style标签，我们直接点一个这个img的一个list list呢，我们让它来一个margin啊，我们来一个零，来一个凹凸，让它往中间去一下，让它来一个居中效果，我们这看的清楚一点，呃，然后呢，我们这个，但是现在的话，你居中的话，它没有效果，为什么没有效果呢？因为现在我们这个u lmg list是一个ULL是一个块元素，它是个块元素，也就说它实际上宽度是全屏的，我还没有给它指定宽度吧，哎，所以你不指定宽度的话，那它现在就是一个全屏，而我们这个ul的话，它的宽度应该是多少？诶宽度实际上就应该是一个图片的宽度，高度是不是也是一样的，哎，就应该是一个图片这么一个大小，所以在这儿我们给ul指定一下这个高度宽度，那我们看一下图片的单个图片的话，我们来看一下图片是一个五百九乘以470，那么也就意味着我们这个ul应该Y是一个590，哎，Hide是一个470像素。

那这样我们再看它是不是可以达到这么一个居中的一个效果呀，哎，然后位置往下调一下，我这调个100像素，100像素，那大概就这么一个效果，那现在这个整个这个哎整javascript，呃，我这写成这个什么了，写成这个分号了啊，应该是我们这个冒号分号，应该是冒号分号啊，这一块是我刚才给他写错了，好，那这块我们给他改完了啊，改完了这时候就没有问题了啊没有问题了，那现在我们这个宽度定完了，那结构上就没什么特殊了，结构上也就也就是这样了，但是很明显跟我们实际效果还不一样，实际效果这儿它也是一个块儿，但是它显示的是不是只有一张图片，而我这显示是什么呢？是一堆图片对吧，一堆图片，所以这个时候我们要做的一件事儿就是什么呢？哎，我们虽然有一堆图片，但是我是不是要隐藏起来一部分图片啊，哎，我只显示一张，然后其的图片呢，给它隐藏起来。

那我们这个隐藏图片的方式呢，有很多种，比如说干嘛呢？诶，我可以把这个图片，你比如那种我就可以直接给我的I'd，我加一个overflo黑，那这样的话，下边所有超出的图片是不是都给它切了呀？哎，就看不到了，你可以用overflow黑的，或者呢，现在是竖着的，你也可以让什么呢？让这堆图片横过来，横过来以后呢，你再over尔弗勒黑的，这样是不是也行啊，哎，多种方式都行，那这里我们应该用哪种方式呢？注意了，这里边现在就我们这个练习来说，你用哪种方式都行，但是如果你要考虑到我们这种动画切换的效果，那就不一定了，所以你看我们这图，这你看现在我们这个实际效果的这个图片是怎么切换的，实际上就是什么呢？非常简单的，一个图片消失，一个图片出现，一个图片消失，一个图片出现，就是说消失一个，出现一个，消失一个。

出现一个，所以那我们想一下，如果我的图片是这么排列的，你还能不能达到这么一个效果，哎，你这或者能达到也很麻烦，对吧，也很麻烦，所以实际上在我们的这个京东的这个轮播图里边，我们最简单的一个方式，其实就是什么呢？就是把我们这八张图片全都给它摞到一起，全都给它落到一起，我们默认呢，只显示我们这一堆图片里的最上边那张，当我们需要切换图片的时候，我们只需要干嘛呢？哎，把你想要显示那给它切换出来，然后之前那给它隐藏下来是不是就行了呀？哎，所以在我们这儿，我们采取的是一种方案啊，什么方案呢？我们不让它竖着来，也不让它横过来，而是干嘛呢，让我的这些所有图片让它叠在。

一起落到一起，那落到一起的效果其实就是我们是不是只能就变成只能看到最上面那张了，哎，那我们怎么让它们落到一起，这来写一个注释啊，这是设置我们这个图片的一个容器，然后下边呢，我们要让这个图片落到一起，现在我们先看一下为什么这堆图片会垂直排列，诶很明显，因为我图片放到一个Li里，而Li是一个块元素，是块元素叫垂直排列，那我们现在希望是让我这些所有Li给它落到一起，那落到一起的最简单的方式，那就是让我这些所有的Li全都从文档流里脱离，那是不是就落到一起了？哎，所以这里边我可以怎么办？我们来设置我们这个Li，直接点img list，现在LY，我让所有的LY都开启一个绝对定位，那这时候你看效果，我们现在。

能看到的是不是只有一张图片，为什么只有一张图片，因为现在都脱离文档流了，一脱离文档流二上来，二脱离文档流三上来，三脱离文档流四上来是不是一样一样的，是不是就把我们这个八个图片给挪到一起了，那现在实际上最上边是谁？最上边是八，然后是七，然后是六，然后是五，然后是四，然后是三，然后是二，然后是一，也就是说一实际上现在是压到了最里边，为什么一最里边我们说了，现在我们这里边并没有设置层级，你如果没有设置层级的话，那么靠下那个元素是不是层级就就最高啊？哎，所以这也是我们看到是最后一张，那如果我们以后写GS，我怎么去切换图片的显示呢？很简单，我们只需要干嘛呢？我们只需要通过什么呢？哎，通过修改我们元素的一个层级，哎，来显示我们这个指定的一个。

图片，比如说你想显示第一张，那怎么办？你直接来一个点img list下的Li，我们给他来一个n th child，还记得这个东西吧？诶，N th child的选择第几个子元素一，我们给他设置一个zex，比如说来一个一，那这个时候显示是不是第一张啊？诶，我来一个二显示就是第二张，来个三显示第三个，来个四显示第四个，也就是说你只需要修改一下指定元素的层级，就可以让那个元素就那个图片显出来，想显示哪个图片，把哪个图片的层级给它调高就行了。当然我们最终是要通过。GS去调的啊，在这儿我们只是演示一下原理，那好，所以很简单，我们整个这个图片的布局是不是就已经布出来了，哎，这个局给它布出来，布出来以后呢，这两个玩意儿我们先不管我们来做谁呢？来做下边我们这个导航点，这个导航点什么作用呢？这个导航点的作用就是当我们去点击这个点以后，我们可以切换图片，当然现在图片我们还没有办法切换，但是我们可以做一个什么呢？哎，我们可以做出一个效果，什么效果？哎，让我们这点是不是先出来呀？哎，我不切换图片，但是可以让这个点先显出来，那这个点我怎么处理，诶点很简单，那点嘛，点我们在下边，在我们ul里边，我直接给它创建一个什么呢？哎，我直接放一个div就完事。

哎，我直接在这个ul里边，我们放一个div，哎，Div里边呢，我们放几个超链接，几个超链接呢，因为一共是八个点对吧，八个点，所以在这儿我就应该是八个超链接。加va script的冒号分号，我们这来整八个超链接，2345678，一共是八个超链接啊，24688个超链接，这一个超链接就代表的是那一个一个点啊那一个点，当然现在这些超链接在这儿还看不见，超链接跑哪去了？超链接我们放到一个div里，Div呢，我给它来一个class class我们叫做一个point啊，有一个point我们点啊就可以选择那个啊，可以指上那个小点，那这个时候这div能不能看见呢？看不见你给他写字也看不见，为什么看不见呢？因为现在啊，这一堆玩意儿都开启定绝对定位了，而它是不是没有开启绝定位啊，哎，所以等于它被上边这些图片给给盖住了啊，给盖住了，如果你没有图片，你就能看见了，它是不是在最里边了？哎，在这边了，但是现在你有图片，它就等于被盖住了啊，被盖住了那好，那现在呢，我们先想一下，我们现在要设置。

比下这个A的样式，这个A应该什么样的，是不是应该跟这个效果是一样的呀，哎，跟这个效果是一样的，首先它是一个圆的，对吧，圆的那这样就意味着我们这个A，它实际上是有这个宽度还有高度的，所以这里我们要给这个A指定一个大小，指定一个大小，那怎么指定，诶那你大小还不简单吗？写呗，直接来设置我们这个导航点的一个样式，直接我们这是一个点，一个这个putt呀，Pointer下边的一个A，我们给它一个Y，我们随便写一个啊Y，比如说我就是一个20HEAD呢，也是一个20，然后background color background color，我们给它一个红色，为了让他们明显一点，那现在啊，我先把图片住了，我我不住啊，我不住，那你猜猜我这个东西我能不能看，能不能看见，诶很明显是看不见，为什么，因为A是一个。

行内元素，而行内元素是不支持设置宽高的，所以你设置再大，你是不是也看不见，所以那你为了让这个A可以看见，你在这儿是不是应该设置一个display block，把这个A转换成块元速，哎，这样A就可以看见了，但是还是那个问题，是不是还看不见？哎，为什么看不见？因为这个开启了绝对定位，而我们这个A是不是没开呀？哎，那我们想一下，最终我们这堆超链接能摆到这儿，是不是肯定也要去开启定位啊，哎，也要去开启定位，所以毫无疑问A最终也得开启定位，所以我们就不妨现在就把这个定位给它打开，那问题就来了，那我现在要问你了，诶，那你说我是给这div去开定位，还是给这个A去开定位，给谁开？哎，很明显，这里边我们应该是给div去开定位，为什么你要给A开定位，那就意味着这八个点你得一个一个的定到这儿。而如果你。

就给div开定位，这八个点是不是等于都在div里边呢？哎，你直接把div放到一个正确的位置，这自然而然是不是就就都对着了，哎，就都对着了，所以这里边注意了，我们应该给谁开定位，应该是给这个div，也就是这个pointer开定位，所以啊，在这我们直接复制一下啊在这写吧，第一个pointer pointer呢，我们直接来一个position absoluteut absoluteut，然后呢，现在还依然看不见它啊，还依然看不见，等于它是不是还是被盖住了，哎，还是被盖住了，那这里为了确保我们这个poer它可以一直显示，因为我们这个层级，无论你这个图片的层级再多高，这个点是不是也应该在层在图片的前面，所以这个点我们应该是有一个比较高的层级的，所以我们直接给这个poer设置一个。

In，我直接来四个九，确保它在最上边，别人盖不住它懂这意思吧？哎，确保它在最上边，好，那这样我们现在这四这八个小div这个超链接是不是就看见了，看见是看见了，但是现在我这个超链接是怎么排的？哎，它是竖着排的，我们希望的一个效果，它是不是应该去横向排列，哎，横向排列那毫无疑问在我们这儿，现在的话我就需要给它设置一个float left，让它横过来，那现在是不是就横过来了？哎，但是注意了，我们想一下我这两个玩意儿有没有同，有没有必要同时写display block，把它转换成块元素，Float left的向左浮动，向左浮动的时候它也脱离文档流，内联元素脱离文档流是不是就变成块元素了？哎，所以display block在这儿完全就可以不用写了，你看效果是不是一模一样的，哎，一模一样的啊，所以这里边注意了，我们这来这个叫什么呢？叫设置我们这。

个元素，哎向左浮动啊，向左浮动，哎，向左浮动，那这个时候同时也就可以去设置宽高了，宽高设置完了，然后再看啊，它首先的话，我这点好像稍微有点大对吧？它这个点应该是没有我这个指那个大，我们大概量一下啊，大概量一下这个东西，咱们也就做这么一个事例是吧，我们大概量一下看看，看看大概多大。

这应该是一个。十吧，我们取个整，所以我就直接让他来一个这个十乘以一个十这么一个效果，诶大概是这么大个对吧，这么大个，然后呢，它是一个圆形的对吧？是一个圆形原形很简单，我们直接来一个我们这个borderer radius啊borderder radius radius，我们直接来一个50%，那这样他们就都变成这个圆形，诶从哪去了啊，没写分号啊，没写分号，写一分号啊，它变成圆形，变成原形以后呢，我们这个，诶元素与元素之间是不是还有一个距离啊，哎，这距离我们大概给它量一下，这应该我看着应该是五个像素的像素。哎，那就是说四个像素啊，四个像素，所以呢，我给我的这个A每一个再给它来一个margin left，我们来什么呢？四个像素，那这样他们之间是不是就出现了一个间距啊，哎，间距出现间距以后，然后呢，哎，我们再来尝试着把这个A，它首先它的整体的一个颜色是不是也不对呀，它的这个颜色是有点，这是一个，呃，有点是一个透明的白色对吧？透明的白色，所以这个时候我们试试啊，我们试试rgba rgba呢，那既然是白色，那这就是255，这儿也是255，这儿也是255，然后我们来一个点三啊，给它设置一个透明这个效果，点五视。

嗯，点八呢。点八有点大了，点六吧，哎，那大概就这么一个透明的这么一个小圆形，对吧，小圆形，这个圆形设置完了，圆圆形设置完了，然后它的位置是不是应该在我们的这个左下角啊，哎，在左下角，当然这个距离你可以量一下，那我就大概我就估一下了，那首先这个位置我们定位是给这个pointer开的，既然是给pointer开的定位，那这个时候我们的这个bottom呀，Life的这些东西我们是不是都该给pointer设置啊，但是注意了，现在你说说，比如说我现在想把这个东西放到这个位置，我能不能直接给它设置bottom，比如说我设置一个bottom，设置一个20像素行不行，我们试试啊，试试我直接来一个bottom BOO Tom bottom20像素，我们来看看行不行，跑哪去了，是不是看不见了？哎，看不见了，诶为什么看不见了，为什么看不见了？所以这个时候你要注意，现在我们这儿用的是一个绝对定位，我给这个pointer设置的是一个绝对定位，绝。

对，定位是相对于它的包含块进行定位的，好，现在我问你point的包含块是谁？是ul吗？不是ul没有开机定位是body吗？不是body也没有开，那是谁？那它的包含块现在就是我们的初始包含块，也就是那个HTL，所以这个时候我们的这个point的定位是相对于HL定位的，所以这个时候你写一个包20，这包20相对于来是谁来说的，是相对于我们这个网页来说的，所以它应该现在我感觉应该是大概在在这个位置啊，不管在哪，反正不是我们想要的那个位置，那我们就想了，那现在像这个pointer，这个pointer我们是不是希望它在这个里边呀，那既然是在这个里边，我让它还去相对于我整个网页去定位，那这一个是不是就不太合适了，哎，所以我们想一下，我们希望它相对于谁，定位肯定是。

相对于我们这个容器去定位吧，因为它在它的里面嘛，哎，那所以这个时候我们的选择应该是什么，我们希望它相对于这个ul定位，那怎么办？那这个时候这ul是不是它的组先元素，很明显是，那这个时候我们既然是希望它可以参考于它的位置进行定位，那我们是不是应该给它也开启定位，哎，给它开启定位，那我给他开什么定位啊。

开绝对定位吗？行不行？哎，肯定不行，因为开绝对定位会导致我们的这个元素脱离文档流，它一脱离文档流，它下边如果有元素的话，是不是就被它给盖住了，所以我们希望什么呢？可以给它开启定位，开启定位以后呢，又不会影响别的元素，所以我们就想有没有一种定位方式是我设置完了不设置偏移量，不会对元素产生任何影响。是谁？诶，就是我们的相对定位，所以直接找到我们的这个IG list，直接给它开启一个相对定位，相对定位完了以后，你再看这个跑哪去了，是不是直接跑这儿来了，那这个时候20像素指的是什么？就是这个位置，为什么？因为这个时候参考的元素发生变化啊，所以在这注意我写个注释瑞我们的这个ul开启相对定位。

目的是什么？目的是使诶ul中的这个pointer point啊可以什么呢？可以相对于什么呢？诶ul定位而什么呢？而不是相对于什么呢？哎，初始包含快。HTML，诶，去定位，所以我为什么给它加relative啊，Position relative，我的目的并不是我要对它进行定位，而是什么呢？我希望它可以成为我们那个div的定位的一个参照物啊，参照物好，那bottom就定义完了，那大概就这么个位置，我们再设置一个什么呢？Left，呃，Left的话我们来看设置一个20像素，Left呢，我来一个40，看所有点小没写方法。

分号写上40，诶四十四十还可以是吧，那基本上这个位置相对来说就比较好了，对吧，就比较好了，那基本上跟原图那个位置可能不太一样，但是我们就这么一个意思啊，你要是觉得原图那个位置好，你可以在原图里去量一下啊，我们大概就写这么多，但我感觉这个距离有点小，我调整一下，我调成八项。诶八像素可以是吧，或者呢，我这样，我把这marin变成上下不要左右四个像素，也就是说这样的话，我就等于左右都给它加了四个像素是吧？这个距离就稍微大一点啊，稍微大一点，好，那现在我们整个这一块是不是就出来了，哎，就出来了非常简单，但是这里边我们还有一个问题，还有什么问题呢？现在你看啊，我们这里边实际上你看我这个圈跟别的圈它效果是不是不一样啊，为什么不一样，因为现在我显示的是这第三个图片，那所以第三个图片的第三个圈是不是就应该跟别的会有一个区别呀，那这个怎么办？那其实它是怎么设置的，很简单，它是不是就给它加这么一个边框，加了一个边框，那所以这个时候呢，我们在我们这里边，我也给一个这个pointer，比如说第一个我给它加一个class，叫做一个act，叫做一个active active表示什么呢？表示激活，表示这个是我们当前正在显示那个图片。

对应那个点啊，对应点，然后呢，我需要给它单独设置个样式，点一个这个active act active，哎，应该是什么呢？我写完整啊，点一个这个pointer下边的A，然后点一个active，也就是说具有active这个类的一个A，我要单独给它设置一个样式，首先它的背景颜色background background，这个时候它应该就没有那个，没有那个那个那个。

透明效果了，它应该就是一个纯白色，因为这样会显得稍微的亮一点，对吧，这么一个效果，然后呢，它的外围呢，还多出了一个边框，对吧，边框边块应该是跟之前那个背景颜色是一样的，所以这个时候我们给它设置一个borderder，呃，Borderder的话，我们给它设置一个，比如说两个像素吧，是一个实线的，然后背景颜色呢，给它设置上CTRLCCTRLV，设置一个背景颜色，诶那这样的话，诶我们会发现什么呢？这整个它变大了，但是我们这个边框我们现在是不是没有看出来啊，哎，应该是我这个我们来看一下啊，呃，Boder是一个2PX，我换一个颜色。来一个red，哎，那现在我们能看到这样一个什么呢？这样一个红色的边框，但是刚才我设置一个透明的颜色，我们发现倒是反倒出不来这个透明的边框。诶，那这是为什么呢？我们把这个颜色改一个零，改一个零，好这样啊，我们先把这个边框弄出来，待会儿呢，我再去调整一下我们这个边框的一个颜色，颜色可能还需要调一下，但是这里边其实你设置完了以后，你就会出现一个问题，什么问题呢？你会发现我的这个点儿，它比别的点啊要大了，诶要大了，大了很正常，我们原来的效果里那个点本来就比别的点大，因为它本身就多了一个边框嘛，对吧，多了一个边框肯定要大了，但是大了是大了，大了以后它的位置是不是就下移了，哎，就下移了，那这是为什么？哎，很简单，我这些圆圈都没有边框，而你有边框你比他们大，你比他们大，那你的位置肯定要往下移，对吧？那这样就会出现一个特别恶心的事儿，我们这些小点啊就对不齐了，哎呀，这个问题很烦人呀，那这个问题我们要怎么处理，那现在其实。

根本原因是在于什么呢？在于我的第一个点比我其他的点要要大，那我要解决这个问题，其实很简单，我给这些所有的点我都加上一个边框，都加上一个边框，那你一边大了是不是就没有这个问题了，哎，你一边大了就不会再存在这个问题了，OK，确实解决这问题了，但是问题又出现出现什么呢？我这些点我不需要有边框，你这把这边框给它加上了，等于是不是多了一个东西，多了一个东西那就不好看了，所以呢，你希望的是这些点跟这个点的大小是一样的，但是呢，这些点的边框你是不能出现的，那怎么办呢？诶，我们可以直接改一个背景颜色，我们可以直接给它背景颜色换一个叫做transparent叫什么呢？叫透明的，你就说我把它的这个边框变成是一个透明的一个颜色，那这样这些。

边边块是不是就显示不出来了？哎，显示好，那这时候我们就可以让这个边框变成了一个透明效果，也就是说在这种情况下，我们知道这个边块它显示不出来，但是其实啊，会有一个比较恶心的地方，边块虽然没显示，但是这个圆的整个大小是不是还是变大了啊，还是变大了，它为什么会变大呢？哎，就是因为啊我们的这个背景，背景颜色，我们这儿是不是设置了一个背景颜色呀，背景颜色它默认情况下会延伸到边框的下边，如果你的边框不是透明的，比如说这个页是一个红色的，那这个时候我们的边框它实际上盖住了一部分背景，但是实际上边框下边呢也有背景，但是这个时候如果把边框变成透明颜色，就会出现一个问题，什么问题呢？诶OK，你边框是变透明了，但是边框下边那个背景是不是就从那个边框这透出来了。

哎，透出来了，这个东西后边我们单独讲背景的时候还会说怎么处理啊，单独讲背景的时候我们还会说怎么处理，但是现在我们先把这个问题解决一下，我们可以通过一个属性，那个属性我们叫做BA background，一个叫做一个CLA啊background，一个CLA，这是对我们边框的进行一个裁剪，我直接改成一个什么呢？改成一个我们叫做一个叫做一个pading box，或者改成count box也行，那这样设置的效果什么呢？这个意思，这句话的意思，诶下面这句话意思是什么呢？是将我们这个背景颜色，诶只设置到我们这个边框，什么设置到我们这个内容区，也就是什么呢？边框和我们内边距不再什么呢？诶不再有这个背景颜色，那这样的效果就是你这个边框后边不会有背景，懂这意思吧，所以这个时候我们去掉边框以后，这背景我们能不能看。

就看不见了啊，就要达到这么一个效果，但是这个东西我们后边还要讲，你现在先用一下，先记住了，后边我们还要再去解释，那这个时候我们就其实刚才那个问题也是这个问题，我们就可以直接干嘛呢，把这个边框的颜色直接换成这个透明颜色，背景透不过来了，那这样我们就可以有一个比较好的效果，哎，你来看是不是这么一个效果呀，哎，这应该有点透明，再再多透点，应该三。

这也改成三。哎，大概就这么一个效果，是不是就好多了，哎，但是有了边块以后呢，他们之间距离稍微有点大了，有有点大了，我把这个距离调成两像素，因为边块又多了一个两像素，对吧，调整小一点，诶那这样就是比较合适的叭较合适了，那这样效果是不是跟那个原图那个效果就就类似了，或者边框可能有点窄，有点窄的话，我可以调成四个像素看。四个像素能不能好看一点，哎呀好难看，还是调成两个像素吧，啊，那这就你根据你的情况去调啊，这怎么调想调什么样就调成木线，非常灵活啊，然后再补充的一点就是当你鼠标一入的时候，你选中每一个东西的时候，它是不是还需要变一个，哎，变一个变成什么呢？变的是不是跟它一样了？哎，所以这个时候你只需要给A再加一个后就行了，所以我们在这儿直接用一个分组选择器啊，选择器分组再加上一个A冒号，一个po，鼠标移入以后也变一个样式，是不是就达到这样一个效果，哎，达到这么一个效果好，那整个我们的这个轮播图的一个布局，我们在这儿就算给它完成了啊，完成了整体来说布局并不难啊，难点嗯，那你要先搞清楚，我现在要把它放到我们的左下角，那这个是谁定位，是给谁定位，并不是给每一个超链接定位，而是什么，而是给我们这个超链接那个容器，也就是这个div。

进行定位的，我要给他开启个绝定位，并且你要记住它的层级你是需要调的高一点的，不然的话它有可能会被这个图片盖住，那那个时候就很尴尬，对吧，你是给这个div进行定位的，然后层级调完了，还要注意你给div开启的定位以后，同时还给ulu开启了相对定位，为什么给ulu开启相对定位，因为我们希望div定位的参照物是u lulu，就是就是这个嘛，因为这div就在这个ul里边，那所以必然需要参照它的定位，你参照整个网页去定位，你想定到这儿来，那就很麻烦了啊，很麻烦了，并且很肯定还会出问题啊，肯定还会出问题，所以这个时候我们必须给ul开启一个定位，开启定位什么目的，目的就是让div可以参照于它，相对于它进行定位，但是呢，我又不希望给ul开启定位以后影响整个页面的布局，那怎么办呢？所以我给ul开启的是一个相对。

定位，既开启了定位，又不会影响元素的一个性质，那这样我们的div再定位就是参照于它了啊，参照于它了，然后的话其实就没别的了，主要说了这么一个啊，Background club啊，设置了一下我们这个内容的一个背景的一个范围，这个后边我们还要讲，现在先记一下啊，先写一下就完事了，好，那整个这个我们就写完了，当然有同学说老师你这玩意儿整完了以后，你这active你你这写完了，这不就写死了吗？不就永远都是他了吗？哎，对，那现在是写死了以后，我们学了GS，我们在用户点这个点的时候，我们可以通过GS去切换，去切换到不同的点，但是这就是后话了，现在我们先把结构写出来以后，我们可以通过GS再对这个功能进行。

完善啊，进行完善，好这节课我们先说这么多，这个练习整体来说不难啊，一定要自己多写写，那甚至说你不一定是写它，你可以去看一下，别的网站都有轮播图，那这个轮播图你能不能自已给他把这个局给布出来，好我们先来听一下。