尚硅谷前端基础 (55)

好，接下来呢，我们来看我们的第一个练习，也就是我们的这个图片列表这个练习，那这个练习呢，我们先打开一下这个文件啊，我先把这个结构给它搭出来，诶，我们的一个页面的一个基本结构啊，在这儿我们直接给它运行一下。嗯，标题我也改一下，我们叫做一个图片的一个列表，我们写这个东西的时候，尤其是我们第一次写是吧，这个东西写的时候呢，哎，不要着急啊，不要着急，我们先要分析一下它的一个整体的一个结构，那我们要做的啊，它整个这个东西挺大的，我们要做的其实就是它里面的这个区域，这个区域其实我们看起来非常简单，那实际上整个它的外边是一个。首先啊，既然你要布局嘛，这整个外边的图片，你必须得把它们放到一个呃，共同的一个这个容器里，所以最外边肯定有一个容器啊，这个容器一说容器的话，它没有固定的啊，你只要是一个这个只要是一个块元素就可以啊，只要是一个块元素，你是div啊，诶是这个其他的元素都行啊，什么section啊，什么这个什么什么这这各种各样的，它没有要求啊，然后呢，在这个容器里边，我们实际上也很简单，有三个。

有三个这个图片啊，有三个图片，当然这种情况下，这个图片呢，我可以直接就放到这里边，其实也没有什么问题啊，你只要宽度固定的，我直接放到这里面也行，那这个同这东西呢，其实我们有两种处理方式，哎，这个结构大概什么样呢？我可以是一种这种方式，我写一下啊，比如说我直接写个div，诶里边我们直接放一个三个MG标签，那这是一种结构啊，这是种结构，那这样写起来就就很简单了，你把div的这个哎宽高定死了，因为这是一个固定布局嘛，对吧，它的宽高是固定的，你把div的这个宽高给它固定下来啊，固定完了以后呢，你再把这个图片给它设置一个边距，这样就行了，上下边距这样就出来了啊，所以这是一种方式啊，这种方式，那这种方式呢。

也没什么问题，哎，写起来会比较的比较简单，但是还有一种方式，我还可以怎么写呢？因为这个img吧，首先你要注意每一个图片实际上它是可以去点击的，也就是当我点这个图片它就跳转到这个页面，点这个图片就跳转到这个页面，它是可以去点击的，所以这个时候呢，往往img外边我们其实还应该去套一个什么呢？套一个超链接啊，套一个超链接诶，并且呢，其实为了更方便布局，一般情况下啊，这不是必须的，所以注意啊，我们在设计结构上，设计结构的时候，所有标签都并不是说非得按照我写那种模式去写，你写完了以后，只要你能把这个效果给它实现就行了，结构并没有说什么固定的一个写法，所以我还可以设置一种写法，怎么写呢？哎，那就是用我们的ul，因为你看三个图片嘛，上中下三个图片，那这个东西实际上就相当于是一个列表了，所以我可以放一个。

UUL里边干嘛呢？放LL里面我们放一个超链接，比如说就直接来一个javascript冒号分号，然后在超链接里我再去放这个图片，那我们三个图片，那就是三个LA，直接给它放上去就好了啊，直接给它放上去，然后这个结构我们就给它整个的布出来了，那这样的结构也OK啊，这样的结构也OK，也就是说什么意思呢？其实就是等于我们在img和A外边又多套了一层LY，套一个LY什么好处？套一个LY的好处就是我让这块呢也变成一个块元素，块元素我们布局起来相对来说比较比较清晰，所以呢，我个人我更倾向于这种结啊，当然这种结也行，但是这种写法你前边你想着要把这超链接给它放上去啊，超链接给放上两种写法都可以，那我采用这个后一种写法啊，采用后一种那。

这种写法整完了以后呢，那这块注意了，它三个图片，你这也得需要放三个图片，MG我已经整上了，那这里边你是不是得有这个图片啊，哎，你得有这个图片，你有这个图片，但是呢，我现在是不是需要把这个图片给它拽下来了啊，那我们来看一下这个图片怎么拽，首先有一种图片，我直接右键点它会就能直接打开，但是现在现在这种右键点这个图片呢，它没有没有怎么办呢？直接点你的F12开发者工具，然后拿这个工具选中这个图片，你看它里边是不是一个img标签啊img标签，然后在这里边直接就会有一个图片的一个链接地址，但是它这块有一个小问题，它这个图片是一个webp啊webp webp的话，因为因为什么呢？因为现在我们的京东它等于做了一个适配，适配什么呢？就是在谷歌浏览器里自动切换成这个webp这个这个图片，但是你放在这儿吧，也有个问题，就是你放在这儿的话，它这个图片。

