00:00
在上次课程当中啊,我们已经实现了商品详情数据的动态渲染。嗯,本次课程呢,咱们将啊继续来完成商品参数部分的整体布局。诶,是在咱们这个位置,商品参数的整体布局来找到啊,咱们对应的位置。先来上一行注释,叫做商品参数的结构布局开始。诶,把它复制一行写上结束,好在这里啊,咱们给它起一个名称吧。之前商品介绍呢,是叫做red top,诶在这咱们就叫做bottom。嗯,Red button,好,那么在red button当中啊,咱们这么样分,咱们来观察一下啊,当我啊这些颜色容量版本和方式,它是可以发生点击事件了。我点击之后,不难发现,上方是不是还隐藏着一层div的结构?
01:05
这一层div呢,是咱们选择之后结果的一个div。诶,这个位置啊,咱们要把它的一个这个div呢,给它提前设立好,诶提前设立好,中间的这儿呢,是咱们所有参数的部分。诶,参数的部分最后一行是他加入购物车的这一行,也就是说在咱们right bottom里边应该有三个div。诶,应该有三个div好。在这里啊,咱们提前给它写好啊,这个呢,是咱们选择之后结果的区域。开始和结束。诶先放到这里啊,来再来上一行注释,这个呢,是咱们商品参数的,诶选择区域。
02:01
开始。结束。诶,选择区域的开始或结束,然后最后一个部分是咱们加入购物车。以及诶是要咱们的数量。区域开始和结束好了,三段结果啊三段咱们现在啊需要的是第二个位置,所以呢,咱们先来实现第二个啊div点上choose rap啊choose软好了,那么在这个位置呢,咱们呢,可以使用你的ul列表诶LA来进行实现。当然啊,除了像咱们熟知的ul之外,咱们是不是还有一个结构容易被大家所遗忘什么呢?DL。诶,当然,我一提有的小宝贝都想起来了,DL应该是听过的吧?诶,是啊,一定是听过的啊。
03:05
那么在DL当中啊,是不是有咱们的DT。哎,我现在标注的就是咱们一会要布的这个局啊,就是咱们的DT,还有什么咱们对应的DD。这不就分出来了吗?对吧,Adl当中有DT和DD,一共有几行DL呢?很明显一共有四行这样的DL,诶,一共有四行这样的DL啊好。来吧,咱们啊在这给他写好啊DL,然后呢,DT。第一个DT啊,叫做选择颜色。嗯,后面DD。金色。银色。
04:01
黑色好,第一组DL写好了之后,咱们给它复制粘贴一份,第二个叫做内存容量。内存。然后16G。64G。还有128,嗯,128G啊,然后再来256G,嗯。来,再复制一行DL,写上选择版本。公开版,诶,这里面只有两个啊,我把后面两个咱们给它干掉。公开版还有。移动版。再复制一行DL,写好,这个叫做购买方式。一共是三行啊,干掉一个弟弟,写上,这叫做官方标配。
05:05
优惠。移动版,嗯。这儿呢,叫做电信优惠办。优惠,移动和电信优惠诶。好了,咱们整个结构写好了之后呢,我就需要来写它的样式了啊,打开咱们的less文件。把头部呢,给它合起来分类导航,合起来内容区域诶路径,然后中间的左侧右侧的上半部在这呢啊。叫做上边。把上面呢整体合起来,诶在这儿下面。第二,Right button。嗯,Red里边啊,咱们目前只有一个出rap。点choose这个是个啥呀。
06:01
商品的参数选择区域对吗?嗯。我呀,还是把它拉到一边去啊,这样对照着看比较方便一些。那么在这里边呢,有DL还有DT和DDDT和DD它俩是平行的啊嗯,咱们观察一下咱们的参数吧。他说啊,最外层的上边距为十像素。Margin top等于十像素,嗯。这是最外层是吧,那咱们给到这儿啊。行,高呢为28。每一行的上下外边距好每一行。上下外边距为13。
07:05
然后每一个标题的右外边距,标题指的是咱们的DT右外边距为15像素。A 15像素啊,紧接着每一个选择的按钮指的是咱们的DD。写好它的右外边距。中间他们的那点小缝隙啊,不像素,还有它的颜色默认为666,嗯,行高呢,Li hat24。内编剧PADDING2像素和14像素。再来上边框颜色A上左边框,诶上左边框上一像素,还有实线井号一一复制粘贴一份上和左。再来,他说右右的颜色纸呢,变成了,诶这个颜色啊,还有下边框。
08:05
当然在这里面基础的一些样式咱们写好了之后,你不免还要需要想一想啊,你这是咱们写的DT对吗?这是咱们写的DD对吧?它俩是不是平行的状态?嗯,在一条水平线还得需要加个什么浮动对吗?嗯,再来上一行腐。好加好腐之后来咱们运行吧,看一看。结构写完了,内容也有了,但是好像不太像咱们所想的。咋回事啊?是不是应该我当前第一行DL里边内容还浮动着,影响了后续所有的内容是不是还跟着浮动?是不是当只要是一行DL里边内容腐完了,咱们是不是得要干啥呀?轻腐了,诶轻腐在哪加在DL的身上加点clear fix。
09:08
a.fix此时它的结构是不是就正常了呀?嗯,还差一个小细节啊,还差一个小细节,来咱们比较一下差什么?对应第一个DD,它的文字颜色默认是不是为红色对吧?嗯,来在这咱们加一下啊。第一个弟弟。And,咱们first of time啊,它里边的第一个类型,它里边的文字颜色为红色。好了,此时咱们这个结构是不是就搭建完毕了呢?嗯,我刷新一下。两边是不是一模一样啊,诶内存容量是吧,有一个文字敲错了啊。是内存容量。好,这样的话就没有问题了啊好了,那么这个视频呢,咱们就将商品下半部分的参数布局搭建,咱们就实现完毕了。
我来说两句