尚硅谷前端基础 (62)

好，那我们讲完了浮动，那接下来我们来尝试用浮动做一个做一个练习啊，练习做什么呢？那其实这个时候我们就可以先做一些我们的这个，这个叫做一个导航条这么一个东西了，那比如说我们我觉得比较现在来说比较简单，比较适合我们做的话，那就是一个W3SCHOOL的这个导航条啊这个导航条，但是这个导航条它原版的话，跟我们这个写的稍微有点区别，我们就不用管原版了，我们就把这个条给最终给它实现出来就OK了啊实现出来就OK了，所以呢，我还是这样，我还是给它截个图啊放在那里边，然后呢，嗯，你待会做的时候，你可以先把视频停一下啊，自己呢先试着去去做一下啊，然后呢，做完了以后，再对照着我的视频，你看看哎，我做的什么样，你做什么样，哎有哪些地方是是不一样的啊，是我做的这个好一点的，还是你都得好一点，都有可能对吧，我这个，呃，可能只是我个人的一些做法，个人的一些实践方法，它不一定是最完美的，所以你写的时候，哎你。

说不准你那可能比我这个写的要要好啊，这个是我们的练习，我复制一下啊，把它粘到桌面上，然后给它拖到我们的练习的这个练习截图这啊这里面我们直接给他放过来。练习截图这个呢，改个名啊改个名我们叫一个零四啊零四我们叫做一个这个，诶W3SCHOOL的一个导航条，哎导航条它这个本身这个导航条我觉得设计的有点麻烦，所以我们写的时候我们不会整的这么麻烦，我们整的去，哎简单一点，我们来看看这东西怎么做，那我们还是啊直接在这我们创建一个在我们这个Excel里边，我们这个呃。创建一个这个文件夹，呃，比如部件夹创建一个新建一个文件，我们叫做一个零四啊，零四我们叫做一个，哎，叫W3死部的一个导航条导航条，那写它之前呢，我们还是先写一个页面结构啊，然后呢，这儿改一个标题啊，改一个标题，哎，那这个就是我们这个导航条导航条，然后同样我们把我们的重置样式表给它引入进来啊，我们的点斜杠CSS下边的一个re.css然后呢，我们来看一下这个东西，这个东西呢，我们还是啊，我们就直接对照我们这个它比较宽是吧，比较宽我们对照这看。

调整调小一点。这也调小一点，我们来先看它这个整个一个结构，结构很简单，那这导航条其实也是一样，我们也可以用我们的这个u l Li啊，U Li加上LY还可以用什么呢？我们这个直接用我们的这个呃，NAV标签，然后里边加上这个，加上这个超链接也可以啊，加上超链接也可以，或者也可以用其他方式，那这里的话我们先演示一个。

麻烦一点的方式啊，也就是说我们先演示一个我们这个NEUL加上Li的那种方式，它是一个比较比较传统的方式，所以我们先来搭建这个结构，这结构也很简单啊，很简单哎，这是来创建我们这个导航条的一个结构，结构的话在这儿呢，我们直接来一个ulul，给它一个class，我们叫一个navy啊navy，这ul呢，就是整个这个导航碟叫做一个navy，然后它里边的每一个选项我们就放一个LY啊Li Li里边呢，我们放一个A标签，写一个井号，然后呢，A标签里边写我们这个字，HTML的一个CSS写上它，然后呢，我们一有1234567，一共有七个超链接，七个超链接我们就直接给它复制一下34567啊，然后是all shift加F格式化一下，第二一个我们叫做一个brother。

Browse的一个side啊，Ber啊，然后ID，然后第三一个叫做一个server side啊server side我们复制一下，哎，一个就应该是一个浏览器的一个说的是我们这个服务器的对吧，Serve ver server side，然后下边是我们programming，我们的程序啊，PGRMMN啊，Programming，然后下边一个是我们的这个XML啊XL，然后再往下我们叫做一个web。哎，Web的一个building b building最后一个是我们reference啊，引用的一些信息啊，啊reference，那这个结构我们现在就给它做完了啊，结构也比较简单，我们直接给它运行一下啊，直接来运行一下，那大概写完了结构是这样的啊这样的，那这个结构我们给它定完了，当然这个跟我们现在这个它外在的一个表现其实差的还还挺远的，对吧？那我们现在要对它做一个这个布局，诶那来写我们的样式啊，Style标签，Style标签呢，首先我们来看一下stylele style标签我们要写它的话，首先我们整个这个菜单它的宽度也比较简单，它的宽度是一个固定的宽度，所以我们直接把这宽度给它写死就完事了，所以在这儿我们来设置什么呢？诶设置我们的什么呢？设置我们这个navy的一个大小，直接来一个点点一个navy，它应该有一个外还有一个head。

