00:00
在上次课程当中呢,咱们已经啊完成了导航条当中左半部分的一个布局,本次课程呢,咱们将继续来完成导航条当中右侧,诶,它的一个布局搭建好了,咱们找到咱们之前的一个位置,这是不是预留了一个注释,嗯。把它写好div点上什么就叫做right了,嗯,叫做right了啊,那么导航导航的话,咱们是不是也有一个语义化标签叫啥来着?NAV对吗?诶叫NAV啊,剩下的呢,所有文字啊,均是超链接,中间的这条竖线跟咱们左侧这条竖线道理是相通的,也是使用边框来画。哎,也是使用边框来画啊好,那么现在这个A标签,咱们javascript冒号分号我的订单,当然我在里边我再强调一下啊,咱们javascript冒号分号是不是禁止超链接的跳转呀。
01:04
对吧,诶接着它的跳转啊,好,底下的我多复制几份啊,我的购物车。来写上我的上优选。来上上优选会员。企业采购。关注上优选。来,再来一个合作招商。嗯,最后一个叫商家后台。商家后台来对一下我的订单购物车上优选,然后会员采购关注招商后台好了,那么内容写好了之后啊,咱们接着把这个less文件给它打开。在这左侧的部分,咱们实现好了之后给它合起来,诶把这个文件甩到一边啊。
02:01
在这啊,咱们去加上一个叫右侧。嗯,右侧右侧点right里边NAV当中的A,好了,这内容写好了之后啊,咱们来看一下咱们的参数,它说右侧导航每一个元素的间距为十像素啊,左右间距为十像素好。嗯,左右间距为十像素,来咱们运行一下吧。看一下当前这个元素是不是离着左侧太近了,是不是咱们左边元素和右边元素整体还得加浮动,对,都得要去加浮动啊,来给左侧加完float left之后,给右侧直接加float right,中间的这个间距我还需要考虑吗?不需要了。诶,不需要了啊好。
03:01
然后呢,他说所有的竖线的颜色跟之前的颜色是一样的。来,Bo g right。然后它里边一像素实现把这个颜色咱们给它贴进来,好,那么这个颜色写好了之后啊,写好了之后我发现了一个事情。诶,发现了一个事情,发现什么事情呢,间距是比较过大,而且最后一个元素是不是没有变写。对吧,诶最后一个元素没有变现啊。怎么办呢?咱们给的都是两个marin对吧?诶给都是两个marin,咱们把一个marin的咱们调成拍ing就可以了,把这个位置咱们给它调成一下拍顶好它的间距是不是差不多了,然后把最后一个元素的这个线咱们给它去掉,来加上一个and的符号。里边他的最后一个孩子,把他的这条线给它去掉。
04:05
好,去掉了之后咱们来对比一下。发现什么,好像人家的内容是比较靠后一点点,咱们的内容是比较靠前一点点,那这是因为什么?你别忘了,你刚才只是给最后一个元素,是不是把线去掉了对吗?那它后面的这点间距你去了吗?没有吧,对不对,诶,那你把人家的这十像素和十像素间距也得给它去掉啊,来这个margin的left。诶,给它加上一个零。再给他写上一个pading left也加上一个零,好。干脆咱们这样吧,诶都把它搞成这个right,诶都给它写成right啊。
05:03
写成一个方向,诶一个方向的话就可以了,好,那么现在咱们再来观察一下内容,位置是差不多了,但中间的这里好像是不是有一点点的差距啊。对吧,哎,还是咱们的内容稍微靠前一丢丢,那到底是在哪呢?来,我带大家去观察啊,点击右键检查你呀,把小鼠标往这放。发现了什么,发现了什么,诶,你这是A旁边的间距,是不是在这儿呢?对吧,那么跟旁边我的购物车是不是中间还有这么一丢丢的小缝隙。每一个里边都有这么一丢丢的小缝隙,来看旁边的这个部分离我的上优选是不是也有一丢丢的小缝隙。那你再来观察一下人家的。
06:01
我点击右侧检查来放到这儿看到了没?人家的这个连间距是不是紧挨着后面我的购物车中间那一丢丢小缝隙有吗?没有啊,这原因是啥?原因是因为A标签是不是行标签,那行标签当中默认是不是就会有那一丢丢的小间距,所以怎么办?给副元素当中去添加一个fo size为零,那它所有文字当中的这个间距什么都去掉。但是你去掉了之后,A还看得见吗?默认A是不是就找不到了,所以你说怎么办?再单独的给A自己加一个fo size12像素。来,我把这个点下去,此时你再看整体它的结构是不是就和咱们结构当中一模一样了。对吧,诶跟人家的这个结构就一模一样了啊好。
07:02
这样的话呢,咱们就实现了,咱们。优选当中头部列表布局的整体搭建。
我来说两句