它是支持Chrome的，呃，如果你想支持IE，支持什么别的浏览器，你这图片格式就不行了，我们现在也还没有去讲那个图片的一个适配的问题，所以如果你需要一个通用性比较高的，它可以在任何浏览器里支持的，你可以转到你的IE里，当然这一个步骤不是必须的，在这儿你也可以直接右键有一个叫做我们看一下，呃，我们有没有直接另存为啊。没有看到另存为，那我们就直接点击这个叫做一个open in new ta啊直接打开，然后右键存储图片，懂这意思吧，直接照啊，但是这个图片存完了以后，其实就是一个webp这个格式，LP这格式，那你不想用这个格式，你可以切换到IE，还是打开京东，一样的操作方式啊，一样的操作方式，我们先把图片整下来，来，我们直接点击还是啊F12，或者有的电脑你是需要按那个FN加F12 IE里也是一样，点这个鼠标，这个图标啊，然后呢，放到这个图片上往这一放，同样看到这个链接，那这个时候点开一下这超链接MG，这个时候它就是一个这个叫做一个这个叫做一个这个。

JPG格式的了啊JPG格式了，那我这块呢，我就直接复制一下这个链接，然后呢，在这我们给它粘过来，哎，然后呢，把图片另存为我直接存到我的这个桌面上，这就一个图片了啊，然后再来看，我再找一个哪个图片无所谓啊，因为这图片其实都是一呃大小对就行了啊，这个也是我直接复制一下这个地址，然后粘过来。还是我直接图片我们来另存为给它存到这个桌面，然后我们再截第三个。第三个呢，直接点开在这儿。复制一下。

粘贴，然后还是图片另存为存到我的桌面，那现在我就把这三个图片给搞出来了啊，那这里边其实你在Chrome里下也行啊，当然chome里你也能下到GBD，那我们就直接省点事，我直接在IE下了，下完了我们得到这三个图片啊，三个图片，三个图片呢图片，我要把这三个图片放到我的那个，哎，放到我的文件夹下边啊，文件夹下边我直接来在这里面我们创建一个新的文件夹，新建一个这个，诶不是文件了，新建一个文件夹，我们叫做一个I'mg为了区分一下在img里边我们再新建一个文件夹，新建一个文件夹叫什么呢？叫做我们这个，诶叫做我们一个零一啊零一，因为这是我们练习零一的文件夹，然后把这三个图片我直接给它放进去。拖进去，然后改个名，哎，这个我们就叫1.tpd，这个我们叫一个2.tpd，然后下边这个我们叫做一个3.ppg啊，一共是三个图片，那接下来我们要做的事就是把这图片给它引进来啊，引进来src，这个是我们在我们的img img下边的一个这个哎零一下边的一个1.dbd，那同理下边的呢，是我们的一个哎，MG下的一个零一的一个2.dbd，这个是我们IMG0一下的一个3.dbd，把三个图片都给引出来以后，在这我们来看效果啊，这一刷新这东西是不是就出来了，哎，就出来了，出来以后当然跟我们这个预期还不太一样，对吧，不太一样，但是这个结构我们已经整出来了，结构已经整出来了，也就是说我这人已经有了，那接下来我们就是要给它进行一个化妆，我们要对它进行装饰，我们要通过CSS去给他添。

增加样式，让它变得更好看啊，让它变得更好看，好，那这里我们一步一步来，不要着急，那这里首先我们来写一个东西啊，写一个东西啊，写一个什么呢？我们先写一个style标签，那这里边肯定毫无疑问我们应该先去除这个默认样式，那我就直接link，我就不写那个了，因为我们这有了，我就直接link，引入谁呢？诶引入我们那个叫做一个。