啊，宽度高度都是固定的，那我们这来看一下，我们直接看了啊，选中一下整个这个东西，这东西是一个看这ULUL是一个宽度是1210，高度是一个48，所以宽度是一个1210像素，然后呢，我们的高度是一个48个像素啊然后在这儿呢，呃，还有一个背景颜色是吧，背景颜色刚才没看它这背景颜色应该看不见，因为它这个设计的比较奇葩，比较奇怪的一个设计，我们来看一下ul背景颜色，哎，你看它是一个设置的背景图片对吧？所以颜色的话，我们就我们就吸一下吧，看这有没有取色器啊。

工具。诶，他这里边取得器，我这还我还找不到了，找不到了就直接用我们的那个发吧，截一下。屏幕取色器，我直接吸一下这个颜色啊，这个是一个这个颜色复制一下background color啊background color我们直接粘过来啊，粘过来然后这写个注释啊，这个是设置我们这个设置宽度和高度，然后下边这个是设置背景颜色，设置背景颜色啊，然后我们来看一下效果，诶，那这个条整个是不是就这么一个效果呀，哎，这么一个效果，然后为了看的清楚一点，还是我们让它居中一下，因为靠上边不太好看啊，Margin margin，我们来一个这个100像素啊，100像素，然后来一个凹凸，让它往下挪一点，然后让它是一个水平居中的啊水平居中的哎，如果这个代码你还看不懂啊，你回去捣鼓捣鼓去是吧，我们这个东西到底是一个什么意思啊，什么意思？哎，Marin Mar g Mar，诶什么写分号啊，Marin我们说了写两个值，前边两个值是上下的对吧，后边两个值是一个左右的，所以上下100像素上边加一什面距，然后左右。

是凹凸然，它是一个水平居中啊，是这么一个目的，你可以不明白可以再看一下啊好，然后现在我们整个这个条是不是就写出来了，哎，你看跟这玩意儿一模一样对吧，一模一样条写出来以后再来看，那现在我们现在这里边的这些链接，它是不是应该在我们的这里边，它应该是一个横向排列的，哎，横向排列，横向排列，那也就是说我应该让他们整个都横过来，那毫无疑问，我这应该是设置浮动，设置浮动，我这里边应该给谁设置浮动啊，你要看给谁设置幅度，你要看现在是谁垂直排列，这都是谁垂直排列A本身是个行内，A不不会垂直排列，所以垂直排列的是谁呢？是A里边的子AA的负元素，也就是那个Li，所以现在垂直排列的是Li，所以在这里边如果你想横过来，是让谁横过来，是让Li横过来，所以这应该是设置我们navy中的这个Li，所以这我直接点一个navy下的一个Li，我应该让Li水平。

排列，所以我应该让所有LY都向左浮动，那这个时候这一堆LY是不是就都横过来了，哎，就都横过来了，那同理，你这也可以说老师我能不能向右浮动呢？右浮动也行，但是注意你右浮动以后，你的顺序跟你就是你这个显示的顺序跟你页面里的元素顺序正好相反，那这个时候你的第一个会跑到最右边，第二个会跑到最右边的倒数第二个，所以这个时候它的顺序正相，所以你在设置浮动的时候，你一定要注意，你想它怎么排，实际上这向左向右问题都不大，但是你要考虑顺序，而我们这是希望HTML在最左边啊，那在最左边，那很明显这就应该是向左浮动，所以这我们来设置我们Li向左浮动啊，向左浮动啊，然后呢，以。

