尚硅谷前端基础 (146)

好，那么我们结构上定义完了，接下来我们就来写它的一个代码啊，首先呢，我们用lesss来写，Les来写，直接到我们这个Les里，那现在的话，我们首先先从外边往里看，它的外边的一个容器，我们给起了一个名叫做一个top bar是们外边一个容器，那它整个外边的话，你现在看啊，我们现在又考虑到我们移动端，移动端的话，它这个整个容器实际上是一个，诶是一个比较满的，对吧，它是整个的容器的话，是是全屏宽的啊，全屏宽的，那所以这个top把的宽度的话，我们就不用给了啊，这里边我们写个注释啊，这个是我们顶部的一个导航条，这个我们这个导航条的一个这个外部的一个容器啊，容器宽度的话，在这儿我们就不用给了，因为它是不是就是一个全屏宽的呀，啊全屏宽的，但是高度很明显，它是一个固定的，所以这候我们来看一下这个高度，直接看了啊不量了，高度是一个48个像素，所以这个时候我们直接给它定一个高度，诶H是一个48个像素，然后呢，我们看它效果。

它有一个背景颜色，这应该是一个纯黑的一个背景颜色，那所以我们这直接给它来一个background colorter，来个井号，一个000，设置一个黑色的一个背景，然后我们上边这个条是不是就出来了，哎，就出来了，然后的话，它这个下拉框啊，下拉这个菜单啊，这个东西我们暂时先给它藏起来，因为我们现在暂时先不写它，我们先给它收起来，待会我们再处理这个东西，所以我们把这个life的menu啊，我们把这ul这个菜单给它藏起来，先待会儿我们再单独去设置，那藏起来以后的话，我们这个时候就变成了这样一个效果，对吧，变成这样的效果，然后呢，我们就一个一个写吧，那现在呢，我们现在来看什么呢？先先看我们这个左边，哎呃，左边的话我们想一下啊，我要先整左边呢，咱们这样看，现在呢，我们来看一下导航条虽然写出来，但是很明显，你看啊，我导航条的左右他们之间是不是会有一个距离啊，哎，有一个距离，所以这个时候呢，哎，我就干脆我要给我这个导航条左右给它设置一。

什么呢？哎，设置一个拍镜，把这个距离给它整出来，然后把我这两个整个是往里给它挤啊，我大概去量一下它的距离啊，大概量一下这是一个14，那所以我就直接给它加一个pading拍定的话，我们上下不要左右，给它来一个14个像素，把我们整个导航条往里挤，那这样左右距离是不是就留出来了，哎流出来了，流出来以后呢，我们来看我们整个这三个玩意儿，他们是一个什么呀，它们是一个横向排列的，横向排列的那肯定在这儿，我们最简单的方式，我们就直接给他来一什么呀，哎给他来一个这个哎display，我们来一个Lex啊，直接给他设置一个什么呀，哎，设置一个这个，哎这个弹性盒啊弹性盒，然后呢，他们还是一个居，他们还是一个这个垂直方向居中的，垂直方向居中的话，我们用的是一个叫做一个这个ala，一个it，我们直接给他来一个这个center啊，垂直方向居中，然后他们之间的一个距离的话，你看距离是不是就分配到之间了，哎之间那所以。

这个时候我们直接设置一个那个扎赛content，应该叫做一个space，一个between啊把这个距离设置他们中间把这距离给它拉开，然后这三个的位置是不是就摆好了，哎，摆好了，但是现在还很奇怪，对吧，我们一点一点设置，我们先整左边这个，左边这块我们有一个这个导航的菜单，导航菜单刚才我们说了这个菜单我们需要通过这个CSS来设置，对吧，C来设置，所以这个时候我们在这儿来单独列出一个啊，我们在这儿来设置我们这个左侧这个导航的一个这个图标啊，导航的图标左侧的话，我们那个类，我们来看一下叫什么，这个类呢？叫一个这个life的menu，下边的一个menu icon，所以我们这直接写一个l life的一个menu meu，然后下边的话是一个点一个这个menu的一个I。Me nu me nu，它的一个这个图标对吧，我们要给它来设置一个样式啊icon，那它里边的话，我们这个整个这个icon的话，它是一个什么呢？它是一个这个ul对吧，整个是一个ul，那它现在呢，我们给它设置一个高度，我们将它显示出来，Background color来个井号，一个B来显示出来，现在的话它看不见呢，看不见的，为什么看不见的呢？因为现在它里边没有东西，它等于宽度，现在没有，因为它已经变成这个弹性，哎，不对了，我们来看，哎，对，就是它没东西，它没东西，所以现在我们看不见对吧，看不见的，所以这个时候呢，既然是这样，那我可以直接给我的这个这个菜单啊，我给他指定一个宽度，把宽度给它定下来，我们来看它这个宽度啊，我们就给它定的一样就完事了，它的这个宽度的话，我们来看一下它的这个。

