00:00
哈喽,各位小伙伴大家好。我是盛硅谷前端讲师冉平老师。这次给大家带来的是继HLCSSJS之后的上优选PC端项。上次课程当中已经完成了放大镜整体的移入效果。本次课程将继续来实现放大镜的缩略图布局搭建。好了,咱们需要找到对应的位置。之前呢,咱们已经流出来了这样的一个。注释,写好div井号叫做left button。那么在这个整体的div当中啊,咱们来观察一下布局。40。这是咱们刚刚所说到的left。在left bottom当中啊,很明显分为了三个部分。
01:00
第一左侧的箭头以及中间的我用橙色来表示啊,中间你能够看到的这五张图片可视区域,诶,这个是一个整体的div。当然这个div里面,目前为止咱们只能看到这五张图。除了你能看到的这五张图之外,那么大家来想一想,我既然能够实现左右两个箭头的点击,那一定还有很多隐藏的图片,我应该是看不到的。对吗?诶,所以如果你在这里边啊,用列表来进行布局的话,最起码里边是不是还有一个ul来嵌套着很多的LY。是不应该为这样的布局呢?哎,没有没有毛病啊,好了,整个这个div后面还有一个啥呀。
02:04
是咱们的,诶右侧的箭头。这是咱们整体来进行分析过后它的一个布局,来咱们去给它加一下。在左右两侧的这个超链接,你发现它也是一个啊,左右两边这个箭头啊,它也是一个超链接。啊,也是一个超链接,好,我在这加上一个a javascript冒号分号来上一个斜杠。中间的区域,诶中间的区域呢,咱们起一个名儿叫做pic list图片列表。U,然后当中呢,有图片啊,因为下里边的来咱们看一下它的路径啊。对应的呢,是S1。一。来,我把它删掉啊,重新来。
03:02
1.png好了,此时到底有多少张图片呢?嗯,你也不用数啊,你看一下咱们啊,后期这块的一个数据是需要来进行动态渲染的。那么这块数据放哪了呢?放到了咱们date.gs里边的IMAGES2C这个数组里边。诶,放到了是这。所以啊,你目前为止,你可以把整个结构呢,大体画一下就可以了。A,到后期咱们需要来进行动态渲染,一二三四五六七八九十十一十二十三十四好。大题给个意思就可以了,里边的这个路径咱们没有必要在这改啊,第一呢浪费时间,第二呢,因为它真的是没有必要,嗯。在这个整个div的后面呢,还有一个向右的一个箭头。
04:04
嗯,好了,整个结构啊,咱们已经写好了,嗯,运行一下。内容的话已经出来了啊,咱们需要给它加一点点样式。打开咱们的Les文件,把它甩到一边,嗯,找到咱们对应的位置,这叫上边对吧,合起来啊,这写到下边。井号left button。大括号当中啊,咱们需要来看一下都有什么呢?有A。对吧,还有啊井号pic list等,在pic list当中呢,有u Li,有Li,诶Li当中呢有image。嗯。好了,整个的这个结构呢,咱们已经写完了,嗯,整个已经写完了啊好。来咱们看一下咱们的一个参数啊,它说放大镜里边的一个缩略图总宽为400。
05:09
A、总宽度为400。紧接着。上外边距为五像素,嗯,距离上边呢,有这么一点点的小缝隙。好,他说了,这个左右的箭头为十像素和54像素,这样看着写比较方便。来左右箭头统一的话,都是实像素的宽,然后呢,54像素的高,还有一个边框一像素实现CCC,诶还有一个背景颜色井号e be BB,嗯。那么对应这个文字啊,很明显它需要在这个框当中啊,呈现一个水平居中的一个状态。
06:02
还得再来两句话,Past。Center以及T多少啊,54素。嗯,54像素,好,这是咱们对应写进去的,来继续。然后他说啊,左边的这个按钮的右外边距左边,因为左右两侧呢,咱们都用的是A标签,诶在这我用一个引用它的第一个孩子,就是咱们左边的这个按钮右外边距。四项素。嗯,右外边距为四像素啊好。来,往下走,他说中间多图区域指的是这个pic list。宽度372,然后呢,高度为56像素。嗯。
07:00
里边的每一个。宽度啊,50乘以50啊,50高度50啊,还有咱们的边框。啊,一像素实现CCC,嗯。然后四周的内编剧。两项素,嗯,然后呢,右外边距。Mar-20像素。好了,整体的结构呢,咱们写完了之后啊,需要来看一下它的效果。嗯,咱们看一下它对应的这个结构好像有点不太一样是吧。那么在这里呢,咱们啊,不光要给这个LY呢,去设置它的宽,还有它的高,诶图片也得跟上,要不然图片的话就太大了,嗯,好,基本内容有了之后呢,我需要来观察一下,很明显咱们现在左侧的这个A,还有中间的这个div,以及右侧的A是不是都是在一条水平线上。
08:15
对吗?哎,都是在一条水平线上啊,所以难免呢,咱们需要得加点腐啊。给这个A呢,咱们去加上一个浮动。然后呢,给这个pic list呢,也加上一个浮动好,浮动加好了之后来整体结构已经比刚才要好多了啊,但是呢,这些Li还得让它变成到一行上面。给这个LY啊,怎么去加上一个display。什么呢,行内块儿。诶,行,那块好。那么这个行那块加完了之后啊,我需要让他来想一个问题啊。
09:00
前四个他已经上去了,诶平行了,那为啥我现在的这个第五个就上不去了呢。诶,但是想了,那一定是宽度不够了,没毛病啊,没毛病。这有这么大概四像素的一个间距对吧,然后每一个呢,还有50乘以50,且两边还得有一个小边框,相当于是一个52像素的宽度。中间呢,还是一个20像素的一个间距,那你就算吧,整体这样算下来之后,到这个位置,它的总宽度是不是就应该一定超过了它现在应有的pic的一个宽度。来,咱们观察一下。Pic pic,原本咱们给的是372。对吗?它浮不上去,是不是由于你现在那么多的这个LY37022能装得下吗?装不下。
10:01
咋整啊,诶,我让它既然形成一行,那么在ul当中是不是得加一个什么强制不换行啊。诶强制不换行好,那强制不换行了之后,那多余的这个部分。我还需要让他能看得到吗?诶不需要,怎么着啊,溢出隐藏针对谁?溢出针对你当前这个DIV372像素来说,它应该有溢出隐藏的效果。给咱们pic list里边去加上一个overflow。好了。整个内容有了之后,咱们需要来对比一下。发现了点,一丢丢的不一样,哪不一样呢,观察这里。看中间的这条缝。前四个的这个缝都很正常,对吧,最后一条缝是我要说的,这是不是也有一条缝。
11:05
对吧,哎,这是人家的啊,来咱们看一下咱们的。发现这个间距比人家大了这么一点。诶,每一个都大这么一点,每一个都大这么一点,那发现挤的到最后一个的那点间距是不是就不在了呀。原因是什么?哎,还是一样的问题,你每一个行那块是不是它默认有一丢丢的小间距啊,来,咱们去检查看一眼。此时我现在这个。你能看到。整个LA跟旁边的这个是不是有这么一丢丢的小缝隙。对吗?我就要把这一丢丢的小缝隙给它消灭掉。怎么消灭,诶,给ul加上一个font size等于零像素就可以了,好,你缩一点点它缩一点点那四个份总的这些。
12:08
距离加起来是不是就给到了最后这么一点点小的缝隙?诶,就组合起来了啊好,除了咱们现在的这个路径图片路径跟它不一样之外,整体的布局咱们是不是就已经完成了呀。那么在这里边需要来注意的就是什么?Ul当中的这个right space no。啊,这个地方强制不换行,需要来注意一下。嗯,剩下的话呢,我觉得没有特别大的一个问题,好了,那么本次课程啊,咱们已经完成了放大镜缩略图的整体布局搭建效果。
我来说两句