尚硅谷前端基础 (63)

好，经过了我们刚才的练习呢，我们成功的呃，实现出了一个我们这个w3school.cn这个网站上点com.cn这个网站上的一个这个导航条，那其实所有的导航条基本上都是这么一个套路啊，基本上都是这么一个套路，那像我们这个，呃，我这个结构用的是稍微复杂一些，我用的是一个ul，里面放LY，然后放A标签，那你做的时候呢，你也可以换另一种思路，我可以整个我用一个navy，或者用个div，然后里边我直接放这个A标签，这种方式也不是不行啊，它也是可以的，所以你可以自己就再去尝试一下写这种东西，套路都是固定的，先来分析出它的一个结构啊，我该用哪些标签，然后通过CSS来设置它的一个样式啊，你如果需要横过来，你让它浮动，不需要横过来直接写就完事了，但是还是一点需要注意的是，就是我们在布局的时候，外边这个元素啊，就是我们外。

块这个元素尽量都是块元素，也就是说只要这东西你涉及到了布局了，你要去改变它的位置，你要去修改它的位置，那这时候尽量都使用块元素啊，布局的元素一定都是块元素，那做完了这个呀，其实我们呃很多的东西都可以做了，比如说我们可以看一下我们这个京东，哎，京东这个这是不是也有一个导航点啊，哎，那这个导航点我们也可以做了，包括上边这部分这个导航点我们其实也可以做了，但是这个结构稍微有点麻烦一点，我们会专门拿出一个一节课来说这个东西，但你可以自己先尝试一下，遇到什么问题，咱们后边会会讲这个东西啊，所以像这两个导航条我们都可以做了，是吧，那自己可以尝试去做一下，也就是说其实呃，很多东西都可以做了啊，很多东西都可以做了，那这里边其实我们讲完浮动的话，浮动的话有一个很大的作用，就是对我们的网页进行一个布局啊，对网页进行一个布局，所以那我们就要谈到这个问题。

那我们的网页要怎么布局啊，怎么布局在我们的float里，我们来新建一个文件，我们叫一个零三啊，网页的一个布局。网页的一个布局，那所谓的网页布局呢，简单说来就是它可以把我们通过这种网页布局，可以把我们一个网页分成什么呢？分成一块一块的啊，分成一块一块就是一个网页布局，那我们要怎么去分这个网页的块儿，那它就有讲究了，那这里边呢，我们来画一个简单的示意图，哎，我们来做一下这个东西。那比如说呢，我这儿就要画一个网页的一个设计图，那首先我这个网页呢，诶，它可能是分成了上中下三个部分啊，也就是说我上边有一栏，诶然后呢，中间呢有一栏，诶然后呢下边有一栏，那现在呢，我就想通过我的这个，哎，通过我的这个网页来把这个布局给它实现，那这要怎么实现呢？哎，这东西其实做起来就非常简单了，怎么简单呢？哎上中下，上边实际上是一个块，哎中间一个块，下边又一个块，而且这三个块就是垂直排列，那既然是垂直排列，那我们就简单了，那我们直接给它做一个块元素，什么都不用做，是不是就可以垂直排列啊？哎，所以要做这个结构呢，我们来写一下啊，那我们现在就通过代码啊，把这个结构给它实现出来啊，我们这做那首先呢，这结构很简单，就是三个三个块啊，三个块我们用一下我们之前说那些语句话标签。

我们先来什么呢？我们先来创建一个这个头部，头部标签我们叫做一个哎叫做一个这个哎，叫做一个这个hier是吧？哎，Hier表示的是我们这个头部啊，一定注意是hi hi变成这玩意儿了对吧，叫做hier啊，我们来给它运行一下。哎，叫做hier，这个标签表示的是我们网页的一个头部啊，网页一个头部，然后呢，再来一个这儿来一个这个创建我们网页的一个主体啊主体主体的话我们直接来一个叫做一个闷啊闷标签表示网页的主体，一定注意一个网页中只能有一个面标签，然后呢，这我们来一个foot，这个foot是我们这个网页的一个什么呢？哎，网页的一个底部啊，大概是这么三个部分，这三个部分然后我们来给他们分别设置一下样式啊，设置样式我们来把它看出来，首先呢，呃，我们直接一个个设置吧，我们先设置我们这个头部，头部呢，也就是我们这个hier啊，我就不写累了，直接用元素阳器了，Hier he hier呢，我们给它一个宽度，比如说我就直接给他来一个1000个像素高度呢，我给他来一个200，然后background color，我们再设置一个background color，我们来一个来一个silver啊，来一个这个银色的。

