尚硅谷前端基础 (110)

好，接下来我们来向下进行啊，向下进行，那刚才我们做这一块的时候提到那一个尾，尾类叫做FOX啊，FOX表示的是我们元素获取焦点的一个状态，刚才我们讲的时候，呃，没有特意去介绍这个东西啊，这是简单提一嘴，在你可以回去再看一下那个FOX啊，表示的是获取焦点的一个状态，什么叫获取焦点啊，你鼠标点进去就是获取焦点啊，这不多说了，也是一个，也是一个尾类啊，表示一，呃尾类表示一个特殊的状态，跟我们那whole啊，Active啊类似，只是不同的状态而已啊，然后呢，上边这块我们就做完了，那接下来我们来做我们下边这块啊，下边点也就我们中间这个啊，中间主要主要内容的一个区域，那这里边呢，其实如果我们直观上看的话，它分成两部分，一个是我们左边是一个导航条，二一个是我们这部分是一个，这个等于是一个轮播图啊，是这么一个东西，那这里边我们说的时候你就要注意了，注意什么呢？

啊，你要注意的是左边这块，左边这块很简单，就是一个纵向导航条，我们相信写的时候一定是很简单就可以很快速的把这东西能写出来了，但是你在写的时候，你要注意，你要考虑一下这个导航条，纵向这个导航条它到底是属于谁的，它是属于我中间这块区域的，还是属于上边这块区域的，哎，那如果你就这个图来看的话，那其实这哥们儿放哪都行是吧，你其实一般想的话，这一定属于中间的搬凳是吧，左边一个右边一个呗，对吧，左边一个搬左边一个这个导航，右边一个这个板凳就完事了啊，但是你要考虑我们这个整站的一个东西，就我们这练习来说，你心眼都无所谓，但是就我们这个小米这官网，它实际的一个情况，我们来看一下。在这个页面你是看不出来的，我们换一个页面，换一个页面，你看这个全部分类啊，我这一点这个条是不是才出来，哎，就说当我点全部分类的时候，这个条才出来，而且你看这个条，这个条跟我们的这个条是不是一样的呀，哎，是一模一样的啊，是一模一样的，所以这个时候很明显这个条是从上边滑下来的，对吧？从上边滑下的，所以注意了，这里边它并不是这个条，它并不是属于中间的，它实际上属于什么呢？属于上边的，哎，上边从上边划下来，因为待会儿我们要做的话，可以从做一个鼠标移动到这里边，然后它显示这么一个效果，你如果把它放到下边，下边也行，但是你下边的话，你就得配合GS了，对吧，所以这里边注意这导航条看上去是中间的，实际上它是属于我们上边这个头部的，哎，所以换句话说，这个头啊，我们还没写完啊，头部还有一个左侧。

导航条我们还需要再写一下啊，再写一下，所以这个东西也比较好写，结构上我们来看一下，因为它属于上边的嘛，因为它实际上跟这个菜单是一组的，我们应该刚才就写跟这个菜单一组的，当我的鼠标移动到什么呢？移动到我这个全部商品分类的时候，它是不是应该显示出来呀？哎，它应该显出来，然后可以在里面去，在里面去选，所以很显然这个菜单我应该写到这个Li里面。

对吧，应该写到这个L里边，当然对于我们现在的这个，对于我们现在的这种情况来说，我并不需要，我并不需要让它隐藏，因为它是首页默认是不是就显示出来了，所以现在我们不考虑隐藏，我们就说一下结构，我们应该写到这个Li里边，那至于隐藏的话也也简单，哎，Overflow这个display，诶display是不是就隐藏了，哎，就隐藏了啊，所以我们在这来创建啊，那所以这里边注意啊，这个比较特殊啊，比较特殊在这儿我们来干嘛呢？我来创建我们这个左侧的这个导航菜单，左侧的导航菜单，我们这里边我们写一个这个ul，呃，Ul呢，我也也叫ul了，也叫ul，我们给它一个class，呃，Class呢，我们叫做一个这个。

