00:00
在上次课程当中呢,咱们已经啊将左侧的侧边栏它的布局已经完成了,本次课程呢,咱们将继续来完成右侧上半部分选择搭配的结构布局。来找到啊,咱们对应的一个位置在右边的结构里边,先来上一行注释,叫做选择搭配开始,来选择搭配结束,给这个选择搭配啊,咱们也起一个名称叫做点儿出丝box啊,因为在这呢,咱们前面已经有过关于choose web的一个名字了啊,所以咱们在这给它区分一下,叫做choose box。在choose box当中,咱们来观察一下它的结构,很明显它是分上下两个结构,上面一个选择它背的文字,还有底下它这整体是一个div,然后在整体div当中呢,分为有三块,诶,左侧一块。
01:04
嗯,然后还有咱们现在的这个中间商品的选择区域,嗯,这是咱们中间的一个位置,然后最后面。是在这儿。诶,上下两个结构,底下呢,又分为有三个平行的结构,好来啊,咱们去把注释写好,在这儿写上它的标题,那么这个标题呢,咱们可以用H4来写上,选择搭配,嗯,你看这个文字啊,比较偏小,嗯,比较偏小,而且还有一个自动加粗的效果,所以咱们可以选择H4的标签,然后在这个H4的底下,咱们再加上一个内容,嗯,内容。在内容区域呢,咱们写上一个叫做点list we,诶点list web,在点list web当中啊,咱们刚刚说到了,它分为有左中右三个部分,左边。
02:06
左边呢,咱们就直接叫做left啊,叫做left来中间的位置,中间呢,怎么很明显它应该是一个列表方式的排布,所以我就直接使用ul的标签给它呀,起一个名称叫做middle,嗯,叫做middle,好来右侧,右侧呢,咱们用div点上right,好,左中右这三个结构都已经写好了,来咱们把里边的细节给它补充好,左边啊,很明显它上面是一张图,底下是一个价格,还有这个加号,嗯,来图片咱们来看一下这个图片,它的地址属于的是。L-M01是吧,嗯,来因内置死下的M-M01,除了图片之外怎么还有价格5299来把这个价格咱们给它粘过来啊,紧接着还有加号,咱们可以使用I标签啊,像这种的这个标记呢,咱们没有必要动用一个div这种嘘签就可以了啊,当然你用em em啊,或者说是span都是可以的,嗯,然后在这个U里边,咱们有Li当中有图片啊,还有文本以及框和这个购买的数字,嗯,加上一个图片来,这个图片咱们得看一下的路径啊,DP01它应该是按照顺序来进行命名的,嗯,因妹此下的DP01 OK,咱们刚才选择文本的时候呢,已经看到了它是DP01234对吧。
03:53
恰好是正好四张图啊,然后SPA标签后面是这个标题,给它拿过来。
04:01
好,紧接着呀,底下整体呢,是一个这个框,还有咱们的数字,我呀就直接来上一个div啊,然后在这个div当中呢,咱们去加上一个input框,再写上一个SPAN50好一共有几张呢,四张我就得来复制粘贴1234,好把里边对应的DP01234,把图片先给它改了。改完之后咱们看一下标题啥的都没有变化是吧?嗯,来右侧,右侧当中上方呢,是一个已购多少件商品对吧?嗯,就是一个普通文本啊,你可以使用这个任何的标签,当然我在里边呢,咱们就直接用一个空的div。嗯,已购多少件,然后下一行,下一行的文本呢,有一个加粗的效果,嗯,中间呢,还有一点间距,所以我用一个P标签,诶套餐价。
05:04
好,底下呢是一个架子,嗯,我用一个I标签吧。最后一行是加入购物车,独立成行,对吧?我们就可以用一个div当中去加一个button,叫做加入购物车,嗯,加入购物车好了,整个结构啊,咱们已经写好了,写好了之后咱们就得去写它的样式表了,打开咱们的less文件,把它甩到一边,嗯,前面的这些部分呢,咱们都需要给它折起来,折起来,这是路径导航,对吧?诶,这是中间的部分,这是详情的左半边,来在这写上右侧,嗯,右侧的结构啊,右侧结构呢,咱们需要先加上一个点,Right detail。来选择搭配开始。
06:03
点上choose box标题的部分,H4,嗯,然后具体的内容。再加上左边left。左边当中,里边有image,有P标签,然后还有I标签,嗯,然后中间。中间的话呢,直接就是点middle啊,在这个点middle当中,里边有LYLY里边in位置span,还有div。嗯,Div,然后div里边呢,有input框,还有SPA,嗯,所以这个SPA呢,咱们需要给它再加上一个大于号啊,直接的四板标签,因为在这里边呢,有重复的啊,有重复的好来往下走一走。
07:08
在这加上一个右侧,嗯,右侧好,那么右侧当中啊,在这写上点right。Div。P。I还有button,嗯,Button来整个结构写好了之后啊,咱们就去看一下它的参数部分,嗯,参数在这儿,他说啊,最外层的宽度为980。加上宽度980,嗯,然后咱们观察一下左右两侧是不是还得需要加上点腐啊,嗯,给它加上一个腐,那自然而然呢,这个负元素还得加a fix,诶,省得它这个高度又塌陷了啊。在这儿再加上一个fix。
08:03
诶,这个是加浮动啊,加浮动啊,一个是左边,一个是右边啊都需要加浮动,好来继续他说啊,咱们选择区域的最外层有一个边框,嗯,在这儿BORDERDER1像素,然后实现。它的颜色为ddd,嗯,再来下外边距为15。嗯,下外边距为15好。这样对照的看标题下边框,嗯,标题呢是咱们的H4,诶,这个颜色呢,恰好跟刚才的是一样的,只不过这是下外边框,诶,下边的边框啊,然后还有背景颜色background,井号f fe1 f1,文字的颜色333,嗯,然后还有四周的内边距为五像素,零,五像素和15像素,这是咱们的上右下左四个方向,对吧?嗯,来,接着往下走,他说啊,主要的内容区域,主要内容区域在这儿呢,高度A17,零像素上内编距,上内编距呢是pading top10像素。好,接着往下走说主要内容最左侧的区域,整体的宽度是127。
09:36
和高度165,嗯,图片的宽87,价格的颜色。Color井号八一。C81623,嗯,C81623,然后字号为16。嗯,字号为16啊,来接着往后走加号,它有top值,还有red值,所以需要跟当前它的直接负元素绑上一个定位的关系,来加上一个position的absolute top等于48像素,然后right等于负25像素,字号等于16像素,好。
10:28
这是咱们写的这个加号的问题,嗯,然后整体的左中右呢,它也是需要在一条水平线上的,所以咱们还得给left加上浮动啊,加上浮动好。把它折起来,中间的一个区域,中间区域呢,它说宽度为668,嗯,然后高度为165,来顺便加上一个浮动,他说啊,每一个商品它的宽度为127127好。左右的外边距。
11:02
20像素,嗯,左右外边距,然后里边的图片,诶图片在这儿啊,宽120,然后高130,嗯。搭配的一个结果,搭配的结果在右侧。在右侧,在这里,嗯,他说啊,左边的边框好,Border-left。一像素,然后实线再加上一个ddd,别忘了加上一个浮动,咱们看一下中间的,诶加过了啊。好,接着往下走,他说啊,宽度为153,宽度153,然后高度为165,嗯,左内边距。诶,20像素数量,诶数量咱们来看一下,数量的话是在这儿啊已够数量对吧,他说啊它的上下外边距,那是在这上下的外边距分别为十像素,嗯,分别为十像素套餐价,套餐价在P标签里边。
12:14
咱们需要给它先加粗front weightlo下外边距为十像素,好,价格标签在I里边,颜色井号B1191A,嗯,字号呢是16,下外边距为十像素,最后一个是咱们加入购物车的按钮,Pading,十上下方向25,诶,左右方向字号photo size16像素,文字的颜色,文字的颜色井号FF,然后背景颜色background等于井号E1251B,嗯,好,那么现在整体的这个结构咱们都写完了之后,我就需要把它运行起来。
13:14
来运行了之后怎么发现啊,这里咱们之前是写的文本框对吧?好,我们需要给它调成复选框,Check box,诶把这四个咱们都给它调一下啊,嗯,好,那么调完了之后,很明显这些LY还是需要差浮动效果,嗯,来打开咱们的less。拉到最底下。咱们需要给它加一个浮动。好,浮上来了之后还得要看一下内容,好似是不是都差点居中,而且这个按钮是不是还有一个去边框的效果。把这个边框咱们先给它去掉啊,因为它最简单,嗯,好这块搞定了之后,咱们需要把内容都给它添加一个居中。
14:03
在中间的位置。那么想要给咱们内容啊,整体都去加一个居中啊,因为它里边的文字需要加居中,然后剩下的一些内容也需要加居中,那我就干脆给中间的部分整体去加一个a test-online居中,好那么现在整体这一个部分当中的内容是不是都已经居中了,对吧?还剩下什么左半边对吧?来往上推在left当中,咱们也去加一个a test-line left内容,文本内容它是居中了,但是这个图片没有,咱们还得需要针对于这个图加上一个居中,上下方向为零,左右方向为凹凸,好,现在图片的话也都居中了。啊,也都居中了,好。但是啊,这里边有一点点小细节。什么样的小细节呢?大家来看一下啊,在在这个位置。
15:04
左侧和右侧是不是有一条小缝隙啊,俗称咱们两个层当中的外间距,但是再看一下咱们所写的这个,好像丢失了这样的一个外间距对吗?所以咱们得去算一下啊,得去算一下整体的这个位置,咱们说它的宽度为多少来着,1200。对吧,A为1200,然后左侧左侧呢,它里边的宽度是210,嗯,但是你别忘了还得加一个什么左边的边框,还有右边的边框,再减去咱们对应右侧。它的总宽度为980,那你就算吧,这是个数学问题了,一千二减去212,再减去980。是不是恰好就剩下八项素?
16:00
对吧,恰好就剩下八像素了啊,你给左边居右也可以,或者说给右边居左也可以,来咱们去加上一个左边给到右侧的一个外间距八像素。嗯。哦,给错位置了啊,不是这个地方。这个是中间,这个是右侧,嗯,咱们得找到在这儿,诶,这个整体的右侧啊,整体右侧的话,咱们就给它写到左侧吧,嗯,写到左侧啊,来好了,现在咱们中间的这道缝隙是不是就OK了?嗯,那么写到这儿啊,咱们就将右中间右侧选择搭配里边整体的一个效果布局就完成了。
我来说两句