它这里边儿的每一个宽度应该是一个这个，诶是一个18像素，对吧，是一个18像素，18像素呢，那这里边我们来看一下宽度是一个18，呃，然后它的整一个是18。

我想一下，这我怎么给他，我怎么给他分配一下，那就这样吧，那它的宽度的话，你看它整个是放到一个A里边了，这宽度是一个，这个是一个方的，对吧，是一个48乘以乘以一个这个48，哎，它这个设计也比较也比较独特，那我们改一种设计方式，我干嘛呢？我把它这个宽度啊，我就直接给它定义成什么呢？就直接定义成18，我们直接来一个Y是一个18个像素，那这样的话，它的高度呢，我直接让它跟那个复元素是一样的高度，直接来一个100%，这样一保存，呃，Left menu left menu由于现在还没有高度，对吧，Left menu还没有高度，所以我们把left这样我就直接写什么呀，我就直接写一个48，我们的高度直接给它撑开就完事了啊，一保存，那我们这个条是不是就出来了，哎，现在这整个是这个什么呀，是这个u Li啊这个u Li，然后呢，我们这个菜单是它里边那个Li对吧？Li，所以我们统一给这个u Li的Li来设这个。

样式wise呢，就是18像素跟复元素是一样的，然后呢，它的hat呢，是一个像素对吧，然后它的background color background color直接来一个黑色的效果，那这样的话，我们这个跨就出来了，现在他们三个干嘛呢？哎，跟上面这个位置啊，跟上面这位置，然后呢，我们要让他们三个做一个这个对齐的效果，对齐的话，我们就这样，我直接给它，我们想一下啊，那现在我希望的是这三个的话，在的是这个中间这个位置对吧？在中间这个位置，在中间这个位置呢，我们就产生面临一个问题，那现在我们这里边它是不是要给它去分配这个距离啊，哎，分配这个距离，那这个时候他们整个之间啊，这个块与块之间需要有一个距离，然后上下是不是还要给它留一个距离啊，哎，所以这个时候我们就要去，呃，确定一下它的整个的一个高度，我们就参考一下它这个我大概量一下。

整个高度的话，我们还是看一下这个图吧，这个图哦，它的这个整个高度，实际上它就是这么一个东西，然后它应该是我们看一下它这块，它是等于啊，它是通过定位看到了吗？它是通过定位把这个东西给它定过去的啊，所以我们这一块我们也可以定位，也可以通过什么呀，其他方式，比如说我直接通过一个这个，通过一个这个叫呃弹性盒也可以，但是用这个弹性盒会稍微有点麻烦，那我们干脆我们就模仿一下它，我们也通过定位给它往下定就完了啊，通过定位往下定的话，那这时候我们给它整个要开启一个相对定位给它外部容器，然后内部容器的话，我们应该是开启一个这个绝对定位啊，绝对定位哎，Position，一个absoluteut，那这个时候我们要去定位的话，那这个时候他们的位置你要注意了，三个框的位置是不是应该不是应该不一样啊，哎，应该不一样，所以这个时我们来分别给他们指定Li，我。