我想一下，我认为能叫ul了，我让他叫ul的话，其实跟里边这些会稍微有点重复，对吧，稍微有点重复，那我为了区分一下吧，我改一个名，改个名我不叫ul了，我就叫什么呢？我就叫一个nay，哎，就叫一个这个nay啊，Nay里边的话我们放一个div div里面我们放超链接对吧，Div里面我们来放看看啊。这个A里边还有一个这个字儿，字儿的话，我们这么写吧，Div啊，这个nay的话，我们来一个class class我们叫做一个left的menu啊，这是我们左侧的一个菜单，然后呢，这个div div就表示什么呢？我们这一块div就相当于我们这个Li的作用啊，就相于我们L，当然你说老师这这这我看不惯，看不惯你就全都换成u Li Li也行啊，换成u Li也行，嗯，我还是写UL吧，我怕我写完了结构上你们看不懂是吧，看不懂我这来一个class class我们这叫做一个left menu啊，Left menu这个等于谁呢？这个表示的是我们菜单的一个整体啊整体，然后它在里边我们再写这个LY，每一个菜单都是一个LY，我们这放一个超链接，这儿来一个这个井号，井号我们来写字，这是一个手机空格，然后是一个电话卡，电话卡我们要看一下它，这需要几个链接啊，这是一个链接还是两个链接，我们看看能不能点。

嗯，那。电话卡。手机啊，那这两个基本上它点完了效果是一样的，所以这个东西我们就干脆就放到一个链接里就行了啊，一个链接就行了，然后的话这个位置还有一个这个小三角，小三角的话，我们就直接用一个这个图标字体就给它搞定就完事了啊，所以在我们的A，呃，在A里边我们这个结构还要稍微麻烦一点，结构里边因为我们要加一个图标字体，对吧，我们在A里面我们再写一个这个I，写一个I的话，我们直接给它来一个class，叫做一个as图标，这个小三角箭头，箭头我们叫做一个aro箭吗。

哎，有一个向向向向向右的箭头吧，我们叫做一个FA的一个这个啊，哎，那这里边我们就直接把这东西给写上就完事了。写成一个这个箭头啊，Class这一加，哎，我们来看看这箭头对不对啊，看看箭头对不对，这一刷新诶箭头是不是就出来了，哎，箭头出来了，然后下边这几个菜单我们依次来写一下，一共有几个，我们来看一下，一共有这是一二三四五六七八九十，一共有十个，十个的话，那就是我们这对应有十个LY。四五六七八九十啊，我们格式化一下，然后我们来修改里边的文字，呃，这里边第一个手机电话卡，第二个是我们这个叫电视盒子。

电视盒子，然后下边是我们一个笔记本，还有平板，再下边是一个家电，还有插线板，再往下是出行，还有穿戴。出行还有穿戴，然后是我们的智能，还有路由器，再往下是我们一个叫店员，还有配件店员，然后这个是一个配件，呃，再往下是一个健康，还有儿童，呃再往下是一个耳机，还有音箱，耳机还有一个音箱，再往下是一个生活香味，那那大概这么一个结构啊，你看这个东西比我们京东那个导航条简单多了啊，但是其实你写完了以后，你会发现问题，我写完了导航条是不是整个都都横过来了啊，都横过来了，为什么横过来了？因为我们之前，我们之前写过一个东西，写过什么东西呢？我们之前实际上是把我们这里面的所有Li都做了一个。

向左浮动，那如果说只有他们自己的话，那你浮动就浮动嘛，但是现在我这个Li是不是也是它里边的了，所以等于把它也带着浮动了啊，所以就导致我们的横过来了，那你要解决这个问题的话，你就找一下你那个浮动是在哪设置的，我们找一下我们那个LY，呃，我们叫做一个float float，一个left，直接找float吧，Left，这是top bar里边的玩，哎，这个是我们logo的，这个是我们这个navy river。

