00:00
上次课程当中啊,咱们已经将中间放大镜以及右侧商品详情的所有内容全部都已经实现了,诶在这里你可以想一想,咱们之前在实现的时候是不是很头疼同志们诶,因为整体网站当中的难度也就集中在了这里。啊,已经集中在了这里,但是写到现在啊,不知道有没有小伙伴觉得到底是CSS难呢还是GS难呢?嗯,一定有小伙伴说,都难。哎,都难哈,所以啊,像这样的一个项目,咱们只有去多接触多做,哎,他才会慢慢觉得,嗯,难度一点一点的在进行降低,好了,那么咱们啊,前面已经将中间所有的部分呢都已经实现了之后,本次课程呢,咱们将继续来向下完成,哇塞,这个页面还没完事呢,嗯,中间还有很多需要咱们去布的局,还有里边需要实现的一些功能,但是功能已经逻辑没有那么复杂了,嗯,可以稍稍诶把气喘匀了啊,稍稍的舒一口长气,嗯,好。
01:17
那么在这里边啊,咱们需要找到对应的位置,嗯,这个位置啊,千万不要找错了啊,同志们一定要先是咱们的路径导航,再是整体中间的区域都给它折起来,A在它的后面去加上一个注释,咱们给他写一个啥呢,叫做商品。详情中间。嗯,商品详情的中间部分开始吧,嗯,我已经词穷了,嗯,好。那开始和结束写好了之后啊,咱们肯定需要外部的一个div。
02:01
诶,外部的一个div,那么在div里边呢,分左右两个部分,左侧呢非常像咱们的一个侧边栏,然后右侧。很明显它分什么上下两个步骤,上面是选择搭配,然后底下也是一个选项卡,嗯,底下一个选项卡啊好来,咱们把这个结构写好。起一个div吧,咱们叫做点good detail wrap,嗯,它最外面的一个包裹器啊,来往回收一收,来继续叫做左边的侧边栏,诶,左边侧边栏啊,当然啊,这个左边的侧边栏,你可以使用div的元素,也可以使用H标五当中是不是给咱们了一个标签,就叫做aside侧别栏呀?
03:01
对吧,诶,咱们就可以使用它啊,来给它加上一个class,咱们就叫做leftoside啊leftside好,左边侧边栏写好了之后,咱们顺便啊写好了右边的一个结构,嗯,右边的结构啊,右边结构呢,咱们起个名吧,叫做right detail,嗯,右边的一个详情的部分,嗯。在左边的侧边栏当中,咱们观察一下啊,观察一下这个部分,我拿橙色画的是刚刚咱们说到的aside,诶,是这个第二位,好,那么你来看它是不是分为上下两块,这是不是咱们俗称的选项卡,嗯,点击有两个部分,嗯,有两个部分啊,好,那么这个呢,写好了,紧接着底下它们的内容是不是也得有一个对应的div啊。
04:05
是不是,诶上面的选项卡跟底下的内容区域,那它俩一定是一个平行的状态,诶一定是一个平行的状态啊好在这咱们去加上叫做上边。下边儿,嗯,当然我一提这个上边和下边呢,不免啊,就突然想到了一个小品啊,谁的呢?是赵丽蓉的啊,之前好像是叫做如此包装啊,当时在跳舞的时候,人家的这个冯巩就在喊上边呃,下边啊,突然就觉得呃还是挺有意思的是吧?没有看过的小伙伴可以去重温一下啊。好来我们来回收回来,那么在这个上边当中啊,咱们给它来上一个div吧,叫做outside top,嗯,叫做outside top啊outside top呢,咱们来观察一下里边的文字,这个文字啊,它处于一个居中的上下左右居中,而且呢,文字偏小,默认还有加粗的状态,你可以使用诶普通的文本,或者直接干脆使用H4啊,因为它符合H4文字的大小,还有它的一些特征来相关分类,嗯,再来一个叫做推荐品牌,嗯,推荐品牌好,那么H4呢,默认它有一个样式,咱们给它来上一个class,也就是说到后期咱们要实现这个选项卡功能的时候,我点击谁谁上方是不是有一个小红色条这样的一个初始样式。
05:44
对吧,诶,我点谁谁就有啊来,那么对应上边写好了之后呢,下边嗯,Div点上side content,诶,当然你可以叫做aside bottom都可以对应的内容,咱们就直接采用div来进行布局,好,那么div当中默认我能看到的是第一个也给它加一个class的a active好了,这样的话,咱们整体的一个页面布局就写完了。
06:17
嗯,就写完了,来打开咱们的一个Les文件,把它甩到一边。一样,前面写好的呢,咱们都该给它合起来就合起来啊,这合起来,这合起来好像它的后面咱们一点一点的去给它加注式啊,写上点good啊,Detail rap,再加上一个左边的错边栏。点上left aside上边。Outside top,嗯,Outside top在top里边呢,有H4,嗯,有H4啊,然后那个active先不用管它啊,咱们先把大体的结构先给它列出来,然后下边。
07:08
下边呢,叫做aside content里边div好,对应结构的咱们的less的一个样式已经写好了,来咱们找一找咱们的参数啊,往下推,在这里内容详情页的一个样式对应着咱们写一写啊。这个咱们给它关掉吧,嗯,就直接对照它写啊,他说啊,整体外层的一个宽度,这写上1200,然后呢,外边距margin。30像素,然后凹凸再加上一个零,侧边栏左边的一个宽度210像素,而且外边还有一个小框,嗯,加好了之后,他说选项卡的一个按钮的部分,嗯,选项卡按钮啊,整体高度它说是40像素啊,40像素上边框的一个颜色,嗯,上边框的颜色那就是背景色喽,来再加上一个FF,他说啊。
08:19
Active就是选中的这个元素,嗯,加上and.active嗯,And点上active,然后呢,他说啊,它的上边框颜色border gun top。嗯,But on top啊一项素,然后再加上实现井号11251B,嗯,1251B啊,来给他往回拉一拉啊。再加上宽度呢是幺零,五行高是37。然后下边框一像素实线,再加上一个CCCC,嗯,好,然后他说啊,面板的外层在这儿呢,面板外层的内间距为十像素,诶,面板外层的内间距为十像素啊第一个选项卡的内容,OK,这咱们就可以先不管了,因为咱们还没有内容呢,好了,整个样式呢,写好了之后咱们去观察一下效果。
09:26
打开咱们的这个页面,诶,给它运行起来啊,来走,嗯,发现了个问题,我之前写的样式好像失效了,没出来,嗯,不要着急啊,来,咱们在这儿点击一下检查,看一下你这个元素此时它真正是在哪儿了,把它甩到右边去,一般像这种样式的问题啊,咱们就直接这样去调啊,同志们好,我默认的H4通过咱们去鼠标选中元素,它跑哪来了,它跑这儿来了,但是实际我应该在哪出现,应该在这儿出现,那大家想想咱们应该还需要设置什么样的样式。
10:11
是不是应该是给中间的这个区域加点a fix呀,是不是,哎,来咱们找到对应的这个样式往回推。嗯,往回推啊,在咱们的center的这个位置加点fix,嗯,把这个整个给它折起来啊,要不然太长了,好,此时它就已经跑到了下边去了,嗯,跑到下边去了,跑是跑过来了,但是你发现了好像有点不太对劲啊。是不是诶,咱们需要让它腐动起来,腐起来啊,在H4这里去加上一个腐好浮动有了之后,内容是不是还得需要让它居中,嗯,Li hat40好内容居中了之后,首先你调的时候,它这块由于啊,它的这个内元素啊,里边两个这个子元素它没有实际太高,所以呢,咱们可以手动的给这个left这个。
11:24
Aside a,加上一个fix,先让它把整体的内容先给它撑起来,但是但是我需要把它外边框整体也给它撑起来,好来模拟一下,诶,给它加上一个虚拟的高度,这样方便咱们进行调试,一会儿调好了,我还需要把这个高度给它进行删除,然后推荐品牌,它这个内容不居中,好,所以我把这个位置也给它加上去。嗯,都给它加上去,都给它加上去,加完之后咱们看一下上面这根边线好像没有人家那么粗是不是,嗯,来,咱们在这把这个边线给它稍微调整一下,三项素差不多,但是选中的元素底下有底线吗?
12:14
没有对吧?A选中的元素它底下是没有底线的,而未选中的元素它是有底线的,是不是在这个给推荐品牌去讲。对吧,诶把上面的这个宽度呢,咱们也给它往上写一写好。写好之后啊,它俩之间还有一点点的一个小差距,是因为什么呢?它有上面三像素的一个高度,就差在这儿呢,啊就差在这儿呢,好,我把这个位置也给它加进来,把它上方的颜色给它换成白色是不是就可以了?对吧,给它换成白色就可以了啊,然后咱们选中的这个元素,它的底部是没有线的,所以咱们再来上一个,那这是不是就OK了呀。
13:02
对吧,诶这就OK了啊,相关分类和推荐品牌咱们的布局就实现完毕了。
我来说两句