啊，这一保存，诶，这是不是就出现这么一个块啊，哎，这么一个块，诶这块我们稍微的有点，这网有点小对吧，有点小，那这个块就出来了，这个就表示的是我们一个头部，但是现在头部它是有点靠靠我们的这个靠边上了，对吧？所以我们觉得好看一点，我们给他来一个居中啊margin我们来一个这个零，然后来一个凹凸啊，我们给它设置一个居中，然后我们这个块它就可以直接在我们这什么呢？呃，在我们的这个整个网页当中居中了啊，左右的距离是一样的啊MARIN0还有凹凸，这个是我们的header，下边呢我们复制一下啊，复制一下，复制一下，下边呢是我们的一个主体，哎，我们的一个主体的内容主体呢，我们叫做一个闷主体，也就是我们一个闷，所以这就不写hide了，我们直接来一个闷啊闷，它的宽度呢，是一样的，因为是一个元素嘛，对吧，高度呢，因为主体内容嘛，我可以让它高一点啊，让它稍微高一点，然后呢。

颜色我们也换一个，换一个井号一个BFV，同样也让他去居中，那这一块就是我们的一个主体啊，主体有点稍微有点大了啊，改一下我改成一百五小一点好看一点，哎，一百五也有点一百二呢。

还啊，因为这儿我有一个覆盖了啊，我先把它注掉。哎，那我们就弄一个120，我再改一个一百五看看。一百五吧，哎，那我们就调整成一百五啊，这个我先改过，先搁这啊，待会要改好，那现在这个是我们头这个我们这个主体啊，主体在下边是我们的一个底部。底部啊，底部的话，我们那个标签叫做一个FO1啊，叫做一个foot特，Foot特呢，宽度也是1000，高度呢是一个一百一百五啊150，背景颜色呢，我们换一个背景颜色，我们换150像素啊没显单位背景颜色呢，我给它换一个这个tomato啊，换成一个我们这个红色的啊红色的然后这个是不是我们这个底部啊，哎底部那这样的话，我们这个哎头，然后主体还有我们这个底部就都给它设出来了，三个部分整完了以后的话，其实这三个里边其实我们还可以去做一些微调，因为这三个里边是不是有一些样式是重复的呀，哎重复的话，我们就可以把这些重复的样式给它提出来，怎么提，我们可以直接用一个这个什么呢？选择器分组hier，我们叫做一个闷，然后下边是一个我们这个foot，我们来看哪有重复的，哎，主要重复宽度是不是都是一样的呀，然后居中是不是也都是一样。

胖的，你单独提出以后，然后每个里边你就不用再用写宽度，再写居中了，相比较来说能让我们的代码更简洁一些，效果也是一样的，我怎么感觉这头好像有点大似的。头是一百五脚呢。也是一百五啊，可能是视觉上有一些错觉，总感觉好像它大一点似的，好，那我们就不不管它了啊，我们就直接写这样的话，其实我们就可以把我们的这个样式给统一了，等于把公共的样式给它提到这儿了啊，就是稍微的减少一下代码量，当然你不提的话，问题其实也不大啊，问题也不大。

好，那这样的话，我们就简单的实现了一个上中下哎三行的一个布局，当然有的时候我希望什么呢？现在我这三行是不是挨的太近了，哎，挨的太近了，那我希望什么呢？哎，他们之间呀，有一个距离，有个距离我可以很多种方式去设置，比如说我可以给上边两个元素设置一个下外边距啊，我都设置一个下边距，那这儿出现一个距离，这儿出现一个距离，这元素是不是自然而然就往下挤了，哎，这是一种方式，或者呢，我可以直接给中间这个元素分别设置一个上还有下根距，哪种方式都行，你主要的目的是什么？就是让他们这儿有一个距离，这儿有一个距离就完事了，所以呢，我采取一种方案，我直接找到我们的这个，哎，主找到我们这个men，我们给它设置一个margin margin干嘛呢，我上下来一个十像素，但是不要忘了你要把那个凹凸给它写上，因为你不写凹凸的话，这个值是不是会把之前。

只给覆盖掉，哎，覆盖掉居中效果就没了，所以这样的效果就是让中间那个闷上下有十个像素，然后左右还是水平居中的，那这样我们就达到了这样一个效果啊，这样一个效果啊，那这个就是我们的一个头部，这是我们主体，这是我们一个底部，呃，主体我可以让它再大一点，比如说来一个五百五百啊大概这么一个意思啊，那这样我们就设置完了，那其实的话，整个一个三行的布局，我们整完了，整完了以后像哎，我可以在头部里啊，放一些我网易的logo啊，放一些我的导航条啊，诶放一些这种快捷方式，对吧，在这里面我们可以放我们那个主要的一个内容啊一些东西，然后下边呢，可以放一些我们这种版权信息，那其实如果你拿京东来看，其实它也是这么一个结构啊，你看把广告给它关上啊，你看它是上边这一块，诶然后这一块，然后干嘛呢？这又一块是不是也是三块啊，那既然是三块，其实我们就可以直接创建三个div啊，然后给它摆上。