直接来一个nth child nth child的，我们来什么呢？来一个这个一，哎，那第一个子元素第一个Li，第一个Li的话，刚才我们看到它这个top应该是一个18像素啊，18像素top是一个18，那这个时候我们希望的是肯定它是需要在一个这个中间的，对吧？十八一个像素把第一个往下挪，那肯定，那很明显我的最后一个是不是应该在这个离下边18呀，诶正好在中间一个位置，所以我们这个第三个应该是一个什么呢？应该是一个BOTTOM18BO DOM应该是一个BOTTOM18，那这两个的位置就跑这儿来了啊跑这儿来了，然后呢，我们还有一个是我们第二个，第二个的话，应该是在他们两个的一个什么呢？他们两个的一个中间，他们两个中间我们就需要算一下了，我们来看啊，它整个是18，上边距离18，那么说我们现在像素就是一个30，下边一个18，中间就是一个什么呀，就是一个12，就是一个12，那等于我应该是上边给分六的话，下边给给分。

哟，那我这个元素是不是应该在这个24的一个位置，诶，24的一个位置啊，我们这一保存走一个，那是不是正好这个位置啊，24有点偏下了啊，我们调一个23往上一点，哎，那大概就是这样一个位置对吧？大概这样一个位置，那这里边我们来看一下它的间距，一定这是一个18，这是一个18这儿的话，如果算的话，它距离下边18，这应该是一个30。30对吧，有。应该是一个TOP30 top30我们都设置top，我们这好算一点啊，TOP30这一块距离设置完了以后，这是18，这是30，那这个18跟30的中间的话，那应该就是一个这个20 24对吧，24，那这样的位置就比较对了，所以我们这改成这种方式设置，我就不设置bottom，直接这让他们间距给它设置一个相等的，然后颜色的话，它是一个白色，所以这时候color的话，我们直接来一个这个FF，然后呢，把它复元素的背景颜色给它去掉，那咱我们来看效果，那现在我这整个这个三条这个线是不是就出来了，哎，三条就出来了，所以很简单是吧，其实我们要用定位的话，这就很很清晰了啊，很清晰了这儿啊，我们来设置一下这个是什么呢？这个是我们左侧导航。

这是我们导航的一个图标，那这三个Li呢，这几个Li是我们的什么呢？哎，是我们这个导航的一个什么呀？哎，一个这个哎这个线吧，哎这个线，那这块设置完了，我们这个菜单就已经整完了，是吧，跟那个效果是一模一样的，然后再有一个效果，就是当我们这东西点的时候，它是不是需要有一个这个就是有一个变化，它是有一个动画，哎有一个动画效果啊，有一个动画效果，那现在我们来看一下，那这个时候它的这个动画呢，我们先怎么怎么设计啊，怎么去写，那我们就先看看，我现在先不考虑动画，我要实现它这个效果怎么样，那我要实现它这个效果，首先呢，我们中间这个是不是得消失啊，哎，中间这个得消失，那所以在这儿的话，我直接让中间这个嘛呢，哎，我们要让它一个隐藏，我们先看怎么隐藏，待会儿我们得是在某种条件下是不是才触发呀，所以隐藏的话，我们就直接来什么呢？诶来一个这个viibility，来一个什么呢？来一个黑啊，我们直接隐藏就完事，VI。

哩，黑的，那这样它是不是就直接就直接就消失了，哎，或者你用这种方式让它隐藏，或者也可以什么呢？直接OB变成一个零，哎，就说它变成一个纯透明的效果，这样也行啊，两种方式都可以，那这个东西隐藏了以后，因为我们这块它应该有一个过渡效果，你看它是不是有一个有一个淡出淡入这么一个效果呀，所以这应该用那个OB cityt的话，我们待会儿做的时候，它也会有这么一个效果，所以把这个加上啊，有一个OB city让它隐藏，隐藏完了以后的话，我们等于是它上下是不是会有一个这个交叉呀，哎，有一个交叉，那交叉这块很显然我们应该用到一个变形，它应该是往下转，这个玩意儿是不是应该往上转呀？哎，那它往下转，第一个往下转，我们这来他要干嘛呢？诶向下旋转，向下旋转的话，在这儿我们应该是用的是一个，这个叫做一个我们应该用的一个rotate rotate一个什么呢？Z沿着Z轴旋转吧，向下旋转我们来试一下，我们直接。