再往下search。在在这儿呢，应该是这个，现在我们这设置是navy rapper里边的LY是不是所有都浮动啊，那这样就包括我们这一组LY也会浮动，所以的话我们要呃改一下的话，我们就直接改成这个navy里的LY，哎，Navy里的什么呢？Navy里的这个子元素LY，哎，只有它的子元素才浮动，后代元素干嘛呢？就别浮动了，那这样改完了以后的效果就是你看他们该横横，那这一块是不是就纵向排列了，哎，就变成纵向排列了啊，所以之前我们设计的一个样式写的稍微的有点问题，影响到他们了，我们改过来就行了啊，改过来行了，好，整个这块位置就给它确定好了，确定好了，但距离的话，我们待会再调距离的，很明显是行高的问题，待会儿我们一调就行了，然后的话，我们整个这个布局啊，这个结构我们给设计完了，那实际上就是一个life的menu这个哎ul，那接下来的话，我们来给它设置一个样式。

设置一个样式，找到我们的这个页面，我们的index，那这个的话，它也是在这个navy里边对吧？Navy里边，那我们关于它的样式的话，我们就直接写到na的下边啊这来设置什么呢？设置我们这个左侧这个导航条这个样式左侧导航条这个样式左导航条刚才这个类我们也写出来了，叫做一个left的menu，这left的menu我们看图，首先它有一个大小是固定的，对吧？诶这是一个什么呀？它的整个高度看这儿整个高度是不是一个四百六啊，这东西是不是跟它一边高啊，诶所以高度是一个460，宽度是一个234，直接写上就完事了啊诶高度是，诶宽度是一个234，然后高度是一个460像素啊460像素写上，然后的话，它整体的话还有一个背景颜色是一个透明的对吧，透明背景颜色我们这直接来一个这个background color background color是一个r gba rgba的话就是一个000，然后最后是一个。

点点六百分之六十透明的这么一个效果，那写完了以后，我们这个框就变成了这样了，对吧，就变成这样了，但是你说跟图里不太一样啊，因为它后边有东西透过来，所以现在的效果不太一样，诶别着急，待会我们就调，然后的话就是我们的这个导航条的一个位置，那这个位置它应该是贴到这个里的是吧？贴到这里的，那这个时候我们就要给它设置一下它的一个定位了啊定位的话很明显，你像这一层很明显它是飘到别的层的上边的，对吧？所以毫无疑问它应该是开启什么呢？开启绝定位啊，开启绝定位的，诶position来一个absolute，开启一个绝定位，哎，那不是它啊，是我们的这个left menu开启绝定位，并且的话它开启了绝对定位，它的层级应该不是特别的高，至少你看我这个层是不是会盖住它呀，所以它的层级应该至少比它低，那个层级我们指定了一个四个九，所以它的层级我们就给他来一个这个三个九，哎，三个九，那这样的效果就是它会被上。

上边那层给给盖住啊，不至于它盖住上边的啊，给它层级稍微设置低一点，比它低，但是比别的要高一些啊高一些，然后就是我们的这个它的一个位置，它的一个位置的话，现在是在这个下边，那我们按理说效果是不是应该跑这去哎跑这儿去那这里啊，现在我们它是。它的子元素，它的复元素是谁？Life的menu的复元素是不是我们这个这个这个这个第一个LY啊，哎，第一个LY，所以这个时候呢，我们就直接给它来一个这个class，哎，Class我们叫做一个这个呃，第一个LM起个名叫什么呢？叫做哦ose rap，我应该刚才把那个oose加在这个Li上啊拉APP呀，所以你会发现其实我们写的时候就是你随着一步写，你会发现每一步都会存在一些不足啊，那但是虽然有不足，我们有很多方法去纠正它，对吧，纠正它，所以这个时候我希望什么效果呢？我希望我的这个Li可以参考于它定位，所以这个时候我直接给它来一个po relative，那这样它是绝定位，它的负元素开启了相对定位，那就很明显，它是不是就参考于这个rapper去定位了，哎，Rapper去定位了，那这里呢，我可以给它设置一个背景颜色，让它出来background color background color，我们来一个这个。