就OK了，那那这个是我们说的一个这个这么一个东西是吧，诶你会你会发现这个结构跟它差不多啊，跟它差不多，然后再来看，我们让它复杂一点的话，我们就想可能我要往里边去填东西，其实填东西都是大同小异，那比如说我现在就想往中间这块，诶我希望干嘛呢？诶我中间这块啊分成三部分，左边一块，诶其实你看啊，我我做这个跟京东这个结构基本上一样的，中间一块，然后干嘛呢？然后右边一块，我要做这样一个结构，那怎么办？诶很明显，那我要做这三个块，三个块很明显我是不是要在中间这个慢这个div里我要加三个块元素，哎三个矿元素，所以找到我们这个闷闷里边，我们就直接写了啊，直接写了第一个我们这来一个div，第二一个，哎，咱们这个玩意儿，我们这是一个，呃，属于一个这个偏栏，诶或者是它属于一个导航，对吧，我可能设计的是一个导航，那既然是导航的话，我们就直接来一什么呢？来一个我们。

那个navy这个标签啊navy，诶navy这个是我们这什么呢？这是我们这个左侧的一个导航啊左导航，然后navy完了以后呢，诶我们中间这块还要放一个，中间这块可能是我一个独立的一个区域，可能我放一个文章，或者放一个什么东西，对吧？那我这里边呢，我们就来一个这个article，诶article这个是我们这个中间的一个内容，诶中间的一个内容，然后右边那个话，我们就等于是一个这个侧边栏，我们就放一个aside啊，这是我们这个右边的一个边栏，诶右边的一个边栏，当然啊，我去展示一下，我们就等于是把之前讲的那些标签，我给它回顾一下，我们真正写的时候不一定非得用它，真正写的时候你全都用div，一点问题也没有啊，一点问题没有，好，这里边我们写完了，写完了以后我们来设置样式，你要注意我这几个标。

但是它全都是闷里边的，所以你写样式的时候，尽量这个样式也要写到这个闷的下边，这样我们找的时候好找，诶我们来一个个设置，先设置什么呢？先设置我们这个左侧的一个导航，也就是左边那个，我们直接来一个navy navy的样式的话，导航不能太宽对吧？导航不能太宽，所以Y的话，我们来看它一共是500啊，一共是500，那我让它占一百五啊，让它占150，然后呢，高度的话就跟副元素一边高就完事了，负元素多高它有多高，负元素是500啊，诶我让它的高度也是一个500，哎，不对，Y写错了，Y它总宽度是一个1000对吧，总宽度是一个1000，左边这稍微窄点，中间这宽点，右边这个呢再窄点，那我们就要给它平均分配一下，那比如说我可以让什么呢？让左边这个是是是是200，哎，右边这也是200，中间这个呢，是一个600，是不是就OK了啊，就OK了啊，所以这。

那时候它的宽度是一个两，哎高度啊呃，高度是100%，宽度是一个200的像素跟四元素一边宽，然后呢，我给它设置一个背景颜色background color，哎，我给它来一个yellow吧，来一个黄色，然后再看这是不是就出现我这个左侧条了，哎左侧条了，然后再往下我们来设置什么呢？诶设置我们这个中间的一个内容，中间的内容我们用的是一个R标签，R标签呢，我们让它宽一点外是一个600 has呢还是100%，诶he还是100%。软不软，然后呢，再给它设置一个background color background color，我们来一个orange吧，来orange再往下，下边呢，设置什么呢？哎，设置我们这个右侧的一个内容，右侧我们用的是一个呃，Aside啊，Aside asid asidde a啊A呢它是一个200像素，Head呢也是100%head啊，那是一个100%啊，然后呢，这来一个background color background color，我们来一个什么颜色呢？来一个来一个pink吧，来一个粉色啊，那现在我们就设置好这么三个，哎，三个块，诶，但是我们写完了，你会发现什么问题呢？这是我左边这块，这个是我中间这块，这个是我右边这块，你会发现我洗完了这个东西以后，这些东西都干嘛了，是不是都从我这个。