reset.css啊reset.css这个呢，我直接复制一下，复制在这儿，我们新建一个文件夹。CSS啊，然后把这个给它粘过来。哎，因为已经有了嘛，我就不再去写了啊，当然我们用那个星啊，那个妈志明潘金玲也行，直接引进来，引进来我们这儿直接来一个这个，诶点鞋盖CSS再来一个re赛点CSS直接引入，那这些什么默认样式就全部的被我们这个去除掉了啊被去除掉了，那现在我们整个这一块就已经出来了啊，首先我们来说一下结构，整个外边是一个u Li，然后每一个都是一个Li，每一个图片放到一个Li里，Li的一个结构是一个超链接加上一个图片啊超链接加上一个图片都是这样一个结构，那现在我们就要开始对它们进行一个布局了啊，进行布局首先我们来看一下我们这个图片的效果啊，我们直接看一下我们这个练习的一个截图，图片列表，首先呢，这里边我们来看这个图的时候，你最好给它调成100%啊，直接看一个最最标准的一个，因为我们做完了以后，效果应该跟着它，跟它是一样的，我们做哪部分啊，我们这块做的话，其实我们就做这个图。

片这个部分，因为我们整体真的这个页面做的时候，实际上就是把这个东西给它布到这儿来了，它整体一定是一个容器，所以这个图片它整体这个是不是一个ul啊，而既然是UL是不是有一个这个有一个高度啊，哎，有一个高度，所以这块我们要写样式，应该先把这个ul的高度给它确定下来，确定这个高度我们有两种方式，我们先说这个图片确，我们先说这的确定方式，这儿的话，其实我现在最简单的是我直接打开我的截图工具。

稍微等一下，我要调理。直接打开我的那个截图的那个工具，截图工具，然后呢，你不是想从这相片图片开始吗？你直接在这图片从上往下给他拖一下子，大概这个大小，我们可以估一下，这是一个四百七对吧？诶这是一个470，所以这个时候我就可以直接把这个ul给它定成一个什么呀，诶定一个这个四百七就完事了啊，400就完事了，四百七定完了以后，我们还有一个什么呢？我们还有一个宽度啊，宽度我们也给它定下来，因为我们在PC段嘛，这都是固定布局啊，都是固定布局，你给它定下来就行了，这个宽度是一个一百九对吧，190，所以基本上这个ul大小就是一个宽是190，高是470，那我们直接在这写样式，我给他来一个class啊，Class我们叫做一个img的一个这个list啊，Img的一个list，然后在这儿我们直接写了，直接点一个img，诶img一个list，我们这个列表，哎，Y是一个一百九啊190，然后高度是一个470。

那这个时候我们就把它的宽高都给它定下来了，但是其实你看到这儿可能跟你想的这个不太一样，因为很明显这个宽高写完了似乎没什么用，为什么没用呢？因为实际上这一堆的图片它已经超过了什么呢？超过了我的这个ul的一个高度，所以现在实际上图片从ul里溢出了，你怎么能看出来，我这直接来一个overflow hidden，你来看我给你裁一下，你看实际上现在我ul只有这么大格，但是由于这堆图片溢出了，所以这块是就就出来了，但是现在实际上只有这么大格，我先给它裁了，但是很明显裁了有问题，对吧，我先给他裁了啊，那这里边我们写个注释啊，写个注释这个是什么呢？这个是设置我们这个外部的一个ul的一个样式，然后呢，我们注释一下啊，我写的细一点，这个是设置我们ul的一个宽度啊，U1宽度，这个hat呢，这个是设置，设置我们ul的一个高度。

啊，这么一个东西，然后下边这个是设置我们什么呢？这个是裁剪，哎，裁剪我们的溢出内容啊，裁剪我们溢出的一个内容是这么一个关系啊，往下写上，然后再往下的话，我们再看，那首先啊，这个东西其实放到这个位置也也可以了，如果你想让它在这个好看一点的话，我可以再给它设置一个什么呢？设置一个marin，我们来一个零，来一个这个凹吐，或者说在我的屏幕当中干嘛呢？哎，居中啊居中，当然居中有点太靠上了，我可以再给他来一个这个50个像素，让他往下往下挪一点，当然我们真正开发的时候，真正写这个页面的时候，比如只写京东这个页面这一句话是没有必要的，因为他很明显它在我这个页面里，它并不是居中的，而是大概是靠在这个位置对吧，这个时候再说定位就行了，因为现在我只写他一个，我放中间呢，我稍微得看一点啊，所以我就放在这儿了啊，这个东西我们来说一下居中，我们之前已经讲过了啊，左右外边距设置成凹凸，它就会水平居中啊，这个是。

