00:00
好,那我们继续来上课,那么上节课呢,我们将我们的这个头跟尾都已经做完了,那么现在开始做我们的这个主体内容了,对吧?那么主体内容的第一部分,我们先把这个今日秒杀做了啊,那么今日秒杀上面有个图片,有个这个乙面积,那我们一样需要有个乙面积的占位,对吧?那么之前呢,我们已经写过了,我就直接把这个布局先拿过来。那找到。这两块。OK。然后给它复制到,诶,我这里边需要新建一个HT文件,比如叫manin慢点htl OK,把它复制到这里面来好了,这两个有了以后一样它的CSS文件,那在这里边我还需要新建一个CSS文件,比如叫做ma慢点CSS,对吧,那么一样啊,这里边每一个我都单独重写了啊,我把foot特里面的代码ctrl a ctrl c复制到我的里边,CTRLV,然后其他的内容先删掉。内容删掉,然后上面的所有内容我先都给它删掉。
01:01
好了。然后呢,我在这个里面删掉这个代码,我拿过来了就不要了,然后还差一个style它的样式对吧,那样式今日秒杀,诶这块从这开始对吧,到到到到秒杀大屏底部OK完事这些。CTRLC放到我们的这个。慢点CSS里边。翻过来啊,然后还有什么,还有它的这个。大屏的吧,大屏导航秒杀在这儿。OK,秒杀,有这两个CTRLC拿到里边。Ctrl v OK,完事完事以后,现在我们来看下这个页面样式啊。好了,点击。哎,这里面是不是有问题啊,怎么所有内容都。显示了。我选择一下拖拽一下啊,你看斑的图片真没问题,今日秒杀图片。
02:06
大屏显示,大屏显示均化时间。不对吧,呃,我们调整一下啊,看一下啊。这里边。大屏显示的。来,我给换一下啊。这两个是我们大屏的对吧,叫PC的啊,PC这是大屏的哦,为什么不好使,咱们样式文件什么没引入过来啊,怪不得呢啊好了,这两个是小屏的对吧,这是移动端的啊。移动。But。对吧,然后这块我们在注释上叫什么叫做今日秒杀啊。今日秒杀。好,然后这块斑的图片,这里边我们给他一个image表。
03:02
Image当前目录I image是下边的,下边的什么?下边的B有个B点1OK,好了给这些啊,那么同样我们需要把什么把这两个链接引入过来,那我们去找一个这个foot这里面吧。然后把这两个链接CTRLC拿到我们的这个。慢里边不对,慢点。拿过来对吧,拿过来以后他改一下叫做manin,慢点CSSOK好了,现在我们再来刷新,看一下可不可以走尼。图片有了,下面内容你看好了,今日秒杀图片今日秒杀三这两没有隐藏对吧?哎,这两个没有隐藏啊,然后下面这两个显示了就是大屏的没问题,哎,他隐藏了,看到了吗。这个图片因为没缩小,所以它样式变了,不要紧啊,一会儿我们能调啊。这个没问题了。只是他在放大的时候,在大屏的时候,他们两个需要隐藏对吧,他们两个需要隐藏,那我们就找一下呗,呃,他要隐藏LG hidden LG hidden,我LG hidden里面设的是什么?来看一眼LG hidden在大屏的时候,LG。
04:08
点LGLG。LG杠的嘛,H。对了,Please play well。分为。刷新OK,这没问题了,对吧。哎,大屏的显示,小屏的隐藏好这就对了啊,这个对了以后,那接下来我们就开始做它了,做它咱先把图片给它改过来啊,这图片也有点变态错。今日秒杀再往前有一个banner对吧,BA叫做井号BA呀,Banner它的这个wath宽度我们就给它一个100%,那么同样井号这个BA的下面有一个image,那么这个image呢,它的这个宽度我们也一样给设置为100%,然后高度我们给它一个最大高度max,最大的高度你就只能为400像素,OK好了,搞定了,那现在我们再来看可不可以啊,来刷新回来。
05:01
没问题对吧,过来。走,你。过来好了,那么接下来今日秒杀图片,这里边呢,我们肯定要给他今日秒杀的图片吧,找到这里边呢,同样我们要给他套一个image的标签,对吧?然后这里他当前目录image下边秒杀图片叫什么名,我看一眼啊,找到我们模板,这里边有个images来拿下来。这是PC端的秒杀。移动移动端是他吧。对,今日秒杀对吧,那OK。这里边当前目录下边的叫做冒冒推桶,好了,现在我们再来看啊。刷新。图片有了,但这图片有了是比较大呀,而且这个今日秒杀时间,秒杀商品。这个我们给换一下吧。有时间不写到这里了啊。秒杀商品我再写到这里好了。上面他都给算成头部了啊,我都给他俩算成头部了啊呃,一个图片,但这图片有带链接的啊。
06:05
所以我们肯定得去变。有人说来刷新。今日秒杀时间,这没问题,然后秒杀商品,秒杀商品怎么上来了,秒杀商品是不是在这儿呢?11111。我们之前的样式是怎么给设定的?看一下啊,秒杀商品在这没问题。有一个哦,我们给它设置好了高度,看到了吗?哎,不设置高度是不是就好了,哎,那OK,那既然找到这个原因了,我们就调一下吧,找到开点不要了啊,福特也不要了,直接是慢点CSS这里边。秒杀这里面的高度我们给它设置了对吧,高度给它直接删掉啊,删掉以后这个背景颜色呢,我们直接给它设置,它有一个背景颜色,我就设置一个情况,F1F1,那OK button的高度也都不要了,然后背景下是 Ff1也都不要了,这里边所有的东西我都给它取消掉,咱们设置哪个我就改哪个啊,现在是改top的对吧,那刷新过来。
07:11
OK,没问题,Top有一个黑色边框对吧,但是top里面是有图片的吧,那也就是在这里边CTRLC拿下来这里边的image。对吧,给他一个wid去,它的宽度也一样,100%,就是随着我的负宽,它就多宽,那走你。OK,缩小过来了对吧,缩小过来,因为图片的背景颜色就白色嘛,所以这个其他的这个背景是不是依然是灰色对吧?那再往下来还有什么,你看好了这个人家这个按钮肯定是能点击的,对不对,那我也需要让他点击,那怎么办?最简单粗暴的方式,我是不是可以直接给这个图片再套一个A标签。A标签h ref。对吧,然后再来一个结束的A标签好了,那现在。刷新。你看一点是不是他也可以点击了对吧?哎,今日秒杀可以了,然后秒杀时间我们给他改一下啊。
08:05
这里边span span一个叫做。呃,什么零零。然后再来一个磁盘,咱们总共应该是几个 CTRLc5直接复制了啊十分秒,这就三个加上那个。参数也是一样,是零零十零零分,呃,不对,是零零。分,然后零零。秒。秒好了。那先,诶,现在我们来看一眼啊。刷新一下零零十零零分零零秒,那他们几个肯定得居中对吧?也就是说这个selection里面内容肯定得居中,但这个select是不是top下面的selection。没错吧,那OK,那找到这个top这里面继续。下边的。Selection。对吧,给它设置一个伸抽盒就可以了嘛,Files,然后呢,这里面再往下来是just content为c center,那你看现在他们这几个在里边。
09:10
是不是有居中的效果了,哎,有居中的效果,接下来我们再找到什么,找到这个span去设置吧,哎,这里边的。磁盘标签啊,磁盘标签干嘛呢?哎,没给磁盘啊。它下边的死SPA标签,咱们来看一眼SPA标签它是做了什么啊,来返回到这里,SPA标签你看是不是有这个颜色有背景啊,哎,还有宽和高对吧,所以这里边我统一呢,给它这里边比如说拍顶上下左右各为五像数。我给的是负类啊刷新,你看内容变大了对吧,变大以后接下来我再给他们,再给他的这里边的拍顶啊,给他这个,你看我现在我现在找的是不是所有的SPA,所有的SPA,比如说我给他背景颜色下面红色,你看行不行啊。找你是不是所有的为背景颜色都为红色,当然我只需要什么,只需要有数字的吧,对不对,也就是说在这里边我是不是只需要第一个,第三个跟第。
10:07
五个吧,135嘛,哎,那所以这里边我就可以怎么写了,这里边叫A,这呢找到它冒号NTH-Q的里边的ADD了addd。OD对吧,哎,让它什么基数变什么变成红色好了,那现在你再来看啊来走,你现在是不是基数变了,那么奇数变了,同样在这里边在干嘛呀。给他一个。呃,B素实现错了。Border-I disus让它干嘛?让它变成圆角吧,给它十像素。那我们再回过来。走,你。圆角是不是有了,但人圆角没有那么大是吧,人就这一边圆角啊,所以这边我不能给太大了啊,给他五项数吧,来。给他五项数,然后里面的字体颜色color为井号。
11:00
F。FFF,好。再来。刷新。字体变变了对吧,然后同样左右两边,我是不是还可以给他一些什么,给他一些间距吧,那padg PI丁,然后上下为。零不需要对吧,左右,比如说我给他3PX。周立。这没问题了吧,哎,没问题,以后几十几分几秒都有了,都有了以后这回我们要注意的是什么呢?最后它才是红的,前面两个是黑的对吧,所以统一我们再给它设置的时候,找到OD给它设置颜色的时候,井号变成黑色。000什么时候变成红色的呢?那这里面直接找这个SPA的倒数第二个吧。这里边的。Span对吧?NTH-of杠的第二个应该准确的是last。
12:01
Over。第二个对吧,哎,倒数第二个的背景颜色BCGR变成红色,好,那现在我们再来看。走你前面全黑,后面那个红,这是不是完搞定了,哎,搞定以后卸磨杀驴把它顶上那个有一个边框,我记得对吧,边框这个给它去掉了。好了。就这一个有边框对吧,有边框的这个,那我这里面都没写东西,我就直接都删掉了啊好,那这回再回过来刷新好了,第一部分搞定了对吧,放大放大放大就没有它了,对吧?那好了,那这块完事以后来缩小回来啊,接下来什么是不是我就秒杀商品了,秒杀商品那就看一下吧,分析一下吧,在这里边你看是不是有一堆商品,没错吧,哎,那也就相当于在秒杀商品这里边。来。找到秒杀商品这里是不是这里边不管怎么样。呃。
13:00
我看我是怎么给的,给的他这里面我加了一个selection是什么意思呢?这selection当时我们设置的是。我先找一下啊,我看我设置样式的时候,有没有设置它的selection。Button有了下面的select first。问他干嘛呢。这是。不要了,这个没有了啊。Last child也不需要,这里面就一个select,我给他设置那么多干嘛?给就给他个宽高,让他占位,OK,没了好了啊,什么都不给了,就先给他一个button,然后呢,Burder。Bur冒号。Epsled红色好了,现在呢,占的满屏宽,我们先看一下。来刷新。没问题对吧,哎,高度我们没给啊,所以它没有东西,那么再来一样,它里边还有一个叫做。什么东西,我没给起名吧,里边是不是有这个,哎,这里面我给它起一个来,Class叫做呃。SECKILL。
14:01
我这是小瓶的吧,Small啊SM,然后再往下来叫pro product商品嘛,啊,然后这里边再去给比如说它有。A标签,A标签里边有个image,是要放一张图片的,对吧,再来一个selection忘了。图片还有,哎,还有这条线对吧,这一条线,然后标题和价格,那OK,有四个lesson对吧,那我们先不管它,这里边继续这条线对吧,那我先给它定一个class吧,这个图片下面不就是线了吗?SE里面的。Li线。再往下来。再往下来。这个小瓶小瓶商品,我看一下小瓶商品跟大屏商品有什么区别啊?我需要给他重写吗?也是这样的吗?那不需要重写。
15:05
不需要重写啊,不需要重写的话,我把这个SM去掉了啊,就直接是这个名。SMall-product,然后selection图片的,这个图片呢,咱也可以给它起一个class吧,这个class等于什么呢?SE下边的pro pro。下面的image对吧,这是控制image的,这是控制线的,然后还有标题的ec,这里面来一个class,等于呃,SEK杠。Cat标题。标题完了,还有最后一个价格,S叫做class等于SEC-P价格,好了,总共有这么几个,对吧?那么一个个去找呗,先去写它的图片。然后这一个里边再写一个,这里面再写个,这里面再写一个,看没有问题。
16:03
图片是那个图片,我先把这个名,我先拿过来一个名在开头这里面就是给的名对吧,然后价格呢,我再拿过来,价格这里边也一样,CTRLC。我再给他一个价格,但这里边肯定再加个标签吧,来个盘标签吧,SPA到这块给他一个结束的SPA,然后下面这个二二十五是一个什么,是一个删除线对吧,那就Del,然后在这块来个结束的de好了。这两个有了这个线线的话,我看看啊线咱们来看这里边有一半是深色的,后面一半是浅色的,然后上面还有段内容也是浅色的对吧,那OK,那咱就也给这个叫已秒杀27%对吧,那好了,咱们来看EF selection。这里面给他一个class,叫做SEC。嗯。K,这个。杠。Pro。
17:00
Duct。呃,这里面规命名规则我都是统一的了啊pro那所有的类都是这个名。这个也一样。对呀,好了啊,看好了,这里命名规则啊,第一个是线,第二是它秒杀的,那我就起一个ec,这里边来一个class,叫做ec k。然后给他来个tlele文本的,对吧,文本咱们叫什么?以秒杀,以秒杀二十七百分之二十七对吧,一段内容的提示,好了,现在我们来看一眼吧,我们自己的来刷新。在这呢,对吧,那但是这个宽度我们肯定得重新给他设置了啊,找到这个。CTRLC拿到这里面来,接下来我们要设置的是。哦,好了。
18:00
秒杀。商品小屏啊,不用小屏了啊,就按商品,商品就直接写到这就行了,然后这里边一个一个来呗,先去设置它的最外层叫做什么叫做这个pro product。秒杀叫SE KL product,这是它的外屏对吧,W宽度,宽度应该多少,比如说我随便给一个,比如说这里面计算吧,Clc让它变成多少100%。100%除以四吧,啊这个宽度,然后再往下来呢,再给它一个包,Der EPS sob,红色给他个边框啊好了,现在咱们来看。现在它是满屏的对吧,当我再来刷新看是不是就一半了,哎,有这一半了以后呢,接下来开始是不是往里面添图片呢?图片是那个小图片,那我们再找一下那图片叫什么名。这个吧。哎,当然这里面图片你愿意用哪个用哪个啊,反正最后都得换对吧,我们做图书我们都得换成图书吧,哎,当前目录imes下边的。
19:07
又摁跑偏了,好,图片也拿过来了啊。这里边。刷新一下图片有了吧,但图片比较宽对吧,图片是不是随着这个内容的扩大,这个最外层的这个大小啊,所以这里边我们来设置它的图片,CTRLC好T。秒杀商品在这啊,那它里边的。里边的image的WD宽度为多少,为100%对吧,那现在你再来看啊。走,你OK进来了对吧,哎,图片进来了一样啊,这个图片进来以后我可以干嘛呢?我也可以再让它小一点,比如说我把谁呢?我把这个product这里边啊,我给它设置一个box-size等于border box变成这个怪一盒对吧?然后pading开始给它拍ing,上下左右都为五项数。
20:00
好了,这个时候你看啊,我里边所有的内容会对立的,对立里头都会有五像素的一个内容,对吧,好了,接下来完事以后,接着再往下是什么,再往下是不是就是我那根线了,哎,往上是不是就这根线了。那这个线叫什么名。LG top。啊,这是大屏的秒杀样式是吧?来这块备注上啊,大屏秒杀样式,好,那继续那根线叫做点SKL。Product GA。来这是这条线线一样线的宽度,比如说我给它100%,那么同样是不是还有条高度啊,Heg高度,比如说高度我给多少呢?我给他十像数吧,啊或者我不给十项数,我给什么呢?我给他一个这个ER rem是不是也行啊对吧?然后这里面比如说背景,背景颜色rgba我给多少25525。红色啊,红2525,最后点五让他干嘛,有个透明度嘛,那这个时候你看啊。
21:00
周NY。是不是就有了,有了以后注意啊,有了以后它能。什么呀,能与这两边都有一个。内间距吗?是不是不行啊,哎,所以这个内间距我直接设置负类的话有点不太合理,我要给谁设置呢,点style。不是,而是made永远给他设置一个pad PA。DD ing拍定为,呃,刚才是多少5PX对吧,那给它设置为5PX,然后同样这个渗轴核我应该给谁不是怪一盒,我要给他设置才行啊好了,那这个时候你再看啊,我的这个线是不是就满平了,是不是就顶平了,我要的目的是不是就让他顶平了,哎,顶平以后接下来呢,接下来在这里边。我需要干嘛,是不是给他进行一个。圆角b border-I dius,比如说给的十像数的圆角,那OK,我们再来看。走,你是不是就过来了?对吧,哎,当然这个十这个里面给的太多了啊,我们还给的10PX嘛啊。
22:03
阳阳是不是16了,哎,给它十像数十像素就可以了啊,这么大好了,这块完事以后,那接下来注意在这条线里边,就在这个标签里面是不是有两个元素,看好了啊。这个标签里面是不是有这两个元素。对吧,那一样,我是不是也可以给这两个元素也给他设置一个什么,设置一个伸缩核会比较好一些。这种行用不用设置伸缩盒,给他两个,给他两个,如果我们要给它设置成伸缩盒的目的是什么呢?好像也没什么太大的。作用对不对。没有太大的作用。嗯,先不管它了,一个月设置吧,然后这条线干嘛呢,这条线就是那个深色的线。你看这里边啊来。选择这块,这是不是深红色,你看27%啊来你看我给他加对吧,加的时候你看它是不是一直都在底下加呀,哎,也就是说它是什么,它是在它的底层的对不对,那OK,我们也给他设置一个啊,那就是这个。
23:06
线在哪呢?在这里边先管它,然后给他一个widt就宽度多少啊20%C对吧,然后bak背景颜色也为什么为这个A1000深红色,然后它的这个。宽度有了高度是不是依然是十像素对吧,那现在你来看啊,在这里边。刷新。看是不是有了,有了以后它是不是也要圆角啊,所以这里边我也需要给他一个border-red比如说也给它十像素,那这个时候来走你。圆角是不是出来了,圆角出来以后,我注意我的这个文秒杀的文字是不是要要它盖住它呀,所以这几个都要给它,干嘛都要给它做一个定位啊,那副类我给他一个process POI process等于什么?等于父类做成什么,做成这个叫做绝对定位,子类是不是就可以做相对定位,呃,做成那个绝对定位了,负类是用的相对定位对吧?那这里边我直接给他一个,呃,也给他个吧,或者是给他一个position也行啊,Absolute absolute绝对定位了,绝对定位以后我用,我只靠什么呢?Z引带来调成就行了,对不对?哎,它为一层,它为一层的话,我下面的文字点叫做SEC。
24:18
K杠文字是不是taste,诶,我文字叫什么名?文字文字文字配,哎,不对。秒杀,已被秒杀哦,怎么又写个开头呢?写错了啊,在哪叫test。好了,CTRLC,把这个文字拿过来,拿到。这里边来接下来我要调整它的文字大小了吧,那比如说它的文字,那我先调一下方特杠size吧,12像素让它小一点啊,12PX,然后接下来也一样,我再往下调,调什么?调POS等于阿巴UT,然后这个Z-ex等于几等于二是不是永远占它的上面一层了。对不对,哎,然后这个时候再来开始调它的这个内容呗,那这play它本身是什么,你看好了啊,我给它背景颜色BAGR,然后同样我给它一个这个。
25:07
Black啊black有了RG rgba,好,那继续25500对吧,之前那个我给的是点五,那这个我给他点八,让它再深一点设备。好了,再来刷新。一秒杀这块内容是不是就有了,有了这个点八有点太那什么了,还是点五吧啊点五。刷新,你看后面不是就有那个的透明色了,那么同样它是不是也需要圆角,那就继续给圆角吧,Border-b Di-radius为呃10PX。好了,然后一样,你看好了,这个时候我是不是要往右要移动一些啊,对不对,然后还有什么,还有个top top让它往上去一点吧,Top,比如说我给它一个负5PX。
26:00
你看啊。是不是上来了?对吧,哎,上来了,上来之后都一样,这里面所有的字啊和这颜字体的颜色我都调一下啊,Co为井号F字体颜色我调了,调完以后呢,我给他一个拍顶,拍顶上下左右。为二吧。周NY。诶,你看这回是不是就大了一些了,大了一些,注意它的这个位置是不是要居中啊,对吧,那怎么居中呢?咱们来看啊,我这个时候再教给大家一种居中的方式,我可以怎么居中,我让它left向左移动50%。50%向左移动50%是不是就到底儿了,哎呀,不是这个页面到这啊,你看。是不是到底了,到这个底了吧,到这个点以后还能干嘛呢?我再让他使用什么,使用translator transform里面的移动。再呢,向左移动百分之负50,它也是一种居中啊,Translator负50%。
27:00
它也能让这个元素居中,那你看。走你看是不是也居中了,但居中了,注意它整个这个内容是比较小的了,对吧,我需要干嘛,需要重新调整一下啊,那调整一下这里边呃,我看啊拍顶我应该是给拍顶值了,对吧?拍顶这里边上下为二,左右为零吧。左右不给了啊先。走,你。一样。这里边。上下为二,左右为零,那家伙呢?看是不是它的原因啊。他们两个一居中,它缩小不对50%。回来。那就只有我用这,我这里边用他这种方式还不行对吧,用这种方式的话,他还不给我居中呢,看到了吗?那我要想让这个元素居中的话,怎么办呢。不用看了呗。
28:00
注意它是可以实现驱动的,对吧,那一样啊,这里面继续调整,它叫做刚才我给了多少,我给的是。2PX是吧?上下左右都为二是吧?来先看一下啊。OK,没啥问题对吧,那咱改一下啊,上下为二,左右为五,让他再拉长一些啊。反正咱都不用这种方式居中了。这样的一个方式,对吧,然后接下来干嘛,接下来让他在这里面居中呢,我就调的类呗,类是谁是不是对吧,给他一个s play为fields,然后干啊叫just。Content为center。走,你。是不是也居中了,但注意啊,它居中了,那个底下的内容是不是也居中了,哎,那这个底下内容它始终靠左的,那好办,Left为0PX就好了嘛。对不对,那再回过来让他走你。看这不回过来了,哎,上下为二,我感觉有点大呀,我给他调一下吧,那上下为一就可以了啊,然后左右为五,这没没问题。
29:07
好,这没问题了,对吧,没问题以后接下来你看放大放大。放大变成大屏了啊好,小屏小屏小屏,这看一眼没什么问题吧,哎,没问题,你看它始终是在这里居中的,对吧,但是它P是不是有点偏上啊,我看看啊,我二。我总共的这个高度,这个高度是十像数对吧,咱们得算一下了啊十像数,然后呢,这个定位的这块。泡泡。Top我怎么定位啊?这里边的它当前的高度。12加。14。14。十四十四的话,我应该是负。二就行了,但这里面我加了一个什么东西来着,我记得刚才。给个负三负二负三吧,先给个负三,我们先看它的位置啊。
30:05
刷新一下。OK,这回这个差不多对吧。差不多对吧。嗯,有点也有点儿太往下了是吧,太往下的话那怎么办,那就负四呗。刷新。OK,这回没问题了啊,来。你无论是怎么拖。小好,你看在这个位置对吧,接下来我再拖再拖再小再小再小再小再小再小再小,这样肯定就不行了吧,对吧,也就是说它我是不是最给他设置个最小最小的这个比例啊,那一样,我看一下我们最小这个图片吧,以图片为主吧,最小图片是吧,116。我觉得这么大就可以了,对吧,所以在这个负类这里边负类负类。负的是他吧,百分之宽度为27,不对,这是烂啊。错了。这是负类对吧,给他设置的这个比例,那同样慢杠。宽度最小宽度你就不能再小了,对吧,最小为多少呢?须要比如说为一百一百六像素,160像素啊好了,那现在一样我刷新。
31:08
哟,一百六还大呢,那就少一点啊,最小为120。这回你来看啊,我再小小,你看不管我多小的时候,是不是都都这样了,哎,当然咱们浏览器肯定不能这么,就你浏览器可能不能说说没有了嘛,说成这么小嘛,啊好了,这没问题了,没问题以后接下来什么,接下来你看好了,我调成IPHONE678看啊。接下来是不是就这里面的文字了,那这里面的文字我也要调了,就是下面这这个内容的文字啊,开头的那找下来。再往下叫做点儿。Product。是啊,CTRLC。拿到这里边来啊,开始去设置它里面的文字吧,那第一件事方干12像素,这是没有问题的,然后PA顶padding拍上下为五像素,好,那我们再来看啊,少一个。
32:07
总理。OK,没有问题,然后接下来什么是不是它秒杀的价格呀,哎,秒杀价格这里面直接CTRLC拿到下边来,这里边叫什么pri。P,然后继续放的杠,Size也为12像素,然后pad pading定为。五像素好了,然后这里面因为它有两个元素对吧,我直接给它设置一个伸缩核,它一左一右去靠了啊,然后给它。Just content为BETWEEN1左一右的去啊,现在你来看。刷新。是不是一左一右对吧,一左一右以后中间这个内容我是不是得让它干嘛让它变成红色一点啊哎,这里边别上下了啊拍顶上边为零,左右为五,下边为五。
33:01
然后这里边我直接调他的那个颜色了啊,也就是说这里边的有一个SPA标签,他的他的为井号。红色。直接一个red。OK。刷新。好了搞定了吧,哎,搞定以后咱们来看人家这里面的。也差不多对吧,但是沿着这个字可能会大一些,看到了吧,沿着字不是12。那这里边找到红色,红色也就相当于这里呗。嗯。放的更SAD14。走,你。OK,秒杀价格大一些好了,那这块是不是就做好了,做好以后呢,剩下的干嘛,剩下的整个这这个内容找到我product的这个内容对吧,Product的这个CTRLCCTRLV这一个个复制,多复制你有多少条商品,我是不是就复制多少条商品就可以了,然后来一刷新,哎哟,你看全拉上重排了吧,为什么?因为它的负类,我们又给它设置成伸缩盒吧,那OK,找到它的负类,负类是谁,负类是。
34:08
这个家伙对吧,那OK,上上面去找去吧,找到这个button。Button在这呢吗?哎,咱们只给了他这个边框这个颜色啊,那这里边直接display为files,给他设置为深盒,那设置完深盒以后来。是不是都在一排了,你看都在一排了吧,哎,都在一排以后注意这里边我们应该啥,是不是超出能显示滚动条,那就overflow杠。X为凹凸。啊,水平超出以后,我让它显示滚动条,那现在你再来看。走,你。是不是就有了,看到了吧,然后接下来干嘛是把里边的所有的红色边框都给它注销掉,注销掉以后来再来刷新一下。好了,这回没有了。是不是商品就有了,哎,那同样你看这里边也每个商品的距离有没有啊。
35:01
那上面是有一些距离的吧。包括。呃,对,就是这个。来缩小缩小,不管多小,你看,不管人家多小,对吧,商品之间肯定还是有些距离的,你看。找到它的最外层啊,你看外层在这呢。看到了吧,也就说最外层的时候,实际上他还给了一个什么。你看这台pro pro实际上是不是还给了一个内间距,一个顶为十。看到了吗?那OK,那这里边我们再给pro大里边也一样啊,我再给它加上一个,我给我们就不给十了,我给个五。刷新好。这回是不是也看不出来它有没有顶格,是不是看着像你中间有距离了,对吧?哎,那OK,那这块搞定啊,来放大。好了,搞定以后那一样,这里面缩小缩小缩小都不影响对吧?哎,不影响啊好了,那接下来咱们再来看这一块的内容做完了,那接下来我们是不是就要开始做大屏的了,也就是说当我到放大的时候,是不是要做这块内容的显示了,哎,那好,那这节课我们到这里,下节课我们就来做这个大屏的显示。
我来说两句