00:00
在上次课程当中啊,咱们已经完成了右侧侧边导航当中上边按钮的一个部分,好咱们之前分析了,还差哪两个部分,诶,还差它中间的一个小导航啊,这些小人的一个脑袋一个导航,然后呢,咱们还需要右侧它里边整体的内容区域,就差这两个部分了,就差这两部分了,好咱们找到对应的一个位置。首先呢,上面是按钮区域对吧?诶在底下咱们加上什么呢?侧边栏的内容区,诶侧边栏的内容区,那侧边栏内容区域呢,咱们需要起一个名称。就叫content吧a div.content内容吧,对吧,咱们建明之意啊,来继续再加上一个侧边导航。嗯,侧边导航,嗯,侧边导航呢,咱们就可以直接用一个ul点角NAV list啊导航列表对吧?导航列表,那么在导航列表当中啊,肯定是有LY的对吗?那Li咱们来观察一下,目前你看到的是不是只有一个小人的小图标对吗?当然你鼠标划在上面从右侧的某一个区域。
01:23
是不是划进来了一个叫做上选会员文字,那也就是说最起码人家那个上选文字得在哪藏着了,是不是得在这儿藏着了,然后再使用动画的方式,是不是向左来进行运动啊。对吧?诶,所以这个当中是不是要分两块,左侧一个小图片啊,这么一个区域,然后右侧是不是还有文字对吗?嗯,好了,那在这啊,咱们就用一个P标签,这个P标签呢,咱们表示的是那个小图标。嗯,小图标,诶小图标写完了之后,咱们需要再给它塞上一个文字,这个文字呢,咱们就叫做上选会员。
02:11
上选会员看一下文字对不对。诶没毛病,上选会员好,那里边一共有几个呢?一共是有六个。123456好,整体的这个侧边栏结构啊,咱们已经搭建完成了,找到咱们的Les文件。怎么着甩一边,诶,当然现在我的这个这个术语你已经能通俗易懂了是吧?嗯,来,这是按钮区域,是不是折起来。写到它底下啊,这。来上一个侧边栏的内容区域,点content,接着侧边导航,侧边导航呢叫NAV list。嗯,NAV啊,在NAV list里边呢,有Li里边有P和I,好结构写好了之后,我就需要来对照一下咱们的样式参数在哪了,在这他说内容区域宽度为294,这样对照着看吧,内容区域宽度294。
03:21
然后呢,还有它的背景颜色,把这个背景颜色拿过来啊,B是第二个,嗯,第二还有它里边的一个定位position absolute。Left呢是六像素啊,其他的像什么top呀,像什么bottom呀,这些咱们都需要给它加成零,诶加成零好,那么现在这个confident这块写好了之后,你想要进行验证,怎么验同志们。你想验证怎么验,此时你是不是得先让它形成一个这样打开的状态,但你说老师我默认它是这样闭合的呀,我得点呢,别着急,你点的这个功能还没到呢,啊,还没到呢,你是不是可以先修改一下你原来right当中的这个定位,你把它改成零。
04:17
他是不是就可以了。对吧,诶那你改一下试试嘛。来,我把负294咱们改成零,目前咱们先做测试改成零啊,一会我还要改回来啊,还要改回来,来我给它运行一下,你发现现在咱们右侧的这个内容区域是不是就已经OK了。对吧,诶就已经OK了啊好,你需要去完成这种点击才能看得见吗?不一定啊,因为你现在还没有写到GS那个阶段,是不是诶这块已经OK了啊,那这块OK了之后,那咱们就得看侧边导航好。这呢,咱们给它还原回去吧,负294啊负294。
05:00
那么侧边导航是在这啊,他说啊,中间功能的区域是外层为负啊,Left负29,处于居中的一个状态。首先你需要先加一个position的absolute,因为它这是不是告诉你了它的left为负29对吗?诶,加上一个left的负29,好,然后它旁边告诉你啥呀,垂直居中的状态,那么一个ul的元素,或者说任意一个元素,怎么想要让它达到垂直居中,首先你是不是得设置它的top值为50%,而且还有一个什么。当中YA50%。但是50%是50%,但别忘了是什么负50%。
06:00
啊,负50%好,那么现在整体这个内容呢,咱们写好了之后,先运行看一下文字大概是不是就已经在中间的位置了。对吗?诶,蚊子在中间的位置,来咱们比对一下。是不是差不多诶,但是还会有一些小细节啊,还会有一些小细节来继续吧,他说啥,他说啊,内层的每一个元素和面包屑一样,那证明那些小人啊,它的宽高都是35对吧,背景颜色啥的都是一样的啊来,那咱们就一个个给它加进去吧。咱们之前啊,这些按钮它的宽高都是35对吗?所以咱们得需要给这个LY啊加一个宽度35像素,然后高呢也是35像素,好,那么在这个里边,那么你会发现一个问题。诶,你会发现一个问题啊,你的这个P标签和你的这个I。
07:01
它两个一定是在LY之上进行完成的,对吗?所以它们之间其实也存在于一个什么,存在一个定位关系。啊,存在一个定位关系啊。好,那么在这里呢,咱们给这个Li啊,也去加一个live。然后轮到咱们的这个P啊,P呢是指咱们的一个小图标,那你看吧,这个小图标它的宽高很明显是不是也是35。对吗?A,三五对三五啊,所以在这写35像素的宽,还有35像素的高。再来它里边是不是还有背景颜色,背景颜色抄他的。诶,背景颜色抄它的啊好,那么现在背景颜色抄完了,咱们其实写一点,其实就可以看一点整体结构是不是已经出来了。看这个结构是不是已经出来了,对吗?还差什么,还差背景图片。
08:01
诶,还差背景图片,好,再来上一个background image。URL。压榨杠。Images下这有一个呢,Two birds,诶two birds,但是啊,这个two birds啊,这个图片它并不是一张图片。大家可以看一下他这张图片,我给你放大一下啊,我想要拿的恰好是不是应该在这个位置能看清不?诶,上半边是一个凶人。底下是一个小黑人儿。啊,也就是说我需要读它的什么,X轴的一个值,还得需要读它Y轴的一个值,我是不是才能找到这个位置。对吧,才能找到这个凶人或者小黑人相对应的一个位置,好这块的值我就不带大家去一点一点的去试了,我呢已经把试完之后的这个结果,哎,直接咱们就写过来了啊。
09:00
当然你如果自己私下呢,也可以自己去一点一点的去试啊,一点点去试啊,X轴呢是负87像素,然后Y轴呢是负174像素。啊负174像素,好来咱们看一下对应的咱们现在这个小人啊,已经进来了,进来了,但是上选会员应该是不是得在小人的旁边。对吗?诶得在小人的旁边,好,那咱们就接着得给谁去加,得给I去加啊,得给I去加。看一下人家的参数,他说啊,展开的元素62乘以35,好宽。62,然后高35,好,那么你想一下子啊,他之所以能够从这看到,那咱们是不是得说它起码这个元素原来的位置是不是得在这。
10:00
是不是也大概是在这个位置对吧?诶好,那既然啊,它这像是一个区域,那当中的这个文字。这个文字咱们是不是得让它水平垂直,上下居中?对吧,诶,你发现了它这运动过来的时候,是不是也是一个水平垂直居中的状态。嗯,所以在这咱们还得再加两句话啊,叫做task on center,还有line hat35像素。好,这些都是咱们可以能够预知到的,对吗?来继续,他说啊,相对于负元素,那它的副元素是不是LY,那LY已经开启了相对定位,那它就是什么绝对定位,那绝对定位它的距离是多少?是35,而这个35恰好是不是隔过了一个小人的这么一个宽度,对吧?嗯,LEFT35像素。啊,LEFT35像素好,那么其余啊,他说像什么动画啊,动画0.5秒。
11:07
动画。啊,0.5秒。好,顶上去。加完了之后,诶加完了之后,那咱们来看一下吧。此时你默认是不是已经找不到它了,它的位置是不是应该在小人的后侧,你想调试怎么调,诶,还是得把你这个负294改成零,嗯,改成零,好,改完零之后,咱们是不是就能看到咱们的上选会员了。对吧,诶上选会员啊好,那么在这里啊,咱们得让它顶部也得加上一个零像素啊,再加个零像素好默认的位置是不是就OK了,但是它是不是还有一个背景颜色。嗯,还得有背景颜色的啊。
12:03
背景颜色呢,咱们把P标签当中的背景颜色给它拿过来好。此时啊,这个位置里边咱们是不是已经写好了。对吗?诶写好了,那你说老师咱们这不是一个粉色吗?你是不是鼠标划进来的时候,它是不是才变成一个粉色,对吧?它本身的颜色是不是就是这个颜色,所以你需要去改它这个位置里边的一个字体颜色吗?先不用。诶先不用好,那么现在这块咱们测好了之后,好,我是不是还得加鼠标滑入的效果。对吧,诶你没有鼠标滑入,你是不是根本就写不了呢,对不对。在这个里边啊,咱们还得再加一个啊,引用当前元素里边的whole。诶,用它里面的厚味。那么LY啊,它在进行滑动的时候,来咱们看一下人家写的这块啊,滑动的时候你发现了个什么事啊。
13:01
是不是你现在这个I标签背景颜色为粉色,PE标签背景颜色也为粉色,好,那咱们说你现在的这个I标签,它的宽度是不是为62。对吗?诶,我想要滑进来,那我是不是就负62往左移动。是不是就可以了,诶好来,咱们在这儿写上滑动的时候的里边的P和滑动时里边的一个I,把这个P标签设置它的背景颜色为粉色,然后I标签背景颜色也为粉色,给I标签来个重新定位的位置,负62像素。A负62像素,好,来咱们运行一下啊,运行发现此时。嗯,效果差不多有了,但是但是你默认情况下,你打开你发现那个上选会员你看得到吗?看不到,但是为什么它又能划进来呢?说明你此时的这个框。
14:09
和你现在的这个元素,它俩之间层级谁高啊,是不是这个面板它高,而且你的这个I元素是被他压到下面去了。它并不是消失了啊,它并不是消失了,只不过它里边的一个层级比较高,它里面层级比较小,把它给压下去了,把它给压下去了啊好,那咱们需要给面板的那个内容区域加一个Z-index。给多少呢?诶只要稍微大于它就行了,假设我给50行吧,诶来,那你看现在我跟他一样,是不是也看不到那个文字了,那看不到文字了之后我的。悬停之后是不是效果出来了,但是好像只有谁有效果,只有I有效果,我给PE标签也加上一个。
15:03
给它也加一个transition好,加完了之后咱们再来看一下效果,是不是跟人家的效果就一样了呀,来对比一下子吧。是不是一样的,诶完全一样的啊好,那这样的话,咱们就将整体它右侧导航中间的一个布局,咱们就写完了啊,咱们就写完了,那最后咱们其实也就还剩下什么,我把它点完了之后,能够像它一样实现展开和收起的一个状态。
我来说两句