哎，使我们那什么呢？我们这个菜单干嘛呀，哎，横向排列啊，横向排列好，那现在我们就让它横过来了，横过来以后，但是注意啊，我现在给LY设置一个背景颜色，我们看看现在LY多大个，Background color background color，我们直接来一个red啊，设置一个红色背景，那你现在看我们的u Li这么大，而我的LY实际上只有这么点，这是为什么？哎，很明显，因为无论你是不是浮动你的高度和宽度默认是不是你的高度是默认，都是被内容撑开的呀，哎，所以现在LY多高由什么决定，由它里边的文字决定，所以就导致我们Li实际上现在整个高度是比较的比较窄的啊，比较窄的，所以这个时候我们应该设置一下它的高度，诶设置我们Li的一个高度，它的高度是不是应该和它负元素的高度是一样的呀，哎，高度是一样的，所以我们直接来一什么呢？哎，来一个hi hide直接写一个48像。

速，或者写一个100%也行，那这样高度就出来了，高度出来以后，文字在副元素里不是垂直居中的，所以我们还有一个属性叫做一个line height Lin height，我们来一个48个像素，也就说你让它的高度和这个负元素的高度是你让那个行高和负素的高度是一样，那效果就是文字垂直居中，那这样是不是就OK了？那其实这里边呢，我们这个烂head的目的是什么呢？诶是将，诶我们这个元素啊，将我们这个文字在我们这个负元素中，这个垂直居中啊，垂直居中，那这里其实啊，你会发现什么呢？我其实写完了烂head以后，我的氦其实可以省略不写，因为什么呢？因为当你设置完这个烂氦以后，你的行高就会自动把这元素的大小给你撑开啊，自动给你撑开，所以这行高你其实写就是这个高度，你写别直接设置一个行高，这高度自然而然就出来了啊好背景颜色去掉背景只是想看它。

的高度，好，那这里面我们就设置完了，设置完了以后再来看我们这个A里边的一个文字，文字的样式跟它是不是还不太不太一样啊，哎，文字的样式，那这里边我们就需要给A设置一下，我们来设置什么呢？设置我们这个A的一个样式啊，A的一个样式，那这里边我们直接点一个哎，点一个navy下边的一个A啊，我们设置超链接，超链接什么样式呢？首先啊，首先这个字下划线是不是应该去掉啊，哎，我们应该是一个textre textre，我们来一个这个那啊下划线去掉，然后字体颜色应该是这个有点灰不的这个颜色，对吧，我们还是来直接通过我们的这个取色器，我们来吸一下这个颜色。

呃，屏幕取得器，我来吸一下这个字的一个颜色，这个是一个这么一个颜色吧，777对吧，777，所以在这儿我们直接来一个color井号，一个七七，然后这儿一保存再来看，诶，那是不是就是这样一个颜色啊，这样一个颜色，然后这个字儿啊，实际上应该好像是要要大一些，我们大概估一下吧，放size，比如说我来一个这个16个像素，让它稍微大一点啊，稍微大一点，哎字儿，哎本身就16是吧，那我就来一个18。诶18让它这个字儿稍微大一点，然后诶基本上就是这个效果了，对吧？字稍微大一点，然后再看的话，当然你会发现其实整个布局就已经出来了，然后的话，还有就是我们再看一个问题啊，现在我的整个这个元素的大小还不对，你现在我的这里边在原版的里边，它这些链接是是在这儿是平均分配的，对吧？平均分布的，而我这个链接是不是等于现在都挤到这个左侧呀，诶都挤到左侧，所以这个时候我们就需要调整我的每一个块的大小，诶也就是说我可以把什么呢？把Li调整的大一点，然后设置一个边距，是把它给平均，给它分开呀，哎，那这里边我们调整的时候，我们可以调整两种方式，一种呢是直接设置Li大小，把Li变大，还有一种呢，我是设置A的大小，把A变大，把A变大，随之而来是把Li也就给撑大了，哎，所以这个时候我们的宽度可以给两个元素设置，一个我可以设置给Li，一个可以设置给A。

那这个时候你就要考虑，我这个宽度是应该给Li还是应该给给A呢？那这里边也就说我们实际上这个宽度应该大概是这么宽，哎，假如说就是这么宽，那这个宽度你到底是给这个Li，还是给这谁谁呢？还是给A呢？我们想一下，其实如果从这张图上看的话，你给谁都行，但是实际上如果你给Li GA a的话，它还是有区别的，什么区别？比如说你的宽度是给Li的话，那么A的大小是多大呢？A大小就是文字大小，文字多大那么A就是多大，那这个时候就会出现一个问题，这个区域是Li，这里边的区域是一个A，也就是说你要想点这个链接，你只能点这个字，而这个位置你是点不了的，懂这意思吗？如果给LY的话，但是如果你你的宽度是给A的话，那就意味什么呢？我的A整个这整个就是一个A，也就是说这个东西无论你是点这儿也好，还是点字也好，只要是在这个区。