X个45度，这样我们一保存一刷新，诶这个分号不对啊，Roll一个Z，那这样它是不是就向下旋转了，那我那个如果是向上旋转的话，它应该是一个什么呢？它应该是一个负45对吧？应该是一个负45就往上走了，但是呢，你这块转完了以后，很明显这个效果是不对的，变成你这样整完了以后是不是变成一个三角了，哎，就变成一个三角了，那这里边它这块什么效果，它整完了以后是不是这两个交一块了，但是我们这个转完了变成一个三角，为什么会有这个差距，因为什么？因为现在我们这个旋转的点沿着Z轴转，它的点是不是在我们这个盖的一个中心位置，所以现在它转的话，跟我们这个表似的，它是沿着这个盖的中心再去转动，而我们它的这个效果是不是在沿着这什么呀，是不是沿着这个点它得往下转，这也是沿着这个点往上转呀，所以在这里边我们要想它交叉非常简单，我们要修改什么，我们要修改的是它的这个。

变形的一个原点位置，我应该把这个点是不是改到它的左侧呀，哎，左侧以这个时候还记得我们这个属性吗？叫做一个transform orange，所以这个时候我们来干嘛呢？我们来修改我们这个形的一个什么呢？诶变形的一个这个圆点，圆点的话我们就直接改到什么呀，改到左侧啊改到左侧，但是它就一个像素，你写个三也行，那这样这两个东西是不是就给它交叉到一起了，哎，交叉一起了，但是你把它交叉到一起了，你会感觉他俩这个位置吧，稍微的有一点。

有点偏对吧，有点偏，感觉上他们对的不是那么的齐，你看这个感觉是稍微的往下什么呀，它是往下走一点啊哎，稍微的往下走一点，那我们把这个度数我们调一下看看行不行，调整一个45度。嗯，40度呢，哎，40度我们看一下，两个都是40度，我们看一下这个度数我们需要去调一下。哎，我看一下啊，嗯。这个度数基本上还可以是吧，那其实我们现在相效果就是它这个旋转完了以后，呃，这个点跟他这应该是一边，应该是一边齐的，对吧，现在我们看看现在其实就基本上是一边齐的啊，基本上一边齐的，所以这样的话，我们这个效果基本上就出来了，对吧？你看跟这个叉子是不是一样了，所以这块我们调完了以后，这个度数我们相应的也要调一下啊好，那现在我们这个效果给它出来了，给它出来以后的话，那我们问题就是现在你这个效果不是上来就是这样，我们是不是需要在你点的时候这样了，那如果点的时候这样的话，如果是在我们的这个什么里边是吧？在我们的这个这个真正的项目里边，我们应该用GS去实现，但是现在我没有GS，没有GS，那么现在我们只能采取一个什么呢？哎，我们就直接咱们就low一点吧，Ho，当然这个ho其实挺傻的，因为在我们移动端里你没法整ho对吧，所以我们只能是模拟一下，所以呢，接下来我们直接给它加上一个这个ho menu icon的一个ho，我们这直接写了，直接来一个and表示外层元素。

我们直接来一个给它设置后，然后把这几个呀复制过来，CRLCCRLV上边这组呢，我都给它删了，我都给它删了，也就说你没后位的时候，我让你没有这个样式，也就说没后位时候我只给你定义那个位置，然后后位的时候呢，我把这些就可以给它去掉了啊，可以给它去掉了，然后这个时候当我们鼠标移入以后，它是不是就会有一个变化，哎，当然现在没有动画效果，没有动画效果呢，我们给它加上一个这个过渡transaction transaction，我们比如说我们直接来一个这个，呃，0.3秒吧，哎，0.3秒，那这样我再移动上去有点快了是吧，我们来一个五。

哎，那这样是不是就会有这么一个过渡效果了，诶跟这个东西就基本上是一样，但是它这个是点子时再触发的，而我的这个是就是你得你后味上就会触发了啊，后上就会出发了，好，那这个是我们说的这么一个这个左侧的一个菜单，整体来说代码稍微有点多，但是整体来说它也并不难啊，并不难，这个东西呢，自己来处理一下啊，自己来写一下，诶看看能不能写出来，然后呢，我们来写中间这个logo啊，我们先停一下。