Red设置一个红色，它显示出来，这样它是不是跟这儿啊，哎，它在这个位置，那这里我们就可以通过调整它来调整，通过调整它的left的值，还有这个什么bottom值，Top值，是不是来修正一下它的位置，哎，那我们来看一下，首先的话，上下这个位置在这儿就没问题，因为它正好是在那个一百千度的下边，所以在这儿就没问题啊，所以垂直方向的位置我们就不管了，水平方向的位置的话，应该是在在这儿啊，哎，应该在这儿，所以这个时候它应该往这个位置是不是要移，移这么多呀？哎，那也就是说我们只要设置一个这个life的值啊，设置一个life的值，Life是一个什么呢？是一个负值，对吧，因为你要往左移嘛，负多少呢？负多少，我们要看一下，是不是要看一下这段距离啊，这段距离我们设置了，我们设置了是多少啊，我们这儿设置了一个。

Pading left，这个padding left的是一个58个像素，这有一个58，然后我记得它还有一个七个像素，那这58加七是应该是65像素啊，那按道理来讲，我们这life的直接来一个负65个像素，那它应该正好就贴到这个边上了，哎呀，那负65像素有点有点小了，是吧？我们来看一下零是在哪，它的零是在这儿，那我们的负65啊，负65不对了，负65不可能去到那个位置，因为负65是不是正好跟他对齐了，正好跟他对齐了，我是不是还得移动到它外边啊，哎，它本身还占了一个55呢，所以这应该是一个55 65应该是一个一百二啊，是120，那这样的话，它的位置应该正好就是在这个位置，对吧，那这样应该正好正好是一边提的这个距离。

哎哟。我们来用这个边，我们简单量一下啊，是一边齐对吧，正好是一边齐的，所以这块这个值我们就通过一种计算的方式来算的啊，有同学老师你用这个right值行不行，Right值也行，但是很明显right这是不是差一点啊，哎，差一点你用right是零也不行，也得也得算一下啊，用right也行啊，所以这两两种方式都行啊，我们通过这个left的把它固定到这个位置就完事了啊，然后呢，我们这个背景颜色就可以去掉了啊，这样就OK了，那现在我们整个这个框框的位置就已经没问题了，对吧，就已经没问题了，然后接下来的话，我们就要设置一下我们这个框里边的一个效果，那首先的话，我们先把它的行高给它重置一下，行高的话我们直接来一个lih lih的话，我们来一个一倍行高，那这样我们元素就不会再像那种展开了，因为我们上边为了居中设置行高了，设置行高等于它也继承了，那现在我设置一个拉H，把它这个行高给它覆盖掉，就不会有这个问题了啊，然后再来看。

再来看的话，就设置我们超链接了，你看这些的时候是不是整个都可以点呀，所以整个就是都是一个超链接，整个都是一个超链接，我们来对照这个一下。这个图在这儿的话，我们这里边来先给超链接来设置样式，应该是我们这个life的menu life的menu里边的一个什么呢？里边的一个A，这个超链接首先我们肯定要display，把它转换成是一个块元素，然后宽度的话，应该是整个就跟它一边宽的对吧？宽度我们就不用写了，那默认就是百分百嘛，不用写了，然后高度的话，我们写一个高度，我们写了量出来了，这是一个42个像素，对吧，我们就直接写就完事了啊，高度是一个42，然后整个这个布局其实效果就已经出来了，对吧？效果已经出来了，然后的话，你为了让它有一个垂直居中，你拉HD也设置一个42个像素，那这样你这个文字就在这个A里面，就是一个垂直居中的一个垂直居中的一个效果了，然后的话，我们这个字体大小是一个字体颜色应该是一个白色的对吧，字体颜色是一个白色，所以我们这来一个color color我们直接来一个外的设置一个白色对吧，那达到了这样一个效果，白色的以后的话我们来。