闷里边出去了，诶，难道我写错地儿了吗？写到闷外边了吗？诶，一定是没有，一定是写到那个闷里边了，但是为什么他们出去了，为什么？诶，首先我们来看这三个元素，无论是navy也好，还是article，还是aside，这些玩意儿都是我们布局的元素，而且他们都是什么呀，只一说布局的他们都是块元素，块元素什么特点它会独占一行，也就是说你这个是navy nay下边是不是放我们article article下边放那个aside，它都是垂直排列的啊，垂直排列的，并且你现在让它们的宽度是不是都是100%啊，那都是百分百，那这里边就带来一个问题，他们宽度都是跟副元素一边宽一边高的啊，宽度是和副元素一边高的，也就是说我的nay是不是已经把复元素给撑满了，那这个时候我们的article还有aside是不是只能去负元素的外边去排列了，哎，所以这叫什么？

这叫我们的内容溢出啊，内容溢出当然你可以通过overflow给它处理一下子啊，处理一下子，但是你要注意我们的这个元素，我们希望的是一个什么样的效果，希望的是不是navy article aet3个元素是不是水平排列啊，而现在你所写出来的效果，它们是垂直排列的，所以关键问题不在于它们是否溢出，而在于什么呢？而在于你应该让他们水平排列，所以我怎么让他们水平排列啊，非常简单，我让他们三个元素都向左浮动，都向左浮动，这样的话，他们是不是就在负元素里边水平排列了，哎，Navy，哎，这个是我们这个man，这个是我们这个aside，哎，不是man，这是article，是吧，就变成了水平排列。所以其实我们布局来说非常简单，简在哪呢？

啊，如果你的元素你希望是垂直排列的，OK，你就写几个块，它自然而然就垂直排列，如果你希望水平排列的，同样也写几个块，然后给他们设置一个浮动，向左浮动或者向右浮动，但是一定记住了，这几个要水平排列的，一定一定都得浮动，诶你说老师我就设置一个吧，不行，只要他们是要都水平排列，那就必须得都浮动，才能达到一个比较啊好的效果啊，才能达到一个比较好的效果，那这里边一定要注意啊，一定要注意这个问题，好，那这一块我们设置完了，设置完了以后呢，我又有一个想法了，我希望什么呢？诶，我希望啊，让我们的这几个元素之间呢，也有一个缝隙啊，也有一个缝隙啊，这也有一个缝，这有一个缝，那怎么办呢？哎，那这个时候我们就可以干嘛呀，是不是同样我可以给中间这个元素加上一个margin啊，哎，左。

又加一个margin，是不是自然就挤开了，哎，自然就解开了，所以找到我们这个article呢，在这儿我直接来一个MARGIN10像素，哎不是上下呢，上下不要左右十像素，这样我们来看这是不是就出现一条F，诶问题来了，出现F是出现F了，这玩意儿怎么给挤下去了，怎么给挤下去了，这是为什么，很简单啊，很简单。

但是好像我们来看看啊，先看这问题，我们先不管他是为什么，先看看。这玩意儿它被挤下去了，只能有一个原因，什么原因呢？就是这个位置装不下它了，所以它才被挤下来，如果能装下它是不是不会被挤出来呀？所以这个时候一定说明这个地方装不下它，诶那为什么装不下了，我们来看看啊，我们来看看navy的宽度是200 article的宽度是600，呃，Size的宽度是200 man的宽度是1000，那上边的啊，我不看了啊闷的宽度是1200加200加600是不是正好等于1000呀，也就是说我这三个元素的宽度加一起正好是等于负元素的宽度，也就是说应该是正和是严丝合缝的摆在这儿了，对吧？但是为什么这玩意儿就被挤下去了，被挤下去了一定说明不够地儿了，为什么不够地儿？诶，注意了，我现在是不是在R这加了一个Mar。

我们说了margin虽然不在我们可见框，但是它也包含在我们那个元素的，是不是占地范围内啊，哎，它实际占占地的一个大小，所以这个时候我给它加了一个十像素，就等于什么，现在它是，哎它是一个200，它是一个200，它是一个600，再加诶是一个600啊是一个600 600再加上左右，这是不是有十个像素的外边距各有十个像素变成20，所以他们的总宽度现在是一个1020，是不是多了20像素，多了20像素，那么这哥们就给挤下去了，那这个问题怎么解决？两种方式，哎，几几种方式吧，第一种，那你可以把这20给它减去，你可以让什么呢？让R变成500万。