指我们这个，哎，Ul，诶在我们这个页面中居中啊居中，那这里边注意了，我们实际开发中啊，实际事例中我们不需要这么写，也就是说你的东西如果就是你说做一个整站，做一个完整页面，这个东西是不需要写的，我们只是什么呢？演示是需要啊，演示是需要好写完了以后呢，我们再看，看到这儿以后啊，我们就要看一下这个东西整个写完了，写完了以后啊，这图片就不对了，图片现在只显示一个部分，刚才我们写了overflow hidden，我们是不是把这个多出的图片给它裁剪掉了，那我现在希望图片给它显示的完整一些，那怎么办呢？诶，那在这里边我们需要给它设置一下，诶设置我们这个图片的一个大小，怎么设置，我们直接来一个点一个img list下边的MG，我们只需要给它指定一个宽度，那注意了，我们之前也说了，你在。

去设置图片大小的时候，往往我们只需要去改一个，不需要全改，因为你改一个以后，你改了宽高会随着你的宽度一起改，诶它会保持这个图片的比例，你改了高宽也会随着图片一起改，只要改一个就OK，这儿也一样，我们没必要说把它的宽高全都给它定死，你像说什么呀，老师你说我这量一下，我量这显瘦大，然后把宽高都给定死在这儿，没必要它这个比例，京东在整这个图片的时候，它比例一定是确定的，所以你只要把宽改对了，它的高一定没问题，所以这个时候我们就想一下，我希望它的宽是多少，现在整个这个是不是一个ul啊，那图片实际上是把这个UR给给撑满了，哎，给占满了，所以对于这个玩意儿来说，图片的宽度实际上就是百分之满啊，就是它负元素的100%，它的负元素是Li Li的宽度多少，Li是个块元素，它的宽度是不是就是UI的宽度，所以这样呢，就是Li多宽。

U多宽Li多宽Li多宽，那么img就多宽啊，就这样一个效果，你看我这一个整宽度一整完了，这回这个效果是不是就就没有问题了啊，就没问题了，很完美对吧？很完美好，那接下来我们再看啊，这么看上去好像跟我们这个图里边就就差不多了，对吧？差不多了，但是其实大体上看起来差不多，但是还有一些细节，首先注意一点，我们这个ul它实际上是有一个背景颜色的，虽然背景颜色不深，但是它也会有一个背景颜色，那这个颜色呢，如果从图片中取，我就可以用我们这个，诶这个截图工具，我们去看一下。直接干嘛呢？直接找一个屏幕取色器，我吸一下这个颜色啊，直接一吸啊是这么一个颜色，叫做一个F4F4F4或者诶你粘哎，就直接粘这16进制吧，我直接给它粘过来，粘过来以后呢，给这ul设置一个background color background color，我们直接写过来，诶往这一粘，然后再看效果，诶当然这个颜色好像看的不是特别明显对吧？不明显的原因是因为背景颜色是白的，这个颜色也基本上，哎这分号不对，这个颜色也基本上是一个白色，哎，所以不明显，你看这儿还能看到对吧？所以不明显，所以为啥子清楚一点呢？我呀，我来设置一下我们这个body的一个背景颜色啊，Body的一个背景颜色，我们这直接写一个body，哎，Background color background color，我们给他一个什么呢，随便找一个吧，找一个稍微的，呃，看看这个。

诶，这样需要这么一个颜色，然后我们是不是就很明显能看到这这有一个颜色了，哎，好，那现在我们来看有什么问题，那问题就是实际上在我们这个图里的话，你看图片之间是不是会有一个距离啊，而在这儿等于这个距离很小，并且其实大部分距离是不是都集中在这儿了，所以这里边我们应该给图片去设置一个下位根距是往下挤啊哎，那这里注意了，这里注意我们这个下根距不应该给图片，哎，不应该给图片，为什么？因为我们在图片外边是不是套了一个这个Li啊，哎，所以你你注意一下，我们在去设置位置的时候，基本上凡是说你想去通过外边距去控制一个元素的位置，最好是控制这个块元素啊，就是你只要是想布局，想调整位置，最好是通过块元素，不要通过这种行内元素，或者这行内块最好不要这样，当然不是说绝对的是吧，最好所以这个时候呢，我们这个编距应该是设置给我们那个图片外围。

