00:00
在上次课程当中啊,咱们已经完成了选择搭配当中中间区域啊,它的价格联动效果。好,那本次课程啊,咱们将继续来向下完成下面的选项卡整体布局结构部分。好了,那么在这啊,咱们找到对应的一个位置。在右边结构write detail啊这块呢,咱们之前标注了是选择搭配开始和结束对吧?好,那么在这底下咱们再加上一个下面的选项卡开始来再给它复制一份结账结束,嗯,那么选项卡这个位置啊,咱们需要加上一个div。嗯,我呢就给它起个名儿叫做bottom detail好吧,诶,这个class,这个div啊,那么在这个div当中呢,很明显怎么样是分为上下两个步骤,上边的背呢,是咱们的选项卡,然后下边的这个部分是咱们整体的一个内容。
01:04
跟左侧的那个选项卡,其实道理是相通的啊,也就是说上面呢有五块,那底下就得有对应五个div啊来,那么在这里啊,咱们给它加上一个。菜单,嗯,菜单,那么在菜单里边呢,咱们叫ul吧,给它起一个名儿叫做tub b tns。啊BTNS,然后给Li来,咱们去抄一下这个文字啊,当中的文字还是什么超链接对吧?A再加上一个a javascript的冒号分号,然后写上商品介绍来复制一份叫做规格包装。嗯,来,再来一份是这个售后。与保障。
02:00
嗯,来再加一个叫做商品评价。来最后一个叫做手机社区,好,那么现在上面的菜单写好了之后,紧接着咱们需要去加内容。嗯。那么这个内容里边啊,咱们也给它起一个大的div吧,叫做点上tab contents,诶,选项卡当中的内容,那么这里边都是div,一共有几个呢?一共是有五个,那么默认情况下,第一个div里边是不是要有一个a class active,而咱们当中的第一个是不是也有一个红色的背景颜色,对吧?诶,给它也加上一个active。好了,这样的话,咱们就将它整体的一个结构咱们就写好了,当然对于剩下的这些内容。啊,这些内容的话,咱们也可以一会就给它粘过来,这个不着急啊,这个不着急,来咱们啊,去找到对应的CSS的less文件。
03:04
哎,现在已经样式表很多了啊,没有用的东西啊,咱们就给它该合起来就合起来啊。好,这个是左边栏,这个是右边栏当中,在这来把这个less文件怎么着甩一边啊甩一边好把底下的这个部分咱们该添点注释了啊,写上选项卡开始。点儿。Bottom detail。菜单。是点BTN。哎,BTS,然后在这里边呢,有LY对吧?嗯。然后平行的部分这儿写上内容。Div叫做点content,然后在这里边呢,都是一对div好了,那么内容写好了之后,那咱们需要来看一下咱们的参数啊,在第十项,他说啊,这个选项卡整体的一个背景颜色,这个背景颜色肯定归谁了,归这个bottom detail对吧。
04:08
诶,整体归他啊。我看一下这个好像是咱们上半部分的这一行是吧,诶上半部分这一行,那咱们就给到菜单的这个部分吧。给到他啊,给到他。来,他说标题的边框颜色,咱们看一下标题的边框颜色,诶是这个LY的啊LY,嗯,来给到这。一像素,然后实现颜色是啥ddd对吧,然后他说啊,默认的背景颜色为FF。再来高度为40左右,内边距为11。嗯,左右内边距为11好,他说底下的一个介绍页上下间距啊,为十像素好。
05:09
看一下它这个是列表的上下间距为十像素。咱们先来看一下效果吧,来怎么运行啊,发现了什么LY元素,咱们是不是还得需要加腐效果对吗?嗯,来,在这个LY上面咱们去加一个浮动啊,加完浮动之后,底下的这个背景色就不见了,原因还是由于诶一个负元素下所有的子元素是不是又发生浮动了对吧?诶,产生了什么?诶,它里边负元素的高度塌陷问题啊,这个地方咱们已经遇见过了很多次了,对不对?嗯,好,那么高度产生了之后,那么背景色是不是产生了对吧?然后里边的这些文字是不是需要这个水平垂直居中,嗯,来再加两句话啊。
06:02
加上tascay center。还有LA40像素。嗯,整体的内容呢,已经出来了之后,咱们发现第一个。第一个里边人家是不是为红色的背景对吧。找到咱们对应怎么拉回来看一下,原来咱们的结构上面写着的是不是LY里边第一个叫做active的一个类,对吧?来在这写上引用当前元素,它里边叫做active的这个,它的背景颜色是红色那文字。诶自然而然是白色,但是这里边咱们别忘了啊,这个位置啊,它是有什么超链接的啊,它是有超链接,你如果直接给LY的话,它里边的这个文字颜色是不是写不到位呀,来咱们看一下是不是还得给谁加,给A去加对吧?A给A去加啊,所以我把这个color里面的这一行拿出来,再加上它里边的一行A,这就齐活了。
07:04
诶,这就起火了啊好,那么咱们观察一个小细节,来,我把它给你放大一下。观察什么样的细节呢?咱们来看一下这个边框。它这个边框是不是很厚啊,诶怎么来的,是因为你每一个LY当中是不是都加了一圈这样的一个边框,诶每一个当中都有一圈,那么是不是一定会有一个方向的这个边框怎么着重叠了。对吧,诶重叠了啊来,咱们要给它缩小一点。把呀,咱们对应现在写的这个包的,咱们给它拆一下啊,给它拆一下,首先呢,我先给到上方看一下上方整体是不是有了,对吧?来再复制一行给到下方。那么下行这块是不是也有了,对吗?嗯,我再给一个方向,比如说给到右侧。这样的话,他们是不是只有右侧这块有。
08:02
对吧,嗯,只有右块这块有啊,然后咱们来观察一下人家左侧的这个部分。给它放大一些。看一下人家左侧这块有没有边框,有边框诶有边框所以怎么办?咱们在第一个LY当中,自己再手动的给它加上一个左边框,诶再给它加上一个左边框啊好来呀,咱们再看一下,把整体给它放大放大放大来发现第一个元素上面有没有边框了,有了,而后面所有的边框是不是它不再是一个两层线压着的这么个感觉了。是不是因为咱们是一根一根的去加的,都加的是什么都加的是向右的这根边线,然后左侧的这个部分是不是单纯给第一个LH加的对吗?嗯,好给它还原啊。那么这个内容写好了之后啊,咱们把这个地方呢,咱们也给它还原好,接着往下看,他说什么呢?他说啊,咱们现在这个列表的上下的间距为十,这个上下间距怎么也发现了,是不是这个位置。
09:12
对吧,上下的一个间距为十好。这块间距呢,因为每一个div当中都有,所以啊我就给每一个div咱们先加一个吧,先加到它的active第一个元素身上,MARGIN10像素零啊上下方向吧,对吧,左右方向没有,咱们目前给它加上一个零,但是呢,左侧的内容咱们还没有去加呢啊来完来。那么现在这里面的内容呢,它很明显是一行一行有点像列表一样,对吧,有点像列表一样啊,所以我在这咱们就加一组ul。诶,我也没数啊,我就先给它十行,不行的话,咱们再去填这些文字呢,我就不带着大家再去一个个敲了啊,我就给它粘过来。当然有些小小伙伴呢,如果你要写好,那就麻烦你把这个部分咱们去敲一下就好了,嗯。
10:07
来这块。里边的品牌,诶看一次好像不太够是吧。没关系啊,一会儿咱们再给他复制粘贴一份。就是产地对吧。然后还有他商品的毛重。来,底下还有四个。加上热点。诶,想当初我也有一个这个IPHONE6啊,只不过现在这个IPHONE6呢,已经不属于我了。更新换代了,好了,那么现在这些Li咱们是不是都给完了对吧?来咱们去刷新一下页面。发现了什么问题,内容是出来了,但是他是不是都比较居左,而且前面声音没有点间距啊,诶怎么办呢?怎么呢,给到所有的一个内容,再观察一下。
11:04
我点到规格包装,规格包装的这个文字,它前面的间距是不是也大概在品字之前一点点。对吧,在品字之前一点点好,那咱们就给所有的div都加上一个什么呢?Heading-left,假设20像素。是不是差不多品字前面一点点,而且它是不是还得有点间距啊,要不然挨得太近了对不对?嗯,怎么给所有的div咱们都加上,比如说30的行高。行不行?拿回来看一下。好像有一点点多啊,没关系,咱们给他往回收25。嗯,这回差不太多。嗯,差不太多,好。那么这些这个内容完了之后,是不是还有三张图呢?来,我把这个图片的地址我也给他打过来啊在这。
12:01
Ul的底下啊,Image。然后这是零一,我估计应该后面是零二,诶这再来个零三好。底下诶不出所料就真的是010203,所以为什么咱们在写一个项目之前,你把图片诶命名好,这个也是能够减少你查一个图片路径当中的一个方法啊好,剩下的内容呢,诶规格包装就是规格包装啊,这个地方都是一样的,所以咱们就给它。写好就可以了,把它折起来。这个部分粘过来,然后售后与包装,然后商品的评价,以及手机的社区,嗯。OK,整体其他内容是不是都在最后了,怎么办?咱们需要让它显示谁只显示div当中带有active的,而其他的div怎么着,Display not,诶,让它隐藏啊,让它隐藏来拉过来,所有的div啊,都需要加一个display,而当前第一个div咱们需要加一个display block。
13:13
来再切回来看下底下这些内容是不是都没有了,对吧?诶这样的话呢,咱们就将这个右侧啊选项卡里边整体的布局咱们就写好了。
我来说两句