里边它都属于超链接，都属于超链接，只要你随便点一个是不是就可以发生跳转呀？哎，那问题就来了，那这个东西我们到底要设计成什么样了？哎，那这个东西你要看一下图啊，看一下原版的什么样的，你看我们这个原版的，我用不用说非得去点字啊，诶很明显不用非点字，我点这儿是不是也可以点啊，哎，也可以点，所以很显然这个东西整个就是一个什么呢？就是一个A啊，整个就一个A，所以这个时候我们应该干嘛，我们应该给A去设置大小，那这里边你注意了，现在来看我现在的这个A，只有这能点，上边能不能点。

上边是不能点的，对吧，为什么上面不能点，因为现在A是个行内元素，它本身大小只有这么大，诶那我说了，我给A设置一个高度呗，我给A设置一个高度，高度干嘛呢？高度也是100%，哎，100%我直接写一个100%和负元素一边高，或者我就直接写一个什么呀，48个像素我写一个高度，那这样是不是就行了？哎，这样我们来看一看效果行不行。有没有，哎，没有，为什么，因为高度在这儿，它并没有生效啊，并没有生效，为什么A是行内元素，你设置高度是不没用啊，诶，那我把line head放到A这行不行，我们看看啊，这一保存，这一刷新。

拉害有没有用没用，同样它也是行内元素，你这设置啥都没用，所以我们现在希望这整个就是一个A元素，但是实际情况呢，A元素只有这么大个，那就意味着我们要去修改这个A元素的一个高度啊，A元素一高度，但是问题是A是行列元素，又没有办法修改高度，那怎么办？哎，很简单，直接干嘛呢？诶，我们直接来将我们这个A转换为这个块啊，转块，诶有没学说你转成块元素，它不又纵向排列了吗？哎，注意并不会，为什么呢？因为A的负元素是Lia的负元素Li Li已经浮动了，Li在一行，A只是在Li里会纵向排列，它不会影响别的啊，所以不会出现这种情况，所以我们直接display，我们来一个block，把A转换成是一个块元素，那这个时候其实你会发现，当我设置完块元素以后，这一块你就可以直接点了。

为什么呢？因为行高的话，它其实也会被A所继承到，所以这个时候你看我这个区域也可以点了，但是如果你不是块元素，你看这个区域是不是就不能点呀？哎，所以在这我们要把A转换成是一个块元素就完事了啊矿元素完事了，好转换完了块元素啊，我这补个注释，这个玩意儿，这个是去除，去除我们这个下划线，下划线下边这个是设置我们这个设置我们这个字体颜色啊，下边是我们修改字体大小，修改字体大小，修改字体大小好那接下来呢，我们就需要调整一下我们每一个超链机的大小了，但是这个时候其实产生一个问题，它这个设计比较恶心，恶心在哪呢？它每一个这个按钮，每一个这个菜单，它的大小是不一样的，大小是不一样的，它原版网站的设计方式，它是怎么办呢。

它是分别为每一个菜单独立设计的个大小，我们可以看一下，你看一下啊，我选中这N毛，它这里边是不是给它加了一个类，加了一个ID叫H啊，然后它会通过H指定一个宽度，这儿也是通过一个H指定一个宽度，看到了吗？其中的一个B指定宽度，也就是说它的这个宽度都是单独去指定的，那这里边我有一个两个，三个，四个，五个，六个七个，那也就意味着我需要给每一个都指定一个固定的大小，那这个时候我们做起来就会比较的什么呀，比较麻烦啊叭较麻烦，所以这儿呢，我不采取这种手段，我采取一个什么呢？我直接给这个A加PA定，我给这个A左右加上一个相等的PA定，那这个时候文字是不是还在A里边居中啊，并且它这个距离就会拉开了，但是这个PA定具体设置多大我还不确定，所以这里边我们需要去设置一下，我们直接来给它加一个pading PA定上下不要0PS左右呢，我先试一个十像素，哎，十像。