的那个Li的，而不是应该设置图片的，所以这个时候我们再来往下走，直接这来设置一下。设置我们这个Li的一个位置，那实际上这也比较简单点，一个img，我们list，我们用一个这个后代选择器，我要给Li是不是设置一个下位边距啊，哎，多大个呢，是这么大一距离，我只需要把这个距离设置上是不是就行了，哎，我们来看一下我能不能量一下这个距离就不好使。

还是用我的这个截图工具啊，我们这量一下这个距离是一个。应该是一个九对吧，是一个九向左看上边啊。九个像素对吧？哎，量完了它等于是一个下颚边距，是一个九个像素啊九个像素那很简单，我直接给每一个Li设置一个下颌边距是不是就行了，哎，下面距就行了，所以这里边我们直接Li，我们来一个margin bottom来一个什么呢？来一个九个像素，那这样它的距离是不是就正好就出来了，诶正好出来了，那这样你这个东西写完了，就跟你那个京东那个页面那个一模一样了，对吧，也可以去点通过点也可以去跳转，然后这个编剧也可以去出来啊，也可以出来，诶那这里边这个东西写完了啊，所以这个练习呀，非常简单，自己做的时候呢，细心一点一定是能做出来的，当然这里边有两个有几个注意点吧，首先啊，我们来说一下，第一个在我们的这个页面里，有一些样式是我们真实开发中不需要的，我们只是作为练习的时候才需要写，像这个我们没必要设这么颜色，对吧？还有像我们这个marin，你这种东西，你要能区分这个是我干嘛用的。我就是为。

这个演示练习看得清楚一点，所以我才写的，但是在真实开发中，这个东西写出来是没有任何的实际意义的，这是第一个问题，第二一个问题，我们在写样式的时候一定要注意，尤其是PC端页面一定要先重置样式，你写那个星号什么什么的也行，你写引入重置样式表也行啊也行，这是一个，然后二一个你要注意，哎，你如果仔细看的话，你要看一下，我这写了一个marin bottom9PX，我用的是一个后代选择器，Img list下的limg list下的Li，是不是一共有这三个呀？哎，这三个，那我这一写是把这三个全都选中了，哎，全都选中了，那这个时候就是它有一个下位边距，它有一个下位边距，它也有一个下位边距，那也就是说它有可以，他有也可以，但是这个玩意儿是不是也有一个下编距，那这时候很明显他的这个下颚编距是不是就从这儿出。

来了，哎，从这出来了，我们来看看有没有啊，有没有直接来检查一下，我们看看有没有。选中这哥们，哎，你看一下啊，我们点中这个Li看到了吗？这是不是出现这么一个圈啊，哎，这个实际上就是Li的一个下窝边距，等于从那个元素里给它拱出来了啊，拱出来了那这个东西我们用不用处理啊，用不用处理，那注意这个问题一般也不需要去处理，看LY是不是它有一个九啊，诶，但是这个九实际上是在我们页面的外边，在我们这个不是页面外边啊，在这个ul的一个外边，这个问题需不需要处理呢？其实不需要啊，一般情况下不需要处理，因为首先溢出的内容我们在这儿已经overflow hidden了，我已经把它裁掉了，裁掉以后的话，你溢出的溢出它并不会对你页面中其他元素产生影响，所以这溢出是无所谓的啊，这是1.21个，你说老师不行，我瞅这玩意儿别扭，它不应该有，我想给它去掉，那你想给它去掉，那怎么办呢？你可以在这儿你加一个什么，哎，Li，这我们是不是之前学过一个这个否定选择器啊，哎，我直接冒号。

来一个什么呢？Last child干嘛呢？我去除最后一个，也就是说我只给前两个设置，最后一个我不设置，那这个时候这个LY里面是不是就就没有了啊，就没有了啊，这么写也行，或者不写，其实效果也是一样的啊，所以我们真实在写的时候，我们全都以什么呢？全都以实际效果为准，你说这有一块边。