呃，再看我们后边有一个这个小三角，这个是一个图标字体，它是应该在右边啊，诶，它在右边，我们单独给它设置一下ctrl c ctrl va里边的这个A，让它向右浮动啊，向右浮动啊，这样一保存这个三角时候，也就跑右边去了，哎跑右边去了，然后这里边的位置啊，我们还要继续去调整啊，当然你看是不是出现一些一些位置的问题了，哎，别着急，我们慢慢来调，那这里边的位置的话，我们先看什么呢？我们先看一下我们的这个这个这个上边其实有一点我们没注意到，上边是不是还有一个这个边距是一个20啊哎，边距是一个20，包括下边也有一个边距是一个20，所以这个时候我们就直接把这个边距呢，给谁呢？给我们的这个left menu，整个我们的这个ul上下，给它加一个20像素的外边距内边距啊，我们直接来一个拍镜，那目的就是把它往下挤啊，20像素左右是一个零，然后的话把高度调整减减小一个40，这是一。

那这样呢，哎哟哟。没写号这样的效果就是上下会给你挤出一个这个距离来，然后他就没有那么没有就是不会那么靠上了啊不会那么靠上了，好然后我们整个写完了以后，我们一点点调吧，一些细节地方我们还需要去调整，首先呢地方呢，就是我们这个箭头，这个箭头怎么他怎么挪上去了，哎怎么挪上去了，我们来看一下，我们来检查一下。箭头跑到我们这个上面的最上面了，本来这个箭头是应该在这儿是居中的呀，但是我们这儿写完了以后，它的位置是等于是是靠靠上去了啊，往上去靠了，往上去靠了，并且他这好像还带了一个这个。

带了一个编剧对吧，你看这是不是多了一个编剧啊，我们来看一下这个这个编剧是谁的，是不是这个的，哎，不是这个I的，这个编剧是谁的呀。这个编剧是这个A的A，这多了一个marin，诶多了一个in，其实这个并不是我们去设置的，因为这个marin应该是我给这个上边这个标签就设置了，所以这个时候我应该把这个A的这个margin right啊，我给它变成0MARIN right我们应该变成零啊，不要影响到，就是我们不要让上边的样式影响到我们当前这个，那这样的话它就，哎我们来再看还有没有。还有一个marin。Margin，这是一个right，我们这是一个。

Margin right，零。等于这个样式没有生效，没有生效，那证明它的优先级不太不太够，被上边的给覆盖了啊，那既然优先级不够的话，我们给他增加一下优先级，我们来一个LY，那这样的话我们再看。优先级还是不够，上边这我怎么写的，我们来看一下，上边这个A是哎，New rapper里边的Li里边的A，然后这里边呢，也是一个哦，它的优先级是一样的，那这个肯定是写到下边了啊，它在这儿呢，对吧，它位置更靠下一点，所以它的优先级也就导致更高一点了，更高一点我们再加一级吧，再加一个我们叫做一个ul，这样就没问题了，对吧，它就已经靠过去啊，那这样我们就不然的优先级不够，导致我们下边样式把我们上边样式给给覆盖掉，我们调不过来啊，所以我们加一个ul来改变一下它的一个这个优先级啊，改变优先级那这一块我们设置完了，然后再看啊，再看的话就是我们这个箭头，箭头现在往往上走了，为什么往上走呢？因为本来我们设置了一个行高对吧，本来我们设置了一个航高是一个42像素，但是很很明显这个航高现在对这个这个玩意儿是没起作用啊，哎，所以我们可以单独的再给它设置一下，我们尝试一下，看看这样能不能起作用。

