00:00
哈喽,各位小伙伴大家好。我是上硅谷前端讲师任平老师。这次给大家带来的是继HTMLCSSJS之后的上优选PC端项。在上次课程当中呢,咱们已经完成了头部整体的页面布局。本次课程咱们将继续来完成商品全部分类的布局,以及它的样式修饰。好了,咱们打开Vs code,找到对应的位置,先来上一行注释,叫做分类导航开始。分类导航结束,紧接着观察一下它的布局,是不是应该最外侧有一个div,满宽的div。里边有一个板心的元素,哎,居中吧。那么在版芯当中啊,有全部商品分类和右侧的导航,在这里呢,你可以将全部商品分类使用另外的一些标签,比如说像H1标签,然后右侧所有的文字可以使用A标签,没有问题啊,但是呢,在这里啊,我发现全部商品分类,它其实也是一个A标签。
01:26
在这里呢,我都使用一样的A,并且把第一个A的样式突出就可以了。好了,来加上一个div,咱们起个名呢,叫做NAV RA。紧接着版新元素。好,版心元素呢,咱们叫做NAV wrapper m,把版心写好,剩下的就是A标签了。Javascript冒号分号写好叫做全部商品分类,后面的呢,我就直接啊复制粘贴修改一下文字。
02:12
服装城。然后美妆馆。在下一行上优选超市。全球购。闪购。团购。有趣。秒杀好了结构的话,咱们写好了之后打开咱们的Les文件。把它放到一边儿。对应的位置呢,把注释贴上来。分类导航开始,再加上一行分类导航结束。在里边呢,有板心元素,嗯。
03:03
来挨个写吧。第一个井号,NAV。把板心放进去。版心呢,这写上点NAV rapper me啊,版心当中啊有A标签。好了,结构写好了之后,咱们来看一下它的参数。他说啊,最下边的一个div边框。是两项素实现。把它粘到哪儿呢?粘到咱们最大的这个div上面。紧接着他说总宽度为1200,来在版心上面写上总宽度1200。当然版心啊,除了咱们的宽度以外,是不是还得需要加上一个MARGIN0凹凸,诶,让它水平居中。他说啊,商品的全部分类,你说这。
04:03
我都是一样的A呀,怎么办?诶,在这咱们可以给它区分一下and,引用当前的复元素A,查找它当前的第一个孩子。来吧,他说啊,宽度是210,高度是50,背景颜色。诶,就是上方刚刚写好的这个颜色啊,拿过来。文字颜色。白色。还有咱们的。字号啊,14像素加粗。Fo on weightlo右侧的列表是所有其他的A标签。Margin上下方向为零,左右方向为22像素字号fo size 16文字的颜色诶,井号333好。
05:10
那么来观察一下啊,是不是咱们现在左侧的商品分类和右侧的导航这些所有的A同处于在一行上面。那不免需要加什么腐,诶腐啊,来,给它加上一个腐,给第一个商品分类也加上一个浮动,加好浮动之后思考一个问题。当一个负元素里边的子元素有浮动布局效果,是不是就会影响到它的负元素高度,有可能产生塌陷?诶,咱们去看一下来。打开咱们的live server运行之后是不是就变成了这样的一个鬼样子?
06:03
啊,你说老师这是啥意思啊,哎,咱们来观察一下吧,来点上检查看一看咱们现在的NAV rap它是不是有高度,这个高度来自于底下的边框两项素。板心就没有高度了,原因咱们刚说过了,由于什么,由于你子元素有浮动的效果。来给它加上一个点fix。此时它就有高度了,这个高度哪来的子元素给它的自动撑开了,剩下的呢?把小细节处理好,全部商品分类文字需要水平垂直居中,Task online加上一个center,再来上line hat 50像素,好把它摆平了。右侧的导航也需要加上咱们的垂直居中。
07:00
此时我把它关掉,关掉,再来观察,咱们跟原来需求是不是就一样了呢?嗯,好了,那么本次课程呢,咱们就把选商品的分类导航实现完毕了。
我来说两句