00:00
在上次课程当中啊,咱们已经将右侧当中选项卡里边公共的一个功能封装完毕了,并且让左侧的选项卡和右侧的选项卡咱们都调用OK了。整体的页面其实已经接近尾声了,还差一个什么呀,大家看一下是不是右侧的一个侧边栏呢?诶,咱们现在整体项目已经就差右侧的侧边栏了,好,那么右侧侧边栏啊,咱们来观察一下,我点诶点完了之后它是不是有三个部分。诶,是不是有三个部分啊,哪三个部分呢。咱们先来标一下啊上面啊,当然这块呢,是整体咱们的一个侧边栏,诶整体是咱们的一个侧边栏,那么现在咱们首先要搭的是不是它里边的这个小按钮的部分。对吧,诶,小按钮的部分,当然是不是还有它中间的这些小人组成的一个小导航。
01:04
是不是,诶当然还有什么,还有它中间里边的这个部分。对吧,还有它中间里面这个部分啊,所以它其实是分三块啊,它其实是分三块,好首先咱们先来实现什么第一块,诶,实现它里边对应的这个小箭头啊,小箭头好了这块的一个布局啊,咱们需要找到最后面。啊,在最外面包裹元素里边往上一行,把咱们内容区域整体折起来。同志们一定要把它折起来,折起来之后在这写上咱们右侧侧边栏。开始啊,右侧侧边栏开始再加上右侧侧边栏结束好了,在这啊,咱们需要给它加一个div,我呢就叫做右侧的侧边栏。
02:03
是不是叫做right a asleep?啊,Redl好了,那么redli呢?咱们在这里你发现了一个问题。我点开它是不是展开的状态,这一点它是不是一个收起的状态,而默认情况下,它现在是不是一个关闭的状态。对吗?诶,默认是一个关闭的状态,那既然它有两个状态的切换,那此时我现在的这个class是不是作为这个div当中的基础样式,还得在配套来一个什么它关闭时和打开时候的一个状态来吧,在这儿呢,咱们再加一个叫做呃的close。啊Li close啊close好了,那么现在这里边它关闭时候的状态,咱们看到的是不是就是这个横条的小背景图片。对吧,A小横条的背景图片啊。
03:02
好,那么在这个位置啊,咱们先去画什么呢?画一个按钮的区域。啊,画一个按钮的区域好,那么这个按钮的区域呢,咱们也是加一个div,点上BTNS。啊BTNS,你发现了这个按钮,要么它就是一个横条,要么它就是一个时叉,它是不是也有两张图片在进行切换。对吧,诶有两张图片进行切换啊,那你说老师你刚才这不已经写了吗?你别忘了这个是咱们整体div它的展开和它的收起。我并没有提到是这个按钮,只是咱们刚看到了有一个这样的变化,对吧,但具体按钮的不同,咱们需要给到什么,这个div b TN呢?诶这个里边是它的基础样式,再来一个b tns close,目前为止整体咱们的一个面板是不是一个关闭的状态,而且咱们上方它里边的这个按钮是不是也是关闭时候的这个。
04:11
图标。对吧,诶来吧。那么现在这个区域啊,写好了之后,咱们需要找到咱们的Les文件,把它甩到一边。前面这些没有用的呢,咱们都给它该合起来合起来,把content的整体合起来,好,在这咱们去加上一个右侧的侧边栏开始和右侧侧边栏结束。写上一个基础样式点,Right asleep。旁边的这个样式是在它里边,所以我加上一个N点。诶,这是它里边对应关闭时候的一个状态,继续按钮的区域,按钮区域呢,有一个BTNS,在它里边也有一个附加样式and点比拼s close。
05:03
好,整体结构写好了之后啊,咱们去找到对应的参数,最后一个侧边栏,他说啊,最外层给了一个宽度是300,好,我把这个呢,咱们就给它删掉不要了啊这样去看。啊,这样去看啊,在这儿咱们去加上一个宽度300,高度占100%,背景颜色是这个颜色给它靠过来。井号好。动画,那么就是transition啊,Transition来加上0.5秒啊,加上0.5秒来,他说啊,当收起的时候,元素定位为TOP0,然后right为负,294,好,那你来看吧,此时我滑动整个页面的时候,右侧侧边栏它是不是就始终固定在这个位置?
06:00
所以咱们得给这个元素加一个什么position的fixed。诶,甭管它是收起也好,还是展开也好,默认是不是都是零啊,Top为零对吗?诶,那就直接把它加进来,只不过收起是不是咱们的关闭状态只需要加一个right负294P叉。是不是就可以了,对吧?诶来接着往下走啊,面包屑,当然这个面包屑呢,就指的是咱们的按钮区域。在这写宽35像素,然后高35像素,再来一个背景颜色跟上方一样,所以我就给它拷过来了啊。左侧圆角。A。它里边的是左侧圆角,嗯,其他的位置呢,都没有,所以咱们默认都给它写成零定位。好,在这儿我去给它加上一个left的负29像素。
07:02
啊,负29像素,好,那么对应咱们的那张图,就是人家这个小横道的这个图,咱们需要在关闭的时候给它加进来background image URL。路径点点杠点点杠,咱们图片下面的list。啊,图片下面的list,好,那么写好了之后啊,咱们需要来给它运行一下,看一看页面当中有没有这个元素。发现整体右侧这是不是有一个侧边栏的这个灰条。对吧,但是这个小图标啊,没有看到。没有看到咱们啊,右键检查观察一下子啊,在最底下在这个位置。小图标,这个小图标呢,咱们它是一张背景图对吗?诶是背景图的话呀,咱们还得再加点料啊,再加点料,加点啥料呢?再加上一个它的大小啊,35像素,35像素宽高都给它100%给它撑开,都给它撑开。
08:12
好,加完35 35之后,咱们还得再加一个position的absolute,因为它这有什么left当中的一个定位,对吧?诶有left当中定位,所以咱们一定要去加一个绝对定位,那么它的相对或者它的绝它相对于它的复元素上边是不是已经开启了一个绝对定位。对吧,就不用再去加了啊好,那么此时啊,咱们现在的这个小图标是不是就展现在咱们现在的一个页面当中。嗯,当然它这个这个位置呢,它也是有一个小圆角的啊,所以在这儿咱们给它改一下啊,五像素上右啊,不是这个位置是上右下左,是在这儿,嗯,上右下左啊。这样的话,两边是不是都一样了。
09:02
咱们给往上推一推。好像。人家并没有咱们这么圆是不是,嗯,没关系,咱们就按就按五像素吧,嗯,就按五像素来啊好,此时啊,咱们对于它这个按钮部分,咱们的结构就已经写好了。不难吧,诶后面的话呢,咱们还需要再去建立两个状态,一个呢是它的关闭时候一个小横道这个图标,然后当然它还有打开的时候的一小图标,是咱们的一个叉,这个部分呢,到后面咱们再去加啊这个的着急啊,不着急来,这样的话咱们就将整体结构的这个布局咱们就搭建好了,那下一个部分呢,咱们将继续来完成。中间的这些导航的部分啊。好了,那么本次课呢?咱们就上到这里吧。
我来说两句