度很明显有点小对吧，有点小，那这个值呢，我们就需要给他调整一下，哎，比如说我们在这调怎么调啊，打开你的开发者工具。检查，然后选中这个元素，我们来看一下它的padding padding呢，现在我们这设置的是一个直接点sta啊sta pading现在是十像素，很明显应该大一点，对吧，我直接选中这个样式，然后按你的方向键上下可以去调整这个值，我给它调大一点，我看一下什么时候能达到一个完美的状态，我就停止啊。接着跳，诶，嗯，基本上我看这样应该是差不多的，应该是一个39 46 46出来了，39应该正合适，所以在这儿呢，那我就把这个PA定设置为一个39，那基本上我们这样的话，我们的整个这个导航条就基本上是给它平均分配了啊，就基本上是一个平均分配的状态啊，就等于分开了，但之间的间距也基本上都是一样，因为右边39，左边39那加一块是不是就是就是就是78了，诶间距也是一样的，然后两边的距离呢，也基本上不会差太多，所以这样的话，我们通过一种这么一种试的方式，把这个距离就给调开了啊，这种方式比较简单，也比较灵活，自己试一下，但是它原版这个设计比较麻烦，如果你要看的话，它里边实际上还用了一个这个这个雪碧图比较麻烦，所以我们采用一种比较。

简单的设计方式，当然你还有更简单的，你可以自己改，那在这儿我就采用那种方式了，好，那接下来再看我们还要做就是一个我们鼠标移入以后，它是不是要改了一个背景颜色呀，哎，背景颜色，那好，那同样我们在这儿我是不是要吸一下这个背景颜色呀，哎，背景颜色呃，背景颜色我们来取一下，取一下这是一个3F3F 3f3F我们复制一下，呃，那这里边我们就需要给它设置一个后，设置我们这个鼠标移入的一个效果，我们直接来一个点navy下的A，然后冒号一个后后的话，我们是改一个背景颜色，BA background color，我们直接给它粘过来这么一个背景颜色，然后看效果，我这一入，哎，是不是就变颜色了，哎，就变颜色了，效果基本上是一致的，然后就是字体颜色，字体也得变，这是不是白色呀？

看一下。还不是白色，有点灰，不唧唧的是吧，我们吸一下。复制一下一字体颜色也得改，我们直接来一个color，然后把这个颜色给粘过来保存一下，直接刷新看效果，诶那这样是不是就出来了，哎，这样就出来了啊，那这个效果基本上跟我们官网这个效果是是一致的，但是其实比官网这个做法要简单多啊，简单多但是你也有可能会有，哎呀，但是它这块会有个小的问题，小的问题是什么呢？就是这儿你设置完了以后啊，它这会多出了一个这个一个边儿，为什么多出一个边儿呢？就是因为你这个距离设置完了以后，这一块没有给它，没有给它占满啊，会导致这块多出来一个边距，边距我们想一下这个边距我们要怎么处理合适呢？你现在这如果拍定给它加40的话，会导致一个什么情况呢？会导致我们的这个元素整个就整个就拐下来了啊，整个拐下来，因为这样就太大了啊，这人太大了，那这个时候如果改成这个39呢，39的话，如这样就太。

小了，所以为了说我把这个编剧给他去掉啊，我看这多大个啊。这个编剧还。这是一。二。所。啊，应该是一共是五个像素，嗯，等于多出来五个像素，五个像素看这1234567，嗯，这儿一共是七个元素，七个元素，我这多出来五个像素。

嗯，五个像素我们想一下怎么给他，怎么给他分配一下，如果能把这个五个像素给它匀开就行了，所以这个东西它并不是我们去其实不算是我们去设计的一个问题，它本身就是我们这个它的这个网页的原版，就存在一些这种设计问题，所以导致我们这在维护起来其实也会存在一些问题，我尝试着把字体加大一点，我们试试。这个我们就只能试一下啊，如果追求这么一个啊，字体太大，也会去给它挤下来，那么把字体调小一点，调成17像素，调成17像素，这个距离大了，然后把它调成这个40，我们再试试。42了。嗯，那也就是说，其实现在的话，我们还是给它改回来啊，改回来应该是一个18 18呢，这应该是一个18。

