00:00
在上次课程当中啊,咱们已经将整体项目当中最难的一个点,诶,点击咱们的一个商品参数,不光呢,还要把它的颜色进行排它,而且还需要把对应位置上面的一个结果在上面做一个标记,而且还有价格联动的效果,这个呢算是整个咱们项目当中啊,最难的一个部分,咱们已经全部攻破了。啊,不知道写到这里有没有小伙伴真的跟上了老师的进度,嗯,来,那么咱们本次课程呢,将继续来完成后续的布局部分。来找到啊,咱们之前写好的这个注释,嗯,在这呢,咱们去加一个div。叫做点儿上a d cart,诶添加购物车嘛,对吧,那么在添加购物车当中啊,很明显它这里啊分为了两个步骤,一个呢,这是一个文本框啊,另外呢,这是一个按钮,诶分两块分两块,好在这里我整个呢去加一个div,给它起一个名称吧,咱们叫做count,嗯,在这个count里边呢,去加上一个文本框,诶文本框的旁边咱们去加两个超链接,嗯,我看一下咱们对应的是上面是加,底下是减是吧?嗯,在这写加,然后呢,这写上一个减,在div的后面,咱去来上一个button,叫做加入购物车,好,整体的结构呢,咱们去给它运行看一下,嗯,内容已经出来了,咱们需要给它加样式的修饰,来找到咱们的CSS下的life文件前。
01:47
边的一些啊,咱们写好的都给它折起来吧。内容啊,中间的路径导航,然后还有中间的左半部分,右半部分的上面,诶还有它里边的下面,嗯,Choose,还有choose当中之后的参数,好在这里咱们加上添加购物车。
02:11
区域开始。好,然后啊,在这再写上添加购物车区域结束,来,我把它甩到一边去啊。咱们呢,一层一层的去给它加点注释,第一个叫做ad card.ad card,再来上一个count,嗯,Count,然后在count当中啊,有input框,然后还有A标签,与count平行的是一个八层标签,好了整个结构啊,咱们写好了之后,咱们去看一下咱们的参数,他说啊,加入购物车整体的一个区域,说左侧的数字区域,嗯,把这个折起来啊,左侧的数字区域呢,宽度它是为55像素,然后右外边距为15像素,输入框在这里啊,输入框呢,它的宽是38,然后高是37,嗯,然后边框一像素,然后。
03:25
够实现,再加上一个颜色,文字的颜色呢是555好加减法的这个框啊,咱们是在A标签里边来写的,嗯,但是呢,他说整体加法框当中也有定位,减法框当中也有定位,诶一会咱们需要给它再进行设置定位啊来先把基础的写好,宽度15,然后高度是18,嗯,然后文字颜色呢为666,再加上一个背景颜色为F1F1F1,好,那既然它呀有这个定位啊,有这个定位,那我就需要给它的负元素去开启相对定位啊,开启相对定位好他说咱们的加法框看一下啊,加法框处于的是A当中的第一个,对吧?嗯,A当中的第一个啊。
04:23
对于加法框和减法框来说啊,它都有一个RIGHT1像素啊,他们两个都是一样的,好,我呀就在这个A上面,咱们直接给它加上一个绝对定位,然后再加上一个一像素,它们两个之间的差距,一个呢是top为零,诶没有,然后再有还有一个是TOP19像素上边框为零,稍微给它区分一下就好了啊and它里边的第一个孩子是top为零,好,紧接着and他的最后一个孩子,咱们需要给他加TOP19像素,上边框为零。
05:05
嗯,上边框为零啊,当然或者呢,你可以写成a border top为零,嗯,都可以,嗯,来,咱们去观察一下它的效果吧。好,这个内容整体呢,差不多已经出来了,但是这个加减法呀,它的这个位置咱们还是要给它微调一下啊微调。在A当中再加上一个tax gun alone,还有它的long he,嗯,18。好内容的呢,咱们已经给它调整了啊,调整了来继续再添加他说按钮的这个区域。嗯,按钮啊,按钮呢是在这个button里边,他说左右内边距pading left25像素,还有一个pading right25像素,高度呢为36,字号字号来往上挪一挪啊photo size为16,嗯,背景颜色井号E125B,嗯,好整体啊,咱们这个结果呢,咱们就写完了,嗯1251B啊嗯,来咱们看一下内容的话已经出来了,但是稍微还有一点点的不太一样,嗯,咱们来看一下原样的啊,人家呢,这很明显它是一个文字白色的。
06:37
咱们还得给它再加上一个文字白色,嗯,还呢没有边框,诶把它的边框也给它撤掉好,内容写好了之后,它俩很明显是一个浮动效果对吧?嗯,腐动效果啊,给它加上一个腐动,然后给到咱们的count也去加一个浮动。
07:00
好,那么现在这个浮动加好了之后啊,咱们再观察一下之前的一个内容,那么之前呢,它这好像是有边框的,对吗?咱们在这里写的时候啊,是少了一点点的朽框,哎,咱们看一下咱们是不是漏掉了啊边框,嗯,输入框当中的一个颜色。嗯,整体的话,它在这咱们已经加上去了啊,咱们来看一下问题是在哪里。那么在这里啊,咱们对应的这个A标签好像少了点边框是吧?诶,咱们需要还得给A标签加上一个边框,嗯,给它加进来好,加完了之后咱们稍稍的给它放大一丢丢,仔细看一下它的细节啊,好似是咱们中间的这个位置,是不是少了一根线呢?大家看中间的这个位置,这是不是有一根线对吗?诶咱们这里少了一根线啊好在这儿咱们给它调整一下,诶参数当中呢,说这个last child呢,这是19像素,怎么给它调成20试一下。
08:10
好,整体是不是就内容就OK了呀,对吧?哎,正好20就可以了啊嗯,所以咱们在这也可以给它稍稍改一下,这个位置呢,就变成20就足可以了,嗯,20就足可以了啊好,那么在这里呢,咱们还有一点点小的问题,但是不容易被你发觉啊,这个A。Cars。你想一个问题啊,咱们的count还有咱们的button它俩是不是又开启浮动了,对吗?诶又开启浮动了,所以别忘了在这干啥呀,Fix清除一下,诶清除一下啊好了,这样的话咱们就将参数后续所有的布局咱们都完成了,嗯。
我来说两句