是我设置一个航高，它的位置就下来了，哎，因为它浮动了以后，这航高对它没用了，对吧？没用了，所以我们单独给它设置一下，或者我们可以再试另一种方式，我们看看给给它加一个overflow hidden行不行啊，突发剂啊，我们试一下。余小村啊，Overf flow黑的还不行，那就咱们就直接给它整行高吧啊one he，我们来一个是一个42个像素啊，让他去居中好，那这个位置的话，我们就给它设置出来了啊，没什么难的啊，没什么难的，就是一看这个垂直方向的位置出问题了，第一个你就想这个横高就完事了啊，横高横高就完事了，哎，咱们这个好像给比那个粗是吧，小一些小一些，我给它调大一点，不是放size，放size，我们来个16，本来就是16啊十二十，哎，调大一点，哎调大一点更难看啊，那我不改了，还是用之前那个大小啊，不改了。

嗯，然后就没啥了吧，然后我要做的事就是左右有一个边距是吧，这是一个30啊，这边呢，这边应该也是30，所以这时候我再给A加一个内边距，内边距的话，我们直接给它来一个拍定，拍定上下，不要左右来一个30像素，那这样就把它整个往里挤，诶你看这个效果还是可以对吧，那整个这样就已经OK了啊，然后再看的话，移动道具进去以后，它的字体是不变颜色，但是它的背景是变成这个orange，这个橙色，所以呢，我们还要给A设置1HO啊，给A设置一个ho ho的话，它的字体呢，还是白色啊，还是白色，这儿为什么现在会变成橙色，因为还是我给上边变成橙色，这儿它是系承来的样子啊，它是直接从这过来，所以我们给它重置一下啊，这后的时候我们变成一个白色啊，变成一个白色，那这样的话就不变了啊，然后那个background color background color，我们给它试这个橙色啊，橙色这一保存，然后再。

再看哎，那是不是我们这个导航条这个效果就出来了，哎效果就出来了啊，然后我们再看一下，我们最小化一下看看效果，哎移动移动移动移动移动诶诶诶诶来看这哎移动哎呀。我这字儿字儿好像有点大呀，我标的是一个16像素，我设置多少，设置的也是设置的是。字体大小我好像没有设置有点大，我感觉我把这个字啊，我给它调调小一点，方size的16。哦，我就没有写自己大小，没有，没有写的话，我这再写一下啊方size，我们这来一个16个像素啊，16个像素这一保存诶我看啊。

没有区别是吧，那我来个14呢。14小一些，诶小一些好像稍微的跟这个原版的效果更相似了，对吧，更相似了啊，那这样的话，我们左侧这个导航条，我们就算是给它做完了啊，给它做完了呃，不再多做了啊，就做这么多啊，像有一些地方还是啊，写的时候，他你写的时候也是包括我写的时候也是不可避免的，可能会出现一些问题啊，但是出现问题别着急啊，出现问题咱们就一点点去调，一点点去修正，一点点去改，写的多了，问题改的多了自然就会了啊，但是它需要一个过程啊，千万不要说，哎呀，这写就出一块，这写也出问题，那写也出问题，那哪哪都出问题啊，不要害怕出问题，出问题是一个好事，因为出问题我们就可以解决问题，解决完了问题，我们这个代码是不是就可以更好啊，哎，就可以更漂亮啊，可以更漂亮啊，所以慢慢写，别着急，这一块写完了的话，然后其实还有一个部分没写，就是他他这还会有一个弹出层对吧，不写了啊，不写了太烦人了，这个弹出层这。

这玩意差不多啊，差不多，而且小米官网它也不是用CSS写的，它是用这个GS写的，我们用CS写也行，这玩意写了会极其麻烦啊，你可以自己当练手去写一下，我实在是有点有点懒得写了，是吧，我就我就不写了啊，我家自己来尝试写一下，这个东西我们就不多说了啊，就不多说了，好左侧导航条完事停一下。