然后这是一个这个39啊39我看原版原版的话，其实它是没有这个问题的，因为原版它采取了一个比较麻烦的方式，它把宽度都给你写死了，因为它原版实际上这整个呢，我们我们可以看一下，它整个实际上是一个图片。它是用了一个比较，你看它整个是通过一个图片设计的，所以它的宽度高度是固定的，但是在我们这儿的话，实际上它多出了一个这个多出一个边儿，呃，多出来刚才我们量了是五个像素，那解决这个问题，如果就我们这个练习的话，如果说你的宽度不需要说非得是1210，那你可以把宽度直接改成1205 1205的话，这样的话，你看这个边是不是就没有了，哎，这个边就没有了，那这里边如果你说老师不行，你这改的方式不好，你改的方式我还是希望整个宽度就是一个1210，但是你写完1210以后，这边上它就多出来五个像素，对吧，就多出五个像素，那怎么办呢？你可以改一下这，哎这五个像素啊，你可以给它分一下啊，分一下怎么分一下呢？哎，我直接呀，给这个最后这个元素。

CTRLC最后一个我们直接冒号，我们来一个叫做last child，你其他的不都是零三十九吗？哎，其他的都是零三十九，我最后多了五对吧，最后多了五，我给他这啊分一下，我们来上上右右边呢，我让他来一个，哎，我右边让他来一个这个四十四十二，因为多了五个像素嘛，42个像素，然后呢，诶下边不要，左边呢，我让他来一个四十四十一个像素，四个像素，那本来是39 39，左边我给他分了三个，右边给他分了两个，哎，那这时候我们看一下分多了呀。这儿也调成一个41亩看看。39。上右下左没错，39，哎，是这么一个效果，那现在这是不是还有一个有一个边啊，刚才我量的是五个像素，五个像素我这调成一个40看看。

Last child。哦，我知道了，这么写啊，不对，这么写为什么不对呢？因为我这写的是一个A冒号child，你A冒号last child，我们来看一下这些A是不是都是我Li里边的A啊，哎，这些A都是你的这个Li a，那这样你写的话就会有一个问题了，这些都是最后一个资源。懂这意思吗？都是最后一个，因为Li里面是不是只有一个子元素，所以他们都是最后一个，所以我如果这么选的话，等于选中什么呀，所有A，所以写完了跟这效果是一样的，所以啊，这边我们改一下，不这么写了，我应该找的是谁呢？我应该是找的NAV下的最后一个Li，然后最后一个Li里边的那个，诶这样是不是就对了，哎，这样就对了，选中的是它，然后呢，我改一下啊，我这改成一个40，改成40肯定还会有一个边，还有一个边，因为还不够大嘛，那我这儿也改成40，改成40又减少了两个，然后这儿呢，我改成42，这改成41，这样应该就正合适了，诶你看这样这个边距是不是就正合适了，但是实际上的效果是最后这个比其他那个要要大一些啊，要大一些，所以这个时候会稍微的会看到后边稍微有一些区别，但是基本上我们的眼睛是识别不出来的，对吧，我不说可能你就不知道了啊，那这样我们就完成这么一个东西，当然这里边是它的这个设计本身会存在一些缺陷，所以导致我们这写的时候就会比较。

啊，比较麻烦，当然还可以通过其他的一些手段，当然我们这儿就简单的演示一下，但是关键点还是要干嘛呢？诶要把我们整个这个布局，这个结构给它做出来啊，当然这个距离你说老师我不想放到最后，我放中间也行，哎放第二个也行，放第一个也行，这都可以啊，这都可以，或者说你不是两个吗？我前边我给你分配两个，后边也给你分配两个，那可能这距离就看不出来了，对吧，我可以去分配一下啊，总之就是无论你采取什么手段吧，我们都是为了实现一个最终效果，但是还是说一句话，他原版这个网站这个做的比较麻烦啊，比较麻烦，这个现在我们不去管它，我们就直接用我们现在的这种这种方式啊，这种方式啊，就是不论你用什么手段，只要能把效果实现，现在对我们来说是最主要的，但是现在来说还是最主要，最主要一件事你还是能通过浮动让我们的元素给他。

横着排列横过来啊，横向的布局能完成现在这个浮动就没有问题了啊，没有问题了，好，那关于我们的这个导航的练习，我们就先说这么多，停一下。