不应该有，但是有了也没影响，没影响无所谓，懂这意思吧，哎，一切都以实现效果为为主啊，为主，好，这是一个问题，然后还有一个问题，你要注意我们写样式的一个顺序，我在style里边，我们写这个样式的一个顺序，你看我body一定是写到最上面的，写完包里写的是img list，然后写的是img list下载Li，然后写的是img list下载img，你注意其实我写的时候是先写的，它先写的MG，然后我在写Li的时候，我特意把Li放到了img的前边，诶，如果你注意到的话，那这个时候为什么要这么设计？哎，因为我们在写这个CSS的时候也要注意层次关系，为什么包写到最上边，因为包是不是最外围的，哎，最外围的如果还有HTMMR，那HTML肯定写到什么呀，写到body的上边啊，所以为什么后写m list，因为IM list是不是body的子元素，所以它一定写到body的下边，它写上面都不。

合适了啊，然后Li跟MG的关系，Li是img的负元素，所以Li一定放到img的上边，哎，同学老师，那你你这么写对样式有没有影响，没有影响，你把玻璃写下边，你把这东西写上边，效果显示效果是一样的，但是我为什么要这么写，这么写的目的就是我们这个结构层次上更清晰，我找起来更方便，我一看到img list，我就知道Li肯定得它下边不远的位置我就好找，懂这意思吧，所以我要找的时候就方便一点，结构弄起来清晰，你维护起来也就更容易啊，就更容易。所以这个练习虽然很简单，但是你自己写的时候也需要去细心的写一下，然后刚才我去做的时候，实际上我用了一个比较笨的方法，我直接用截图工具去量的这个这个图片，但是我们真正在做的时候，其实哎，我们真实的网页是不是已经有了，网页已经有了那一个大小，其实最简单的方式，你就不用再去说。

通过截图工具去量了怎么办呀？打开你的开发者工具，你往这一放，直接找它外围放的是一个，它应该放的是一个div对吧？Div直接放进来看它这commut的大小是一个一百九乘以470，你在这儿是不是就直接看见了，哎，图片多大你也可以直接看见外外边距的，对，它有没有外边距啊，它这放的是一个。我们来看一下这个结构Li。Li里边又放div，它这结构还挺复杂，你看它这里边，它的这个外边距是给谁的。哎，微问距是不是给的这个超链接的呀，哎超链接的，那你看它这个慰问距是不是设置的就是一个是一个实像素吧，哎，它设置的是一个实像素，但是在我们这其实哎差不了多少啊，我看是不是都是十。这也是实啊，这也是实。哎，这也是十，那等于其实更标准的写法应该是一个十个像素，所以在我们这儿，我们也可以给他改一下，我直接给改成十个像素就没问题了，因为刚才我们量的嘛，量的势必它多少会有一点点的这种这种误差啊，调十个像素也没有问题啊，诶这图片我们看一下。

看看这有没有问题，我开始是九像素。主要看什么呢？看这图片有没有被被裁的部分。哎，那这块其实九像素跟。哦，实际上我这块我如果设置成十像素的话，我这个图片底边会有一部分被裁，嗯，看的不太明显，但是实际上对我这个页面，对我刚才写这个东西，应该九像素应该会会更合适一些啊，九像素会更合适一些，为什么九像素更合适呢？因为这里边实际上我们在写这个页面的时候，它之间会有一个默认会带一个距离，大概有一个一个像素一个距离啊，大概会有一个一个像素距离，那这里边，呃，咱们就这样，你先按照我这个写，写一个九像素，它里边包含它实上实际上隐藏了一个问题在这儿，现在暂时还体现不出来，到时候我们再去单独讲完字体的时候，我们要说一下这个问题，你也可能会奇怪，诶老师你要讲的是讲的是这个。

讲的是这个图片跟字体有什么关系，诶，图片还跟字体还关系还比较大，所以在这儿还是先照着我这个写一下，然后你要知道不一定非得去量图片，直接去在网页里面拖它的大小，你一下就能干嘛，哎，就能看出来啊，一下就能看出来，好，这里边我们就不多说了，我们停一下，待会自己来把这个好好的去写一下。