00:00
在上次课程当中啊,咱们已经将哎头部以及咱们商品分类前面的布局都已经完成了,哎,都已经完成了啊,那咱们本次课程呢,咱们将继续来向后来完成什么路径导航部分。那么在完成路径导航之前呢,首先啊,要跟大家去说一下啊,咱们需要将路径导航以及后续所有的内容,包括于底下的一些部分,咱们都把它放到一个叫做内容区的div里边。嗯,内容区。哎呀,这三个字叫我写的。真的是有点诶刮了一个向右的分是吧,把它刮跑了是不是?诶好,那么咱们这里边需要给他都放到内容区,但是呢,这个内容区里边的整体的页面内容是不是都居中啊对吧?所以别忘了加什么版心元素,诶别忘了加板心元素,那么在版心元素里边的第一个是不是就是咱们的路径导航。
01:08
对吧,嗯,来,咱们切回来啊。找到咱们分类导航的底下,在这儿咱们去加一个注释写上。内容区域开始复制一份,写上内容区域结束,嗯,内容区域结束啊好,那么在这里呢,咱们去写上一个div content。紧接着版心元素,嗯,版心元素啊,来div content me,诶版心版心呢,里边有路径导航,嗯,路径导航啊。那么在这个路径导航里边呢,咱们给它起一个名儿叫做NAV pass啊,因为NAV啊是咱们的导航对吧?路径呢是咱们,诶pass是咱们的路径,所以放在一起就是路径导航好,那么在这里边呢,很明显咱们来看一下啊,手机数码通讯超链接,手机超链接,苹果超链接,而最后一个是普通文本,那么这个位置咱们你现在怎么布局都可以,但是我需要考虑一个问题。
02:20
考虑啥问题呢?咱们的这个数据后期它是需要做动态渲染的。那么动态渲染的时候,我是不是要去创建对应的DOM元素对象对吧,好。那么创建倒元素对象,首先我是不是得有A那斜杠,斜杠的话你用I标签,用什么span标签,Em标签都可以啊,然后最后一个普通文本,诶这个普通文本的话,其实啊,你不用给他特别这个想一些其他的标签,你就直接A标签当中不加her属性是不是就可以了。
03:00
对吧,诶,我不加属性,不加后属性不就是一个普通文本的模样吗?嗯,来在这咱们去加上一个a javascript冒号分号写上手机。数码再加一个通讯,好,嗯,剩下这个斜杠呢,我就用一个I标签了啊来在这里它复制粘贴一份,把这个手机给他拿走,嗯。嗯,旁边呢,这写上是Apple,苹果好。最后一个步骤,把I给它消掉,把her整体给它消掉,这就换一个叫做IPHONE6S7,诶,我给它复制粘贴了啊。好了,那么整体的这个结构布局,咱们写完之后运行看一眼内容是不是就出来了,对吗?哎。接着干啥,搞样式啊,接着搞样式来找到对应的咱们的这个位置,把lights文件甩到一边。
04:00
甩到一边呢,在这儿咱们去加一点这个注释啊,内容区域开始和内容区域结束里边对应的第一个位置井号content。板新元素。点content me,嗯,然后里边路径导航。井号NAV pass。好,那这里边呢有A,然后还有I对吧?来咱们看一下它的一个这个样式啊,他说整体区域呢,是一千二上外边距为15,好。整体区域的这个1200,诶这个页面的话就没有用了啊,咱们给它关掉就可以了。在这儿板新元素里边去加上1200,嗯,别忘了这个位置里边呢,咱们还得需要加居中啊,还得需要加居中啊。嗯,在这个位置里边呢,你可以写上咱们上右下左对吧,上。
05:02
右下左诶它俩的话是不是都使用是凹凸对吧?嗯,然后紧接着路径导航区域整体外侧的呢,咱们需要有一个pading,这个拍定呢,是上面九上右,然后下左好四个参数写好了之后,它说斜线的部分拍定零五像素。好,写完了之后,来咱们来看一下啊,整体的结构跟咱们的这个内容大体的方向差不多,但是还是有什么这个斜杠。斜杠的这个位置,你看咱们这个区域是不是间距较大,再看人家的这个是不是间距较小一点啊。对吧,进去就小一点,原因还是什么,A标签和A标签,它是不是都是行标签,如果你一旦看不太出来怎么办?点击右键检查在这个位置。
06:02
你看一下ii的左侧这是不是有缝,I的右侧这是不是也有缝?来,你看一下人家的这个位置。为什么人家这儿紧挨着,就是人家把这个间距给去掉了。来,你来看一下,挨的左侧有缝吗?挨的右侧有缝吗?是不是都紧挨着的呀,对吧?哎,都紧挨着的啊好,那咱们的处理方式也很简单,只需要给谁呀,给这个A标签。和I标签,它俩都设置成对应的12像素。来12像素,12像素,而它的副元素咱们加一个A0就可以了。诶加个零就可以了,来,那你看一下现在咱们的这个结构是不是就跟人家要求的模样一模一样了呀。对吧?诶,所以这个呢,其实它并没有很难,但是你需要注意,行标签和行标签之间就会有这么一丢丢的小缝隙,你的处理方式就是给它们的直接负元素上面添加一个fo size为零,让它里边所有的这些小间距都给它去掉,但是你一去掉,把这两行如果你不加的话,那你默认还能看得见文字跟斜杠吗?看不到了,诶,看不到了,所以人家原本的这个字体大小你还得挨个再添加一下。
07:26
啊,还得挨个的添加一下好了,这样的话,咱们关于路径导航的布局部分呢,咱们就已经完成了。
我来说两句