是不是就行了，哎或者呢，你说article必须得是600，那你可以干嘛呢？哎，你可以让他们两个一个减去十，它变成190像素，这儿也变成190像素，这样是不是就OK了？哎，这样就OK了啊，所以你可以把这个宽度呢给它减去，确保呢这个等式满足，再或者呢，你可以直接找到article，我们是不是有一个属性叫做一个box s啊，我直接给它设置一个borderer box，那这样的效果是什么呢？来borderer box我们这啊，Border box600100。我们可以把它box塞进，设置一个box，那这样当我去设置这个诶这个东西的时候，它是不是就这个宽度和高度是设置我们整个盒子的大小啊，但是你注意，实际上我这么写是是没用的，为什么没用呢？你要注意borderer box是设置什么的，设置我们元素的宽度和高度，它的指定的一个范围的默认情况下，我们是一个content box，也就是说我们的Y和head指的是内容区的高度，而当我设置完我们这个borderer box以后，它就变成什么呢？变成指定我们整个盒子大小，但是我们说的这个整个盒子大小指的是什么？指的是我们这个内。

整个的可见块大小，它有没有包括外边距，不包括外边距，而我们现在整个合资范围变大了的话，是因为什么？是因为我们这个外边距多了，所以才变大了，所以用这个还不行，刚才我可能猛的一下想错了，所以正好也通过这点说明一个问题，Border box，我们这个box sing指定的是什么？指定的是我们可见块的大小的一个设置方式，而不包括那个margin啊，这1.1定要注意啊，我先把它去掉，所以呢，那就这来说的话，比较好的方式的话呢，可能还是你可以把中间那个比较简单的直接改成一个580像素，那这样就可以确保它们在一起了啊，确保它们在一起了，好，那当然这里边我们还可以干嘛呢？再提取一些我们这个公共的样式，让我们代码再简化一下，Nay下边的一个这个article article下边的一个我们呃，Side，我们来看看哪些东西可以提出来，首先他们是不是都浮动了，哎，都。

浮动了，把浮动提出来，然后宽度的话，不管高度是不是都是200啊，哎，把这高度也给它提出来，哎，高度啊，然后提完了以后呢，这里边代码我们稍微精简一下，这个这个这个这个就都可以不要了，最终效果是一样的啊，刚才做这个目的就是把我们这个代码给它精简一下，好，那这里边我们整个一个布局，其实写到这儿就差不多了，再往深入讲也没没什么可讲的了，那其实对于我们浮动的布局来说就是这样，如果你是竖着的话，你就直接写几个块，你需要竖着几个就写几个就完事了，如果你需要横着排，也是写几个块儿，然后让他们浮动，浮动完了以后要确定它们的大小，你要量一下，要精确，不然有可能会导致某个元素就被挤下去了，所以接下来比如说我们可以让它再复杂一点，哎，比如说中间这个我要再让它干嘛呢？我再让它分成上下两部分，那这个怎么办？哎，是不是在中间再写两个边。

对呀，哎，再写两个块就行了，中间这底边我再分三个部分，那就是在中间是不是再做一个这个三个块，然后让它去浮动了，所以其实往后我们没有必要写了，再写也都是这么一个规则，所以你就记住了，你需要垂直排列，写几个块，竖着排就行了，你需要横着排列，那你就写几个块，然后给他们设置浮动就完事儿了。哎，那这样的话，一些常见的布局我们在这儿就都可以去做了啊，都可以做了，好，那待会儿我们尝试去把这个东西去去做一下啊，啊然后的话，其实如果你觉得做这个东西，或者你觉得画这个图挺无聊的，挺烦的，你可以干嘛呢？你可以直接模拟一下我们的网站，哎，比如说还是拿京东举例子，那像这一块我们怎么去练习啊，怎么练习你可以干嘛呢？哎，你可以看一下京东是怎么分的，哎其实很简单，你看它的整个的话，我们来看整个是不是上边是一个大块。

哎，然后呢，这儿又是一个大块，然后呢，诶这儿又是一个大块，哎再往下是不是可能又是一个大块，那这时候你是不是就可以直接找四个div啊，找四个div你可以量一下多大个给它设置上，然后呢，诶你看左边一块中间。

一块，哎，然后这一块，哎右边干嘛呢，又一块，那在这你是不是就可以给它整成四个块啊，哎，大小一确定，然后是不是就写出来了，哎，所以如果你懒得画图，你可以直接尝试着自己来分析一下这个网页的结构，诶分析完了，然后来模拟的用你的方式去把这个结构给它实现出来，大小能实现尽量实现，大小实现不了呢，你只要能把这格格你给它体现出来，这一块一块的给它体现出来就行了，关键点还是在于我们这种垂直排列，水平排列，你能按照你的想法给它做出来，哎，就已经非常非常的不错了啊好，我们先说这么多，停一下。