00:00
好,那么继续来上课,那么这节课呢,咱们再来看一下咱们的这个大屏的显示啊,那么大屏里边呢,咱们是要也要有这两个东西对吧,那么一部分来做,先看大屏显示顶部,这两个大屏显示顶部的东西啊,先给它做出来,那么一样找到这里边把它缩小不用了,大屏显示顶部这是左侧,这是右侧对吧,那这里边直接我们给他一个class叫做LG杠。Top的left左侧,那么有左侧,也有一个右侧。Class class这里面的它的RA就是右侧啊,然后右侧这里面都显示什么,右侧好像比较显示的比较少啊。好。右侧有一个热销图书,然后带了两个点对吧?诶带了两个点啊,这个两个点也一样,你鼠标放到哪块是不是显示哪块的内容啊,对吧,那OK,我们把这个热销图书带两个点,这个比较简单,我们先做它对吧,那直接。
01:00
放到这里边。叫做secret selection,一个热销图书,然后还有一个两个点ec里边我给大家放两个SPA吧。CTRLCCTRLV对吧,这两个点,这两个点我就直接给两个一占位了啊,两个一占位,那好现在我们再回过来刷新看它的。右侧是这样的,那么是不是一样,我需要给它设置伸缩和呀,那么找到右侧这里边CTRLC拿到。秒杀商品。完事,完事,完事。好从大屏这块开始,对吧,大屏的top,大屏top里边这里面咱还给他设置了selection。的的。和。我先看一下我复制的这个名叫什么名吧,叫right对吧,那这里边原来呢,它是有两个,我们没给它起名,所以它才变成了这样的,那OK,我们就把它我先看一眼啊。Top。大屏显示。
02:01
大屏显示左,大屏显示右,然后这里面有个top top的宽度,我把top的宽度设置70%就可以了呀。Top宽设置70这两个我为什么要设置它呢?一个是哦。一个是里边的这个内容是70%,一个是30%,OK,那知道了啊,知道怎么回事了,就把它删掉了啊。删掉了好了,删掉以后,那这里边我就得重新去调整了,那就是点。它这是一个,还有一个点LG。杠。Right里面的TOP2个。好了啊,这两个,那么这两个我们先给了一个边框啊,包ER杠一像素实现的红色,因为我需要重新调整了,然后这里边也一样,B的包杠一像素实现的红色,两个都给红色了啊,现在你来看啊,我这里边在我的这个大屏的这个top里边是不是有这么两个东西,对吧?那之前我是用select做的。
03:00
这种连贯选择现在我给他取消掉了啊,现在你看我再来刷新。你看热销图书在这儿呢?还少一个呢。我的麦子呢?啊,这块改成top了啊来。Life是不是在这儿呢?一左右对吧,那么一样,这里边我们可以规定一个是70%,一个是30%,那它的这个宽度70%。70%,然后同样给他设置一个。Box-size等于border box,那这里边也一样,Wi,它的宽度是30%,然后同样box-size等于border box好了。这回我们再回来刷新。OK,没有问题对吧,没有问题,接下来就是热销图书,热销图书就是red这里边同样它也给它做成什么伸缩和这里边有两个元素嘛,所以接下来是一左一右的对吧,一左一右以后,那这里边干嘛,是不是一左一右的去排排版呢?那这里边我直接是。Just content为什么为around啊,中间两边留有空白,然后中间呢,干嘛呢,这个中间也是有一些这个空白的,对吧,咱们看下原图,它两边有没有空白,两边也有这么一点空白,对吧?但是它好像不是用这么做的啊,那我们也就别这么做了,那咱们直接就是一寸呗。
04:17
BTW,那他怎么做拍顶对吧?上下左右各为十像数,是不是也可以啊?走,你。是不是这样的了,哎,那同样这两个,这两个什么,这两个这个叫做。SPA标签吧,还是什么标签,你看啊,在red这里边,这里面是不是还有一个SL里边是不是还有个盘标签,哎,那OK,那我这块再这么选择啊,叫做点LG。下边的对吧,它里边的selection selection。里边的什么,里边的SPA对吧,那OK,里边的SPA。啊,我直接给它变成什么,变成这个date为inline block。
05:02
音了block是吧,行内跟块状,哎,WTH宽度,比如说给它十像素高度,我给它像素,然后接下来干嘛包的bur。包杠radiOS,那给他50%是不是它就是整个一个圆,然后呢,它的背景颜色叫做井号。井号,CDC。好,现在你再来看啊。走,你。是不是两个点有吧,哎,两个点有了,那这两个一就不要了吧,来把这两个一给它删掉,删掉好了。刷新一下OK,俩点是不是过来了,俩点过来了,其中有一个点默认是红色对不对,所以这这里边SPA的话,我给他一个class叫什么呢?叫做这个,比如说叫做呃,How吧,就叫how啊,How的话,那咱们现在没有这个,没办法去做它啊,所以我这里边直接点how,给他一个这个b ground为这个井号C00吧。反正它也是红色。
06:00
默认它有一个。诶。B。井号C0000,然后点how hov,它不让我用how吗?Class how class how。HIV。Hi。选中了一个什么active吧,Act啊act active,然后这块有也一样,我叫act,好了我给设置它了啊,那这个时候咱们来看再返回来。刷新。嗯,没加上来点一下。Active加上来了吧,Active加上来这里边你看它的这个背景颜色是不是没有它的权重高,看到了吧?哎,为什么没有权重高,因为你看我这里边是连贯选择的,而它呢,是这么选择的,所以肯定不行对吧,那不行的话怎么办?呃。我这里边就算用用它,看看可不可以important important啊。
07:02
给他提高一下级别,来走你。是不是也不行,因为它权限在那呢,啊权限在呢肯定就不行,所以这里边我要想设置的话,我应该怎么设置呢?我应该是这么设置给它加上来。把它都放到这儿啊,SPA叫点ADD,那这个时候。它我就可以不用了啊,它只能在同级,因为选择器还有什么,还有这个等级的吧,对吧,我一个class选择器是吧,是十十分,这一个标签点是一分,那我加在一起还12分呢,对吧,这一个class就一个十分,那肯定没有他高嘛,所以他不可能听他的了,那现在再来找你。你看是不是就变成点了。对吧,那OK,那这块内容搞定了,搞定以后你再来看啊,看这个热销图书它是红色对吧,那同样我们需要给它设置一下,那在这里边的selection selection。好。LG。下边的。Right。里边的secret,然后color变成什么,变成红色叫做re啊,这回我就不需要区分它是第一个还是第二个,因为第二个里面没有字体,对不对。
08:10
好了,变红了,红完以后它还得是怎么样,加粗吧,那叫做front杠,W为boat加粗,加粗完之后,比如说这里面front size s,给它调下为16像素。16、劈叉好。走,你。OK,没问题对吧,热销图书,那你看它这里边有没有加粗啊,我忘了这里面这里面没加粗是吧,那OK,我们把加粗给它去掉呗。加粗去掉,直接把字体调大就可以了是吧。刷新一下。好了搞定了,搞定以后接下来什么?接下来就是左侧的内容吧,左侧内容话会比较多啊,左侧咱们来看一下左侧有什么,有秒杀,这是一张图片对吧?然后有个小闹钟,还有小闹钟呢,图片分享闹钟呢,我看一眼啊来一面就这里边刚才我们看到了有个秒杀对吧?那小闹钟。
09:02
什么钟在哪呢?看看有没有啊,肯定有,那他要是这样的话,它就是一张图片了。小闹钟,这是什么东西?创意三国不是。啊,这呢,看是不是有个小闹钟,也就说它两张图片对吧,那OK,那这就相当于这里面是两个div对吧,两个磁盘标签,然后这还有一个机电厂,机电厂机电厂那就三个磁盘标签对吧?那好了,那接下来就来吧。在这里边找到大屏显示顶部这块的对吧,里面有第一个select,这是需要去设置它的这个背景图片吧,哎,那。啊,还是定义吧。叫做LG-SE。杠,Image没有这个名对吧,那OK ctrl c ctrl v2个image的,两个图片的对吧,然后一个是内容的,内容的我就叫做test好了,这个内容里边都有什么东西,我们来看一下啊,图片呢还好说,内容里边的话。
10:05
就直接是。三个内容呗,几点场几点场几点场是吧,那OK SP spn对吧,比如说哎,他怎么写的,00.00场啊,零零冒号零零场。好CTRLCCTRLVVV3个,好三个,这三个有了以后一样,在这个图片里面,我是不是还有时间,比如说零零冒号零零冒号零零,当然这里面不需要给冒号,因为它因为图片它自带冒号了,对吧,我只需要把这个值定位到这里就可以了,也就三个零零啊。刷新。都有了吧,你看0000,然后最上面还有一张图片,那最上一张图片我就可以直接用一个面积标签来了吧。我看啊,我还用以魅体标签,还是用什么,不用我就给个一占位,不用以魅体标签啊,因为我这两个类是一样的类,对吧,好了三个元素都在这里了,那我直接去找找他。
11:04
来找到left区域这里面啊,Left里边的。点啊。给它直接先设置了this play为有那就重复了是吧,在这里边啊this play为为什么为伸缩和吧,哎为四和完以后,现在他先不要啊,那我们来看。至少这三个家伙。现在是不是已经过来了,过来以后呢,接下来他们每个人的宽高是多少啊,那宽高是多少,我是不是就得看到图片的宽高是多少了,对不对,那OK,咱们先找一下这个图片的宽高是一百三乘39,对吧?然后再往下来,这个图片的宽高是64乘39,也就是说它高度都是39吧,那好在这里呢,我们先给它设置一下啊,也就是这个点。他。Top里边呢。不叫image吗?我看那图片名叫什么名LG啊。
12:04
好一面积,它的宽度WTH是多少来着?100。高度吧,He。39PX对吧,宽度多少忘了,不不敢不管了啊,这里边我在想什么呢?是这样的,就是我有一张图,我给它定义成什么背景图,一张图我给它定义成正常的图啊,所以这个一里边我就直接给他一个图了啊image这里面加一个什么呢?叫做当前目录image下边的那个秒杀。就这个字。Ctrl ctrl c OK,我直接把它拿过来啊,这里边我看好了我定义的背景图啊,那这个就叫image了,这个叫back image b back image好了。这样都不冲突来刷新。OK,秒杀这里面是不是有了,哎,有了以后呢,接下来呢,接下来是不是就是这里面的这些文字了,对吧,就是再往后这个零零的这个背景图了,那我先设置它。
13:06
这个我可以先不设置了,给它注释掉,一会儿再说来设置第二个,第二个的话,它的宽度是多少,我们刚才看到了,对吧,还有它的高度是多少,我们刚才也看到了39,然后它的这个。宽度呢?闹钟闹钟这呢啊。这里面多少?一百三乘39吧,那OK,它的宽度是130像素对吧,高度是39像素,然后b back等于什么呢?等于。URL还是一样,选路径当前目录,Image不对,它不是当前了,它是点点杠上一级,Image是下边的。这个名。好,现在我们再来看。走,你。好了。这个图片是不是也有了,哎,也有了以后接下来这两个零零肯定是要都要定位到这里边的地方,对吧,都要写到这里边每一个位置,所以这里边肯定是要有定位的啊,肯定要定位的,包括现在你看我图片缩小缩小,诶说到这儿对吧,不管说到哪,它都是要定位的,对吧,那先不管它这个零零了,一会定位再。
14:10
先直接写了吧,反正都写到这儿了,那它的定位。这里边的0000是SPA看到了吧,那也就是说这个负层。这呢啊,这里边没用磁盘,我直接用的是这么零零,那肯定不行。这里面直接一个零零,CTRLCCTRLVVV,三个零零啊三个零零好了,那这回我再来去选择它。它的父类看好了,我先给他做一个定位,Process叫做,然后它的子类我是不是就可以做这个。SPA啊,就可以做绝对定位了吧,POI position等于阿8LO,然后给它这个left对吧,距离这个左侧是多少?我可以先从右侧开始啊,距离右侧,比如说我让它成为0PX对吧?现在所有的SPA都距离右侧零零了,你看过来。
15:04
是不是都在这儿呢,三个盘都重叠到一块了,对吧,然后呢,这里边一样top。泡泡。Top等于多少top,比如说我要往下1.5PX啊。刷新。OK,在这个位置对吧,但零零肯定也不好看对吧,所以这里边所有都从三开始啊,距离走出三项数。诶相当于中间了吧,哎,相当于中间以后呢,接下来是不是开始这每一个这个方框里的了,那每一个方框里的,那就需要去调每一个了,那这里边CTRLC。CTRLV冒号叫做last last last杠。Oh four。倒数第二个对吧,第一个我就完全可以用它了,所以倒数第二个我需要怎么用,我需要去调整它的这个right的值吧,比如说距离左侧为多少,为23PX啊,我先。
16:00
这个手动给的啊,24啊来过来。过来。为什么没过来看一下吧,这里边先找到这块啊,找到这块以后,这里边的第二个磁SPA是不是,你看第二磁盘还在这儿,你看第一个磁盘在这儿,第二磁盘在这,第三个磁盘是不是也在这儿,哎,所以在这里边我再去设置的时候,那你就要看一下呗,点它这没问题,它里边的。冒号last of type。扫什么呀,少个NTH吧,哎,NTH-last-of啊,好了,那再来看so尼。零零是不是就过来了对吧?哎,过来以后呢,一样,它这里面24可能太少了,我们给他一个50呗。刷新。50有点大了对吧,那怎么调,咱不可能一步步调直接在这选择它。然后。这里边我们刚才是给的这块吧,距离这侧50对吧,来缩小四19,再缩小再缩小。这个位置是不是可以多少41吧,那OK,我们就给它41好,这一个搞定,搞定完之后还有第一个对吧,那就是点LG。
17:08
下边的。BA image里面的SPA冒号last-child last-child第一个,那它的第一个right距离右侧对吧,我也可以什么LA距离左侧,比如说为50像素。因为这几个都是定位的嘛,啊,那50在这呢,对吧,那50可能大了,这里面咱改一下为30好。刷新。你看在这了对吧,30可能有点太那什么了吧,30。八三十八。35吧。35啊35,然后top的值呢,我们再再往下1.3值为八吧。走,你。你看这位是不是都过来了对吧?八可能有点大为六。
18:04
为六为七对吧。哎,刷新是不是过来了,哎过来以后一样,你看这里面在缩小缩小在缩小缩小它了,是不是对它没影响,哎定位完事了,这块定位完事,接下来怎么接下来就是我这个这几点几点厂吧,几点几点厂,这里边咱们看人家的是什么样的啊。也是背景都为白色对吧,然后几点几点场OK,没问题,那咱们就来。返回到这里,这几点几点场是它它下面的SPA对吧,那一样的啊,这里边给他找一下。我们刚才设置的是。告image完事,Image完事。你没完事再要从他往下写对吧,它下边他先给它设置一下吧,叫做BRD啊,包一像素实现的红色这块写成什么呀,叫做秒杀右侧内容啊秒杀。右侧。内容,那我现在写的都是美化左侧的内容,对不对,那OK,来。
19:04
刷新一下看好了,它在这对吧,我为了能能垂直啊,什么都居中,那怎么办?我就给它直接设置一个display为false,然后。季。扎斯特唐为这个。Around吧。然后最后还有一个。杠items为啊,让它垂直居中啊,好了,现在再来走你。三个都有了对吧,有了以后,因为这个div就这么大嘛,对不对,所以这个不是div,这个盒子就这么大啊,所以这里面我给他调一下,并且d d ing拍冰。他们每个间距啊,里面的间距,比如说为这个上下为零不动了,左右为十。跟它有一些距离,好了,有些距离了啊,有距离以后一样,这里面为了防止其他的它的超出,我们继续给它设置一个box杠,Size等于border o。
20:04
刷新。这都没问题了,对吧,没问题以后是不是接下来就是里边的SPA,那就直接点。点点点点点他。里面的词SPA给他什么呀?给他一个这个r margin杠,Right,每个距离为十像数,然后这里边的字体方杠size还用大。那你看,走你。字体也变大了,然后还有什么,还有它的字体要加粗啊,这里面十有点小15吧,字体再给它加粗一下,放当为此为Bo好嘞。再来看。走你是不是就完事了,完事以后接下来干嘛,是不是就把它附类的这个图片不是图片边框都给它去掉,那就找吧,往上找,找到所有带包的这个东西没用了,对吧,取消掉啊。这一个。
21:01
那这块是不是就大屏这个大屏的left对吧?哎,大屏秒杀的顶部左侧内容啊。然后最后还有大屏秒杀,这几个都给他注册掉了啊来吧。这回是不是正常了,哎,那同样它们上面应该有点距离啊,所以这里面妈进上下给的十像素左右让它自动。上下为十,注意啊,这块为十的话不行哦。还是为零吧,对吧,让他拍顶那天冲十吧,拍顶上下为十左右零。好了。因为那天中时它会有背景看到吗?它是有这种背景的啊,会下来诶我的背景。今日秒杀,今日秒杀的上边看看有没有其他设置过顶部的没有对吧,那就是在banner banner这个里边哦,Banner这里边我设置了一个什么,是不是设置了一个。
22:01
什么东西啊,来,翻在这里边,我应该给他一个包的。不对,叫box杠,Size为border box。嗯。我怎么看这块像有条白线似的呢,但是可能是图片自带的吧。中间确实是有一条白线啊。这个白线是哪来的。我看一眼白线在哪出来白线,我没有设置这个白线啊。然后是这里面的一面。它的宽是这么宽啊,它的宽是这么宽,但是这个图片的宽呢,没有达到这么宽,所以它会产生了一条白线,看到了吗?哎,那好说,那这个井号班为了不让它显示这个白线怎么办?我们找到这个井号班ner呗,井号班ner给的这么高BCK加力白根主标上的井号F1。
23:02
这回谁能看出来有白线啊,对吧,我把它的背景颜色跟其他的背景颜色都调到一起的来刷新。好了,这回是不是就看不出来了,哎,看不出来中间是秒杀的,这个是就没问题了,然后但是这一块注意秒杀的整个的这个头部是不是都需要背景颜色是什么,是白色吧。那我们去找大屏的,从LG开始,LG的top,它的背景颜色BA KB kg Lu为井号F。FF,好。再来。OK,白了,但是这个白好像不对劲吧,我们是不是满屏白的,看看秒杀是。哎,不是。哦,你看确实啊,只有这一个区块是白色的对吧,其他的还是这个背景颜色,你看其他的。我们还是不要这么看这么看啊,好了,你看啊,是不是只有这一个区块是白色的,其他是还是这个颜这个颜色,那其他我再做这些也是一样的啊,瑞耀图书我们得先给他干嘛,先给它取消掉了,对吧,那先给热销图书给它取消了啊。
24:06
找到热销图书的边框。也就是他的right。这里取消。啊,看好了,这里面还有个下边框对吧,还有下边框呢,一会儿我们再调啊,先把它的这个目前的这个样式先给它取消了。好了,取消,取消完,接下来我们要调它的下边框,那下边框咱们来看啊,这里边有一个top对吧,我这个top里边是不是就有有下边框或者是什么,或者是这两个内容都可以对吧?但是你要看它的下边框是一起的还是分开了,是不是两个颜色。是不是两个颜色,哎,所以我只能设置谁设置这个top的这个啊,那OK,那就给他设置一下吧。嗯。Top right,它的这个边框给它设置成下边框。叫做b border-b Tom为三个像素啊,然后so为红色red好了。
25:11
走,你。来了一条边框对吧?当然啊,他们这里面是有间距的对吧,所以它下来那正常它是没有间距的,没错吧,那OK,先不管它这一个搞定,还有左侧的,左侧的是呃,黑色对吧,那再来找到左侧的位置。LG大屏左侧在这儿啊。他为。三个像素实现的井号。000,好。现在再回来。走你OK,搞定了吧,哎搞定以后呢,这里边这个副类最外层的负类的下边,下边的这个间距是不是就不能要了,哎,因为一要它就有什么有这个那什么了啊,所以它上边为十没问题,左右为零,下边为零。现在再来。OK,这是不是合到一起了,合到一起以后,接下来是不是就开始底部的内容了,底部的内容一样,那我们再回到这里面去看,分析一下它的内容,你看啊,这里面的内容。
26:11
这里面的内容也没什么呀。对吧,看看每一个都是什么,是不是跟就跟我们刚才设置的一样啊,Select product,然后两个三个四个。啊,这里边它应该是什么,给它分开了,我看有没有分开啊top。没有。看到了吗?这是一个啊,分了还是分了两个去做的啊,这里还分了两个做什么意思,就是他把这块内容看成一个,知道吧,把这块顶上内容看成一个,就是这个意思啊,这个意思好了,然后一样的,这里边还有什么,还有这个,这个叫什么小尾巴,这个图书对不对,哎,那OK,那这回我们先不管它,先看左侧商品这块了啊。来左侧商品找到。大屏热销图书,这时候是右侧内容左侧大屏,三屏展示在这啊。
27:06
这都是啊,LG大屏三屏展示内容,大屏商品展示内容,它是我们是不是给他设成一个了啊,可不设成一个咋的了,看到了吧,大屏产品展示内容是不是也应该理应应该是俩呀,对吧,这里边也一样啊class一个叫做LG。杠。Fat杠。呃。不叫,叫product product杠。Left左侧的。那同样CTRLC。这个。它叫右侧right it好了,一左一右啊,这个一左一右两个大明三品展示来刷新。都在这呢,对吧,然后同样我们去设置它俩一左一右的这个内容大屏左侧。
28:03
在这呢,这是底部商品对吧,底部商品它给设置了这么样,这没问题,其他的我不动了啊,高度呢,最后我们肯定不要了。然后呢,这里边继续。它的左侧。嗯,底部里面包含了左跟右。还有它的右侧。RIRIG,好了,我们先给它一个边框,Borderer移项数实现的红色,那这里边也一样,Build border移项数实现的红色,Re,好re啊。然后board OK。好了保存一下,保存完以后,现在我们再来刷新。看啊两个内容现在是不是有了,有了它俩应该是什么一左右对吧,而且占的百分比也不一样,所以这里面我直接displays,然后一左右的话。诶。它为ne啊,它不需要为F了,因为它在大屏的时候困在大屏的时候在底下这里边是不是就给它设置了,你看秒杀这里边。
29:04
是不是给他设置了,哎,所以他不需要了啊,不需要以后呢,我直接在这里面给他什么,给他当content为。一左一右一寸呗。好了,那现在再来看。刷新。一左一右了吧,一左一右,接下来我是不是就设置它俩的宽度了,那一个宽度是70%,70%。然后同样叫做。Box-size等于box,这个也一样,WTH,它的宽度继续3%。是A改分号呢?感叹号啊,然后books,当size等于border box好了。那现在这两个都搞定了,搞定以后咱们来看啊刷新。没问题了吧,没问题以后接下来在里面是不是就要显示它的这个各个商品了,对吧,那各个商品咱们来看,先看左侧的左侧这里边直接给它SEC selection删掉了啊,那这里面咱们就给两个商品两个selection。
30:00
SECTION。啊,先不用了,就给一个就行了,剩下那个我复制就行了,咱就做一行就可以了啊,然后给他一个class CL ass,等于什么,等于LG-PL啊,直接就叫这个了啊这个名里头还没有,也就大屏的商品,呃,大屏的什么商品呢,叫SE。杠。啊,目前我还没有叫这个名呢,看到了吧,所以不冲突啊,然后这里边会包含着这几个小商品,那这几个小商品跟刚才我们去便利的商品是不是一样的,对吧?所以我就不用再去做了,我就直接把这个商品拿过来就可以了啊,你看好了。嗯,我们在小屏的时候。移动端,好了,咱们找移动端的这个product。移动端还有零零的吗?热销图书。这是PC一共在这呢这里。看到吧,哎,这里面咱是不是设置了每一个。
31:03
哎,咱直接把这一个商品直接拿过来放到放到哪放到我现在这里边放一个。对吧,这里面总共有几个,有四个三。三四个好,现在再来看来。周NY。看。是不是就有了,哎,有了以后接下来干嘛,我是不是他的外甥是谁,他的外甥是他。对吧,LG的这个操作,所以我需要给它设置一个盒吧,那继续往里面点它,点它等于this play为file好。走,你。这是不是伸缩了?哎,那OK,那一样,我在这里面可以设置什么between吧,叫be b,呃,不对,是just content等于space between,让它直接顶到两边的格,对吧,走你。啊,看不出来什么效果对吧,好了,那这块完事以后,那接下来一样,我这里边。
32:00
哎呀,有点卡呀。好。没有没有问题啊,来看这里边不是这一行数据,是不是两行数据啊,两行数据的话我都不用动了,我是不是直接把这个selection ctrl c再CTRLV复制一行就可以了。因为移动端的时候是一下显示两个两行数据对吧,那你看跟他的这个。是不是也是这样,但是它这里面有什么,有这个叫边框对吧?哎哟,他这个边框有点纠结哦。他的这个边框可不好弄啊,是不是只有在大屏的时候才有边框,小平书没有对吧,你看它的边框设置的啊,挺恶心。挺恶心挺恶心啊。这个边框。那我们也找一下吧。我需要给谁设置边框啊,首先给他要设置个边框。就设置一条边就行,包的。Bar。Border UX等于border sex,然后设置边框border,杠为EPSSO,井号CCC,灰色边框。
33:09
先给我走出一条边来,看两个下边是不是就有了,哎,下边完事以后啊,注意这个红色边框咱肯定就不要了,找到它这个红right这个红色边框。嗯。不是他的啊。应该是上面这个红色边框给它的红色边框不要了,这个红色边框也不要了吧。这红车变框就不要了,咱们直接在left里边给他一个border杠,Right RI,给它EPSSO一个井号CCCC对吧,让它右侧也有个边框啊好了,那这个时候我们再来看。走,你。右侧的边框有了,横向的边框也有了,对吧,最外层的边框我肯定也不要了吧,最外层是谁啊,最外层的话是不是它。周NY。OK,最外层边框我们也不要了啊,那最外层我们要什么呢?我是不是要这个的左侧的这边的边框要有啊,哎,所以这里边咱们再去左侧的。
34:09
左边有了,同样你的右边也要给,呃,右边有了,左边也要给我一个叫做left。哎,这边也有了,接下来呢,接下来是不是就是每一个每一个这个什么,我是不是就可以给每一个商品了,对吧,你看好了,这个selection叫什么product对吧?哎,给它右侧的边框吧,啊给它右侧的边框啊,那给它右侧边框需要在哪?我需要在这个。检测这里面给才行对吧,因为只有到大病的时候它才有边框,小平的时候是没有的啊,所以这里边叫做。Bur border right为EPSSO,井号CCC,好,现在你再来看。周NY。是不是都有了?对吧,都有了以后,注意这边线是不是就明显加粗啊,因为它这里边有两个边框了,对吧,那我可以去掉一个,你看人家就是一个边框看到没有,哎,所以咱不要给它加粗啊,那不要加粗的话,那这里边。
35:06
咱就要去掉谁呀,去掉我的left的两个边框,我的右侧边框要给它去掉,去掉完之后再来回过来刷新。好,这个是不是就没问题了,哎,那OK,那我的这个秒杀商品区域做好了,接下来什么,接下来是不是就是内容这个这侧的这个热销的这个内容了,热销内容长什么样呢?我们看一眼先。这里面啊,这里面还比较好做啊,就是什么,就是一块一块的对吧,首先是先是一个大的div,一个大的div里面配合的什么,配合的是这么样的一个东西吧。来选中一个啊,来你看。哎哟,这不好选呢,我从这选吧。来,你看好了啊。等它亮,你看这是一个大的div,诶,又变了。等他回来你看一个大的div里面包含一个内容,对吧,就这边是内容,这边是图片吧,就这个意思嘛,啊,那OK,咱们就来做吧,在这里边一样,先找到我这块的内容,把它给去掉,去掉以后咱们说了,这里边有一个SEC ion selection对吧,这一个大的div,大的div里面会包含着两个小的selection,好了,然后咱这个叫热销商品,咱也没给它起个什么名啊。
36:19
来吧,还是用class吧,等于。SEC。SEC。G product杠杠。这也没什么,还是LG吧,大屏的SEL-p Du Du c dut-red,我也有了,对吧?哎呦,那这个名还不行呢。LG杠他杠left。这种该没有了吧,诶杠left啊,好了,就直接杠left了啊,它就是这个,哎,不是杠right啊,右侧的right啊。
37:00
It好。这是我们的右侧的内容,那么有了这个内容以后,那这里边的selection,哎哟,这里面怎么放了两个selection呢。哦,我是把他当成人啊,可以没问题。一个SP放内容,一个放图片嘛,对不对,哎,那我再看一眼啊嗯。这个来这么大,这都都不用都不用浮动了啊,这个都不用浮动了。都不用浮动了。行就先这样吧,我先给他设置个这个那什么。呃,右侧右侧。到这儿。叫做。热销。右侧内容对吧,好了右侧内侧右侧内容,那我直接把它加过来点点它对吧,点它以后我们先把它的边框给到啊来BD包的一像素实现的红色边框。有吧,看这个边框明显加加粗了一些,对吧,因为这里面没有内容啊,来这两边分别给他一下内容,这个给1111这块我需要给他一张图片叫做image,然后看一下它的图片是什么啊。
38:12
随便给一个吧,就它了。叫做当前目录里面就是下边的这个。好了,没问题,没问题,以后现在我们再回到我们这里面来,让热销展示出来,看这是不是就一个商品呢,但这个商品是上下的,我们需要干嘛,需要它左右的对不对,那左右的话就调整一下呗。这里边还是一样,Right,这里边我需要给它一个this play为S上下,上下完了以后呢,接下来这里边。呃。CTRC,它里边的e select冒号first杠,它的第一个WTH,比如说占位70%的宽度啊,占位70%宽度,那它的第二个呢。
39:01
还是这个里边的ec叫做。Last的就是它这里面总共就俩嘛,对不对,Withw占30%的宽度,那么一样给他一个包。Border board错了,Boxx。Side等于border box。这里边也是。BX-S等于box OK,那完事以后,现在我们再来看啊,它的一左一右。一左右看到有了吧,当然图片我得设置一下对吧,所以这里边的图片。这里边的图片,我们需要给他一个什么。里面的image,它的WDTH宽度就为100%就可以了啊,你只能有你负类的这么宽,你不能超出去。看到了吧,哎,这块完事了吧,哎,完事以后接下来还有什么,还有它的这个,呃,叫什么叫做这个顶顶上这个内容对吧?顶上这个内容的话,写的是什么内容,复制一个出来啊。
40:06
来,我先为了让他别老来回变呢。我先找到他。找到他。我给的是。我是用的GS做的,我记得这块。Whats?字母找GS。克拉木来删除掉。三除掉他们不变了吧?排变了吗?不是这。嗯。还是这里。
41:02
不行啊。那我就把GS删掉算了啊,直接把这三个东西赶紧复制一个出来得了啊。复制完以后,这回再来在哪,在这里边把它删掉加进来。哟,没复制过来啊。还是我卡了。完没复制过来,废废。CTRLCCC。CTRLC。这回应该没有太大问题了,OK,拿过来了啊,拿过来以后来看吧,这里边前面都是正常的字对吧,后面这么有一个背景,那不管是什么样的,我们都来给他几个,这个都给他,哎,这个div网控的div用用啊。Div是不是也叫区块对吧,我也可以把这块当做一个区块吧,哎哎呦,Div结束的div,然后这里面再继续。Div。结束的div。
42:02
Div。然后。结束的第二位,好了,那这块完事以后,接下来咱们来看啊,再返回到我们这里边。刷新。看是不是有了,有了以后一样,我把这个这里面的这个大小啊,先给大家打印出来,先看一下啊,这里面的selection。一左右它的第一个selection对吧,第一个selection我们刚才找了一个这个,一个这个,那OK就在这里边啊,第一个selection我来给这个包,等于一像素实线的红色,我们先看。看好了啊,他俩是一个在上一个在下吧。看到了吗?你看啊,我们现在都是什么都是平的对吧,你看一原图这里边啊。他俩是不是一个在上一个在下。对不对。那怎么调成一个在上一个在下呢?那不管呢,实际上啊,际上什么呀,实际上它的这个图片不是图片啊,它的这个内容就是这么高,我们就是给这么高的内容,但是图片呢,它也是这么高内容,但它没有显示那么高,你看好了啊,这是图片大小对吧?这是什么?这它select大小看到了吧?哎,所以一会儿我们也要调一下啊,好了,先不管它了,那大家知道就行了,那先把这几个文字我们先给它调了,文字的话,那我们继续找在这个第一个里边有各式各样的selection对吧?这第一个里边的secret ion selection,我给他一个什么。
43:32
Pad所有的都给拍,然后让它上下左右都为十。现在我们来看哦,我不对,我不叫来,我叫div。就这个页面来刷新。好了吧,哎,上下左右都为十啊,上下左右都为十,可能看着有点不太好看的,上下为五吧。上下为五,左右为十啊。OK这样的了啊,然后接下来呢,再往下来,最后这一个内容和这个内容是不是要调整一下,对吧,那也就是点儿。
44:06
这个太长了啊。直接复制CTRLC,它的第一个div和最后一个div对吧,那就是last-child的最后一个一个div,我们要给它进行一个设置了,叫build border,呃。算了,直接给背景颜色吧,来BCKGR,背景颜色为红色对吧?然后color景这个字体颜色为白色,井号FF,好了,那现在我们来看。刷新。看整个一行没错吧,哎,所以这个时候我需要怎么办,我要把它的这个负层,负层是谁?负层是不是这个,哎,把它变成什么伸缩核play为这个,然后让它主轴为什么为纵轴吧,那就是FL。为纵轴,好,那现在我们再来看啊。周尼。OK,没什么变化对吧,但他还是还是独占一行了啊,这个div还是独占一行,那既然他独占一行的话,这么不给我情面的话,我就可以用in block了吧。
45:05
刷新。有变化吗?也没有因为什么,因为它默认就已经做占满了这些了,所以你怎么设置的,诶你看啊,这是div。对吧,我怎么设置它也没有用啊,怎么设置也没有用,所以怎么办呢?我给它干脆吧,我给它变成什么变成阴烂的。周。In,是不是也不行?看到了吗?因为它占满了,怎么怎么都没有用啊,所以这里边我要想给他单独设置依赖的话,就别用伸缩盒对吧,不用伸缩盒啊,那这个时候你再来看。好了,这回是不是阴line的效果了,哎,有了这个阴line的效果,那接下来干嘛,咱就给它改一下呗,这里边既然已经找到了它的这个颜色。嗯,最后一个他对吧,给他一个for杠,RA disus,比如说给他十像数。让他出眼角呗。
46:00
走,你。啊,圆角太小了吧,你看人内圆角什么样的啊,人家圆角哦,看好了,人家这个直接就是一个行列元素对吧,也没给什么呃内填充对吧,所以这里面我们重新给他调整一下啊,这里边拍顶我还是要给的,对吧,但拍顶上下比如说为零左右为。我重新调整它的大小,重新调整了吧,哎,重新调整完以后,这里边咱们要给圆角大一点啊20%。好了,来刷新。OK,这个没问题了吧,哎,没问题了,但是这个圆肯定不对啊,我看啊,我们的这个高高没给,但是我想让它出现一个半圆的效果,我这里边直接给了个十像数。或者15像素就可以了,给他15像素吧。才能出现一个半圆。看到了吧,哎,那一样,这个要往后挪一挪,因为我刚才没动它,对吧,上下为零,左右为它,那我就给它个marin吧,Marin-Mar margin杠为五项数。
47:07
因为我有个内线距五了,所以我就直接往后移动五就行了。你看是不是图书这个就有了,哎,它有了以后,那么再来看,接下来咱说了图片是不是还得要再往下去啊。对不对,所以图片这里边找到图片呗,图片这里边,这是它的image,这是它的上边它的pad pading top给的30像素。距离上面30像素来刷新。好了,图片是下来了,这是不是一上一下对吧,当然图片我可以干嘛,再小我说不让它100%,我它80%啊。刷新。是不是就过来了,哎,那OK,那这块完事以后,整个的这个边框我就都可以不要了啊,找到找到边框在这儿是吧?给给不给呢?给给什么,给button bm,然后来一个井号。
48:00
井号CZZ啊。来吧。刷新。OK,这是不是就一个了,你看啊,诶怎么红色没去掉呢,这呢,红色在这呢啊给错了。把它。给他。这是不是就有一个了,哎,但光给他不行,还得给个右侧吧,你看这里边原图有没有右侧啊。原图。原图是不是还有右侧呢?哎,所以右侧我也要给啊,那OK,那就再来一个。这里边一个,它在CTRLCCTRLV复制一个,这里面继续把button换掉,换成RA右侧再加一个。现在再回来刷新。刷新。刷新,诶,我们的右侧怎么没有了。Bar-R。啊,好。
49:04
刷新。OK,右侧也搞定了吧,哎,搞定完以后,那接下来就干嘛,就把这个东西批量复制几个不就出来了吗?来可能就是C。把它CTRLCCTRLV2345。五好了,这回再来刷新一下看看。中尼。这里边是不是就有了,但是它有了以后注意啊,他有了以后有个问题,什么问题呢?你看好了,他两个永远不会是一边高的。看到了吗?哎,他们两个永远不是不会是一边高的,所以怎么办啊,你先看人家,先看人家那个原版的,原版这里面先看几个我们再说。几个一?俩。三四个人原版是四个吧,对不对,那OK,那我们这个版本也要给他四个才行,那我就别给五个了啊。首先先把数据给人保持对等的对吧,现在两边都是四个,都是四个以后这回我们再回过来看我们的,我们到底要调哪个位置能让它对等上来,首先啊,它这两边的距离,你看啊,上下的距离,我是不是还可以调呢。
50:14
上下的距离。你看啊,这里边整个它的最外层是谁,我们先找个最外层啊,它的最外层right right right再往上又一个right,对吧,Right的往上呢。是不是这个对吧,这是它的什么?它的最外层,它的最外层注意啊,它的最外层你看好了,我给它一个底边框啊,给它一个底边框。这里面CTRLF找到它。这不是在这呢,哎,它的最外层给它一个底边框杠,BOT Tom button为一项数,然后什么呢,然后。井号,CCCC。好,现在你先看他。周礼。
51:01
看好了啊,最底下这块它那块冰环是不是出来了,换个颜色吧,先不用CCCC了,先用红色red。Johnny。看是不是出来了,他出来包括它的右边,我是不是也可以也不用它了,对不对,那OK,再给右边。这里边B包的钢。RA EP sob,然后井号CCCC了啊,这个我也一样调成井号CCCC,因为我用这两条边能让他们干嘛呀,能让这两个元素相等吧。哎,那OK调过来,OK这个是对的啊,对了以后接下来这个这个边右边的这个所有的边框我都要取消了,所以我们找到它这个刚才设置右边的这个给它去掉,去掉以后现在我们再来看。OK,这回没什么问题了,对吧,包括最后一个元素的下边我肯定也不能要对吧,因为它一旦落下来以后肯定也不行啊,我们先把它的高度给它增高一些啊。调整一下吧,嗯,右边。再往下来,刚才我们给它设置的是上下距离为五,左右为十。
52:05
这个div是谁呀?我们看一下我这个元素设置是不是div是不是它啊。Selection。不是。Div应该是前面是吧,啊是看到了吧,Div div div就是它对吧,这是一个selection,那也就是说把这个整个right的高度我可以干嘛,继续再填高吧。哎,找到这个right right right在哪。Right,在这这里边我没有给他拍顶对吧?来继续拍顶拍顶,我不给他top,我就给它一个上下的距离为十左右为左右,也给了一些为五,让他再往里面挤一挤啊。好。刷新。是不是又往里面挤了,对吧,然后这个时候高度你看是不是就很离得很近了,哎,离得很近了,那接下来还要干嘛,我这个时候注意我整个这个内容啊,我有给他设置这个伸缩盒吗?没有吧,你看了最外层的right啊,最外层的right。里面包含了这么几个小right。
53:02
看到了吗?每一个小right对吧,所以它的这个right我们看有没有设置成盒啊。CTRLF。把它放里了是不是它它肯定没有摄入盒吧,所以这里面this play为false,然后让他干嘛,让他集中不是集中给它换成。纵轴对吧,然后再给它进行这个排序,给它一个呃,Just content为比between两边对齐。这个时候你再来看刷新。好了,两边是不是对齐了对吧?哎,两边对齐以后呢,最后有多条线嘛,这里因为最后面我们是不是有条线,所以在这里边我们需要找到它最后这一个元素,最后这个元素也就是他。我们是不是给它变线了,来看一眼啊,CTRLC拿到这里边继续CTRLV来查找。没有,刚才我看到我给变线的地方在这儿呢。
54:00
每一个右边我给了一啊,不是它啊,还真就是right啊,嗯,底部是不是每个底部我都给了一个边线,对吧,那咱说了应该是什么?应该是最后一个,这个底部不给吧,那最后一个底部你看啊,叫skill right skill right skill right是不是在这,哎,就是永远最后一个元素不给,那也就是说在这里边there school right冒号last down child的。For。杠bottom,为什么?Forder god。杠把它为,这不就取消它最后的一个边框,那现在我们再来看刷新。你看这回是不是就完美了?对吧,哎,其他的你看你看往下拉,他就跟着我走,没变吧,那好了,那接下来我们再来看。对我对于什么,对于我们的这个移动端会不会有影响啊,肯定是不会的,因为什么我们本来就以移动端为主了,对吧,说说看好了,这回有影响了,看到了吧,诶说说也就相当于我在说的时候,你看他们两个是不一样的,看到了吗。
55:04
哎,我底下的内容,因为这个这个这个叫什么,这个图片我给它固定了对吧,每个内容我们最小是多少来着,当时给设计的时候你看啊,我记得我给他设了个最小的宽度吧。来最小宽度是不是就一百二啊,所以当他缩到一百二的时候,他就不会再说了,对吧?所以这时候就不行了吧,但是注意其实这个样子对我有没有影响,没有影响没错吧,哎,这个样子对于我们来说是没有影响的,因为我们也不可能有这样的设备,对吧,一直在这这么找,因为走到这种,你看走到小于七百五的时候,注意小于到七百五的时候,你那现在是七百五对吧,当小于一下七百五的时候,我就已经变样子了,看到了吗?我变样的时候实际上对我来说是没有影响。对吧,哎,那一样,那当放大的时候,也就是说其实现在当它到这块的时候,有没有一样,其实是有的,那有的话我是不是也可以给他设置一下了,对吧?比如说那最小的高度就达到什么,永远达到我的30%是不是就可以了,对吧,那咱们来看啊。
56:00
我们随便先找一个设置就行了,这里边right的最小高度right是哪个来着?嗯,找他的大类吧。看好了,我找他的大类啊。这是泡泡的。是不是?Left,这是right吧,好了,这个right我们是不是给了诶。这呢啊,这个red我们是不是给了他一个最小的高度,最小的宽度,你看宽度是不是30%没有给最小宽度啊,那咱们加一个比如说MN最小的宽度,最宽度少,我可以给他30%可以不来。注意啊,如果在最小宽度上给的时候是没有什么太大作用的,你看啊。是不是还会再往里面改,我就如果是最小宽度,我就只能干什么,只能给它像素啊,精确一点像素就可以了。咱们找一下30%的那一块啊,这里边那就是它了啊,一个70%,一个30%对吧?来MN杠宽度,最小宽度,比如说最小宽度为多少呢?为300像素,如果我这么给的话啊,那我这里边所有的样式就都得调了。
57:11
好。现在是300对吧,我说说说你看这些是不是都在说呀,对不对,哎,所以这里边我应该把什么,把这些整个的都应该给他什么,给他们算好才行啊,我们这里边最大宽都做到750,那我就不能是300啊,我因为我那时候占70%的嘛,那七百五的话,我应该给到,比如说我给他这个200吧,给他200,其实200就已经很不错了,对吧,那它的最小宽度呢,M杠。宽度,那就是。七百五五百五呗,五百五对吧,那OK,这个时候你再来看啊,刷新只看左右啊。你看他俩是不是就不变了,看到了吗?不变了,哎,不变了,好,这回就对了,看到了吗?哎,那是不是还差上面这俩家伙,这俩家伙是不是一样的道理,我一样这么给啊。
58:00
对不对,你看。但是它不变了是不变了,它超出很正常,这块超很正常,因为什么我们这个宽度就没给它设置好,对不对,哎,所以这里边啊。我们在设置它宽度的时候,一定要去算好了才行啊,一定要算好它,你看你如果没算好的话,这就是这样的,但是我没办法去调整了,最主要调整就会很乱了,为什么?因为整个图片我是什么是这样的对吧?图片我就给他已经设置了,但是你看比如说正常我IPHONE678访问,这是没有问题的,对吧,我拿这个IPHONE678PLUS访问也没有问题,对吧,我拿ipad访问。你看ipad访问就有问题了,因为什么?因为我ipad没做这个东西对吧,但ipad访问的话,我就不要给他最小高度加上来了啊,不要给他加最小高度,因为要一加的话,我整个这里面所有的都要改了啊来刷新。Ipad访问现在因为ipad比较小啊,是不据变成这样的了,对吧,因为所有东西都在缩,你看到了吗?因为伸缩和伸缩盒嘛,它会根据你外层的元素的大小开始进行什么进行伸缩啊进行伸缩好了,那你看这里边缩缩。
59:01
说。你看他开始挤了,看懂了吗?只要挤了它以后,那就不行了,它就变不了了,所以这里边那就想不变的话,那这两个我就都该都给它设置一下啊。算了,给他设置一下吧,还是来。点到他。一个是这个对吧,可能就是C,我看它的。哦。给他最外层设置一下呢。它的它的这个宽度是不是没有对吧,那它的这个直接给他来一个,哎哎呦。他的怎么找到这儿来了?向上找。好了,这呢啊,看好了它的宽度是70%对吧,然后给他来一个最小宽度是多少啊,750像素,就你最小到七百五就不能再小了,对吧?那OK,这个时候你再来看啊。刷新。我只动它的外层啊,缩小缩小缩小,看到七百五后,是不是它就不小了。
60:01
看到了吗?它始终都这样了,诶就变了,看到了吗?这是不是就没问题了,哎,所以它的Y成七百五了,那简单了,那我还有谁还有一个right对不对?来top还有个bottom吧,应该是。叫做bott,你看没有错,甚至70%,它的最小的宽度也为750,哎,因为我们这里面最小的宽度就是750,好了,现在再来刷新一下啊。来,你看。这里面。往里边说说说说说,你看说到七百五没事了,对吧,一旦小了上来是不是都保持这这回是不是就没有bug了,哎,你看这个时啊来ipad pro访问这没问题对吧,然后这个ipad ipad访问是不是也没问题了,然后再往上还有什么iPhone叉,IPhone叉就变手机端的样子了,对吧,IPHONE6S。好吧,IPHONE678啊,包括I678大屏的plus嘛,哎,这位是不都没问。
我来说两句