00:00
在上次课程当中啊,咱们已经完成了左侧放大镜当中里边的所有。啊,左侧当中的部分呢,咱们就算是整体都实现完毕了,那么本次课程啊,咱们将继续来完成什么,右侧当中它的一个布局啊,右侧当中它的一个布局来吧。咱们打开咱们的Vs code,诶在这咱们之前已经预留了,对吧,已经预留了啊前面的这个部分呢,咱们叫做left对吧,我呀这就叫做right啊就叫做right,好,那么在这个right当中啊,很明显它是分上下两个部分,分上下两个部分。哪块呢,在这给大家画一下啊,上面的这个部分呢,是咱们的详情数据啊详情数据,然后底下呢是在这。诶,底下是在这儿,当然底下当中啊,其实不光咱们能够看到的是这个,嗯,商品参数啊,不光是这个商品参数,当然还有底下的这个购物车呀,对吧,还有咱们的这个文本框啊,再有还有一个是咱们看不到的什么样的元素,诶你选完之后的这个结果,当前的这个好。
01:16
啊,结果当前好的这个div啊,这是后话啊,这都是后话,来咱们啊,先去画咱们整体的一个大方向,在这儿呢,咱们写上一个div点,这是上半部分。嗯,叫做商品详情啊,商品详情的一个数据啊,嗯,结构吧,结构开始,嗯,结构开始好。嗯,然后在这呢,咱们再加上一个叫做。商品参数数据结构的开始,嗯,来把它们两个给它分开啊。
02:02
我把这个部分给它消掉,然后这儿呢,咱们写上一个结束,嗯,底下的部分呢,咱们就叫做点right button。嗯,点right bottom啊好了,那么在这个位置里边啊,底下的部分呢,咱们现在先不管,咱们先看上面的这块啊,先看上面的这块。好,在上面这个部分里边,咱们再看一下它的结构布局,大体它是分为有这样的一个结构,上面是咱们的标题。对吧,诶标题,然后呢,底下这块是咱们的简介,他俩肯定是独立两个标签对吗?独立两个标签,然后在底下这它用一个背景颜色已经告诉咱们了,这是不是就已经是一个完整的div了。对吗?在完整的div里边又分上下两行,诶,这是一行和这是一行。对吧,然后再往下走,支持是一行配送至。
03:04
又是一行,诶把我所有的颜色都用上了,诶所有颜色都用上了啊好,嗯,在这里呢,咱们一行一行的去写啊,首先标题标题啊,咱们来观察一下这个标题大小,大概在H3左右吧,嗯,H3。写上H3,我呢就把它这里边的这块标题给它抄过来了啊,嗯,然后底下呢,简介的部分一般我都用P标签来表示,一来呢它会自动换行,二来呢它默认就有一些上下行的间距,嗯,来再往下走。下面的一块呢,咱们就可以用一个完整的div,比如说我叫做price rap,诶给它来一个div啊,那么在div里边,咱们刚刚说它是分为有价格一行和促销一行,对吗?嗯,再来比如说这个叫做price top。
04:00
底下呢,叫做点press button,上下两块啊,上下两块,然后在上面的部分价格,促销支持配送制,这些看似它的结构样式是不是都差不太多,所以啊,我就直接用span标签写上价格。啊,但是价格中间它会有一点点缝隙,所以呢,咱们用一个空格来给它表示一个两个三个四个应该差不多一会咱们去运行看一下啊来旁边的旁边的这块呢,很明显它是分钱和它的通知。两个部分。所以怎么着,诶,在这儿不得不我又来一个div,给它来上一个price,那么在press当中呢,咱们前的这个位置来上一个SPA。诶,这个钱我给他复制一下啊嗯。钱再加上价格,这个价格咱们为什么要给它分开,因为我发现了一个道理,看我点点点完了之后,后面这个钱它是不是有所变化,如果你捎带角把这个钱的符号也放到了这个P里边,那么你在改的时候是不是稍微有点麻烦呢?诶你说老师你可太聪明了,是没有办法诶,你要在写这个布局之前,你得来想好它一切的一个可能性,嗯。
05:25
来旁边啊,就是一个降价通知。对吧,像这种文字的话,咱们就可以用这些嘘标签来进行代表。然后。然后呢,旁边是不是还有个累积评价,顺着这个div接着往后写,比如说我这儿也是一个块,那么在块儿当中呢,一个是SPA累计评价。然后再来上一个SPA,诶是这个670000。嗯,97万对吧。嗯,紧接着这个是咱们的top写好了对吧,来再看一下咱们的bottom bottom当中啊也是分为有一行,嗯,两块四瓣促销。
06:10
促销里边呢,对应咱们也加上四个空格。1234好,旁边的这个步骤。来上一个P标签吧,嗯,P标签加价购来加价购也用一个SPA。然后后面的这个一大串儿,诶,咱们给它复制粘贴拿过来好两个四班标签,嗯嗯,整体的这个位置咱们写好了之后,那咱们再看一下吧,下面是不是还有支持。对吗?诶在这写上支持,应该是叫support。嗯,Support,那么在支持里边这个位置是不是还是SPA对吧?A支持来上咱们的空格NBSP分号。
07:03
1234。诶,这个分号的位置串线了啊来走。再加上一个SPA,诶,旁边的这句话呢,毫不留情的给它拷过来。下面一行,嗯,Div叫做配送对吧,那我就直接写上address。剩下的一个内容呢,诶,这个咱们给它写成P标签吧,嗯。然后区分一下子啊,嗯,后面的这部分大体都是一样的,所以给它拷过来写上这是配送至是吧。当然这个配送制啊,这里面也需要加一些空格,咱们先都加一个,不够的话,咱们在后续大概往里面去填。旁边的这个部分咱们就写上,诶,深圳的宝安区。好了,这样的话,咱们针对于上半部分的一个结构,整体的一些内容,咱们就写好了,写好了之后我就需要得拿出来样式表。
08:02
再甩到一边。不需要的,咱们给它折起来,折起来。这是路径导航对吧,这是中间的左半部分,好,在这儿写右半部分。先把整个结构咱们都先给它写好了啊。在这这个是详情区域的开始。然后呢,是它里边的。嗯,这个是右侧的对吧,这是它上面部分啊。点儿。好,那么在这个位置里边呢,咱们需要加H3和P标签,紧接着。是在他的。看一下啊,在它里边对吧?嗯。点上一个press rap,那么在press rap当中,哎呀,有这么多,我们一个个展开吧。Press re,当中啊,点它里边有top,还有呢,点上bottom。在这个top当中,哇塞。
09:01
里边是不是有丝瓣,当然这个丝瓣的话,底下是不是还有很多丝板对吗?所以你得要稍微进行一个区分啊,这个呢是大于四板,是直接的啊,直接的紧接着这还有一个点press press当中咱们都用一个大于号来进行表示啊有。大于这个直接的四板标签,还有它的P标签,还有它的I标签,来再紧接着写。跟它平行的这儿也有一个直接的P,嗯,在直接的P标签里边呢,有直接的SPA。诶,这块的话一定要写好它的结构啊,来在这个press bottom里边有直接的span,还有P当中里边的直接的SPA。嗯,好,那么这个内容写好了之后,那咱们往下走,诶这块的话咱们给它折起来啊,要不然那个大括号容易写错位置。
10:01
紧接着点support,在support当中有SPA,你看有多少个SPA和P对吧?诶,这个位置咱们就都给它加上一个大于号啊。大于号代表什么?直接的子节点,嗯,来,点上address,点上address里边也有它的直接的span,也有它直接的P标签。好了,那么这个样式结构咱们写好了之后,紧接着我就来找它的参数啊,找它的参数。在这里。嗯,整体是在这儿啊,整体是在这儿,好,那咱们来看一下吧,对应它说右侧它的宽度为700。嗯,诶700左侧的这个部分,咱们加完400之后是不是有腐对吗?诶你右侧加完700之后是不是也有腐,好,那它俩都腐完了之后,我的center得怎么着A加fix,否则咱们的高度是不是又陷下去了,嗯,高度又陷下去了啊好。
11:04
那么在这个位置里边加完了之后啊,加完了之后咱们来接着往下看,他说标题标题在哪,标题在H3对吗?字号fo size14像素,然后行高呢,是21像素上外边距是15,这个位置你可以写一点呢,咱们就去看一下啊,要不然你这样写的话,你心里也没谱是不是啊嗯,好,那么这个内容写好了之后,诶,你会发现整个区域它是不是有点偏左呀。那咱们给它向右漂浮吧。嗯,向右漂浮啊好,向右漂浮的话,它中间的这个区域是不是就已经不用管它到底有多长了,对吗?不用算了,不用算了,好,上面这个标题写好了之后,那紧接着咱们再往下走。嗯,他说啊优惠内容,嗯,优惠内容指的应该是这一行。
12:02
优惠内容,还有价格的区域。颜色是这个颜色,来,我把这个颜色咱们给它拿过来,放到P标签里边,说color,它的颜色是这个颜色,上外边距仍然为15像素,好写完了之后咱们就去刷一下,看一下这个内容是不是就写完了,但是但是写完这之后,你发现了个什么问题,底下所有的P是不是都变了,所以怎么着在这是不是也得加一个大于号啊?是不是得加个大于号,哎,所以这个位置一定要注意啊,一定要注意好,那这块写好了之后,那咱们紧接着要去写什么了,紧接着就是下面的这个区域了,对吗?那下边这个区域的话,他说上外边距,诶把这块咱们给它打开啊在这。嗯,在这个区域当中。咱们给它加一个上外边距十像素。
13:05
杭高Li hat28像素背景颜色,诶,我得把这个颜色怎么给它拷过来啊。好,写完了之后内边距开DING7像素,嗯,写完了之后他说左侧的标题部分,左侧标题是不是指的这个span对吧,右外边距右外边距15像素。嗯,15像素,然后紧接着这个钱的符号,钱的符号是不是在这个SPA里边,他说什么fota size等于16A,然后呢,钱的价格的钱的字号photo size24像素,然后降价通知fo size12。诶,然后文字的颜色。是这个颜色,井号CC1122。诶是这个颜色啊,嗯,但是呢,你现在这些SPA呢P呀,还有这个I,咱们看一下结构布局,我还没有去加腐啊好,整个内容是不是变成这样了,对吧,变成这样了啊,咱们需要加什么,加上一些腐吧。
14:13
浮动的话,咱们来看一下咱们需要加的是哪儿啊,因为这块的话还是比较长的。首先在上半部分里边办这个区域是不是咱们左边的价格。诶,咱们看它吧,嗯,这块的话,咱们这个价格是不是写的这个SPA对吗?所以让这个span这加上一个浮动,所以这咱们写上价格。嗯,然后旁边的price这个呢,是咱们的中间的这个区域,所以在price这我也加上一个浮动累积评价。这是累积评价,诶累积评价我这也加一个浮动,好,他们都加浮动,那你的press top得加个什么clear fix,诶得加个clear fix,好,那么现在这个内容写好了之后,基本他们已经在一行上了,但是这三个是不是还得加浮动对吧?还得加浮动啊好嗯,在这个里边,咱们在这儿它里边的SPA,它里边的P,还有它里边的一个I。
15:20
好,加好了之后,加好了之后,咱们对应的这个累积评价是不是在右侧,嗯,在右侧咱们给它甩到右边去啊好,甩到右边去之后,这个文字的颜色它有没有提呀。嗯,他好像没有提是吧,诶没有提,那咱们去看一下吧,这个颜色基本上应该也就是一个红色,正红色,咱们来看一下。CC1122。那么CC1122,嗯,这个位置。
16:04
好,我得在price这咱们也得加一下,加完了之后,那咱们看一下它的价格整体是不是比较偏粗一点对吗?嗯,在P标这啊P标签咱们还得再加上一个加粗,嗯,加粗好来看一下现在价格的这一行咱们是不是写完了。来对照一下。好像价格这是不是少了一点点空格对吧,少一点点空格啊,来把这个结构怎么给他拿过来。往下拉,在价格的这个部分。再加两个空格。这是不是就可以了,完全一样了吧,哎,当然后面这个部分呢,只要是需要空格的两个字的,咱们都给它补上一点啊。促销这是不是可以了,对吧?嗯,促销可以了啊好,再往下看,他说了第二行。
17:02
嗯,第二行,第二行指的是哪?第二行应该指的是咱们促销的这一行了,对吧。来找到对应的这个位置啊嗯,这个呢,咱们写好了之后就可以给它折起来了。他说啊D行行当中的区域宽520,然后行高是28像素,啊,行高是28像素,然后加价购。来咱们看一下加价购是不是应该属于是咱们。P标签当中里边的这个四板。看一下。他说加架构当中的一个背景颜色,咱们看一下啊,加架构加架构,嗯,是有两个词板啊,有两个词板,所以咱们在这儿还得给它分一下and。First child,诶第一个这块呢,咱们给它写上吧,这是加价购,嗯,加加购啊。
18:05
加价购当中,它的背景颜色写上这个是井号C81623。嗯,C81623,然后它的拍顶三像素。文字的颜色FFF,而其他的颜色其他的颜色。Color写上999,嗯,写999,然后他们两个呢,咱们也要做一下腐,嗯,要做一下腐啊,来咱们看一下结构吧,然后写完了之后,整体的这一行,整体的这一行前面的这个词SPA,前面的这个词SPA和后面的这个P,咱们也需要去加上一个腐。嗯,也需要加浮动,但是加完浮动之后,咱们会发现你上面的这一行。上面的这一行,咱们来观察一下它的高度啊,来写完它,它现在是有高度的,对吗?嗯。
19:03
这个部分它是有高度的啊,然后咱们看一下它现在这里边的press bottom,由其由于我的SPA和我后面的这个P,它是不是两个又发生浮动了,所以往上推一下,在你的press button当中也加一个什么fix。诶也加一个课fix,好,那这块的内容整体就比刚才好看多了,对吧,就比刚才好看多了啊好我再处理一下什么加架构和后面的这个部分。啊,加价购和后面这个稳,咱们看一下还有没有其他咱们遗漏下来的参数。嗯,好像是没有了是吧,那咱们自己来去调整吧。在这个区域啊。那么在这里边呢,咱们看一下它对应的一个宽度啊来,咱们发现现在的这个red bottom高度已经没有问题了,那你再看它的宽度,总宽度显示到这就520。
20:01
不对吧,对吧,诶咱们现在这个宽度,其实促销的话,其实我不用管它,它自己就把字这个字就把咱们的标签给撑开了,我把这个宽度啊,咱们给它调整一下,调到哪儿呢?调到中间的那个内容区域上面给这个P。啊,给这个P标签好,那现在他一下子是不是就上去了。A,一下就上去了啊,但是他们中间这儿呢,还差了一点点间距,给这个span这儿写上促销。对吧,诶促销后面的这个部分呢,是加加go,嗯,来给促销呢,咱们去加一个margin right。诶,15像素好,这块的一个间距是不是就出来了,对吗?这块间距出来了,然后这两个SPA啊,我也别让它浮了,嗯,把这个腐咱们给它消掉就可以了。这是不是一下就OK了?对吧,诶这一下就OK了啊来,那咱们看一下人家的这个位置。
21:02
两个是不是一模一样了?对吗?一模一样了对吧,好来,那咱们再看一下。再看一下咱们对应的一个支持。他说啊,支持的这个区域最底下的这个层,把这个边框咱们给他拿过来。在这儿,嗯,写好了之后,他说还有这个padding padding bottom,五像素啊,底部有一个内间距,然后每一行的上外边距为十。上外边距为十,然后行高为28。左侧的标题区域当中的右外边距。15。两边咱们要做一下浮动。嗯,钻浮动,别忘了给这个support加一个什么clear fix。
22:00
诶,别忘了加fix啊,来咱们去看一下咱们的这个内容,整体的话,它的文字颜色是不是应该和这个颜色差不多对吧,咱们还得给它加点文字颜色啊在这。Color。999,嗯,好,那么现在这个文字颜色支持的话,是不是也差了两个小空格,诶,来把这个部分支持这儿补上,然后底下的配送至咱们看一下配送至好似差不太多啊,好似差不太多,好,底下配送制的这个部分基本应该也是差不多的道理,来咱们再看一下最后吧。嗯,底下支持后面它就没有了,所以相当于这个部分跟前面是一样的,咱们就给它抄过来。在这儿P标签。还有address。这个部分都给它抄过来。抄完了之后,咱们来看一下这,嗯,支持的底下呢,这没有一个边线,那咱们就把这个边线给它去掉吧。
23:09
只有配送至这是有对吧,嗯嗯,然后配送至上面的这个部分。配送至上面的这个部分来,咱们把这个部分给它去掉。好似还是有一点点小的差距,好像是在它的结构上面对吧,来咱们给他看一下啊,那么咱们这里啊,我去调整一下,其实无外乎也就是这个address和这个support它的一个间距上面对吗?嗯,我把咱们对应的这个。外边距咱们给它加回来啊,给它加回来,然后上面support当中的这个拍ing咱们给它消掉,这样的话咱们去看一下吧。这样的话是不是OK了。诶,这样的话OK了啊好这些呢,咱们就把这个右侧它的详情数据部分的布局就已经搭建完成了。
我来说两句