60.尚硅谷_HTML&CSS基础_简单布局.avi原创

接着来说啊，那咱们现在呢，学完了这个核模型，哎，包括学完了这个浮动，那其实网页一些基本的布局呢，我们都可以去去做了，那这里边我们来说我们的布局实际上是分两种，一种什么呀，我们叫固定布局，什么叫固定布局啊，我这网页多大个，我干嘛呀就固定了干嘛呢，就不会去发生变化了，不会随着你这个浏览器的，或者随着你这个诶上网的这个设备不同，随着去改变，一种叫固定布局，还有一种叫什么呀，叫自适应布局，什么叫自适应布局啊，它会根据你这个手机呃，跟你这个什么呀，浏览器屏幕的不同，网页会自动去调整什么呀，调整大小啊，调整大小，那这一阶段呢，由于我们学的都是一些比较基础的东西，所以这种自适应布局，这种响应式布局，我们先不去考虑，我们只考虑一些什么呀，一些固定的布局啊，固定布局再整会了以后，我们再去说这些固这些什么呀，适应的布局，其实呢，也不难啊，其实也不难，那这里边我们来说网页布局实际上就是在。

那个页面去摆放一个一个这种盒子是吧？哎，把各种各样的盒子摆放到不同的位置，那学完这个盒模型，那其实我们再看一些这种网页的时候，其实呢，你应该能看，基本上把这个网页的结构大概能看出来了，比如说举个例子，我这边有这么几个网页，直接截这么一个图，那像这么一个网页，我们想想这种布局我们能不能做出来，觉得难吗？所以这里边你一定要注意是吧，这个网页的玩意你得你得透过它这个现象去看。看本质你得能一下一看这网页，能看到它这什么呀，看到它这good for里去啊good for里那像我们这网页，它这个布局是怎么做的呀，我们来看看吧，诶我们来扣首先看上边上边一大栏，这是一个什么呀？诶是不是个div啊，咱不管它里边内容，我们只管它是怎么写的是吧？诶整个是一个div，然后再看这，这是不是整个a div啊哎，中间这这广告其实可能就一图片是吧？哎，咱们给他算上，给他也算一个这个div，诶那这画完了，你发现这页面里没啥东西了是吧？诶然后再要看这个，这是导航条是吧？诶那是不是也是一个div，不管是不div，肯定是个矿元素对吧，也是个矿元素，然后在这我们来看这这呢是不是又是一个，你会发现我这网页从上到下12345是五个块啊，哎，五个块，或者干脆就说是五个div就完事了啊，五个div完事了，诶那一个这玩意你能不能写啊。

这没啥技术含量吧，五个DIV16写下来，分别指定一宽度这几个量，它居中是不是就OK了呀？哎，在居中OK了，那然后再看，那这个里边我要再写怎么办呀？比如说这里边我要再写，我一看这边怎么写呀，可能这边两个链，这边可能是一个超链接，这这是一个div，这边是一个div，一个向左浮动，一个向右浮动是不就过来了？哎，然后看这这是什么呀，这是一块，这是一块啊，是不是也是一个向左，一个向右就过来了，哎，然后再看这大块，大块更简单了，这是一大div，这一大div一个向左，一个向右是不是就过来了，然后这个大这边在干嘛呀，再分两块。

是不是一个向左一个向右过去了，哎，然后这个小店为了干嘛呀，上下是不是各一个呀，下边你要愿意分，你再分什么呀，再分三个是不是行了呀，你发现你这么画完了以后，我这网页实际上就是什么呀，是不是大盒套小盒，小盒套小小盒，小小盒套小小盒啊，是不是就是一个盒去去套一个盒呀，如果这个盒你希望竖着摆，你就干嘛呀，你就直接写，如果你希望横着摆让它干嘛呀，浮动是不是就OK了呀？哎，浮动OK了，你看完这个，你看所有网页都这样，哎来咱们再看，你看这些，我可能我截这些网页吧，比较没创意，我们来看啊，挺远哎，上边一大条，哎，这一条这一条，哎，然后。

这这整个是一条啊哎，然后左边一条，中间一条，这是一条啊哎，中间三栏都向左浮动是不是就行了呀？诶它向左浮动，然后这两栏是不是一个都向左，或者一个向左，一个向右，或者你分三栏是不是是不是也行啊，你发现都是什么呀，是不是都是这个大盒子里去套套小盒子呀，哎大盒里去套小盒子，包括你去你去看淘宝，你发现这些网页吧，感觉是一个人写的一样结构啊，都一样，上边一个条，中间一个搜索框，然后一个菜单看见了吗？你是不是跟京东那个页面基本上是一样的呀，诶基本上一样的，所以都是什么呀，都是一个大盒去套小盒，所以有了这个盒子模型以后，我们再去布局就是什么呀，是不是就去页面里摆div位啊，横着摆你就不动，竖着摆你就什么也不用管，是不是就出来了呀，哎就出来了，哎包括你要看我们这个什么呀，这这是什么网站，这是腾讯是不是也一样啊，哎这块分成三栏左中。

哟，是不是三栏啊，哎，都是浮动就完事了，包括还有什么呢，还有比较这个东西就更更更更好玩了，知乎这不用看了，盒都给你画出来了是吧？哎，三个盒都给画出来了是吧？哎，只不过什么呀，有大盒有小盒，可能还有什么呀，还有大盒是吧？可能小盒里还有什么呀，还有小盒，哎一个一个摆就完事了啊一个一个摆就完事了，所以那我们来看看我们怎么来做一个简单的布局啊，怎么来做一个，那我们要做这个布局呢，我们这里边就得来写一个，那我们先画一个什么呀，我先画一个这个，诶设计图啊，画一个设计图来，那咱们这设计图什么样呢？咱们这设计图呢，比较比较简约啊，比较简约，我希望我的网页干嘛呢，分成三栏。

中。下哎，上边是我们这个头部，我们可以叫起个名叫什么呀，叫hier，然后中间是我们这个内容区，我们可以个名叫什么呀，叫content啊，我们主要内容啊，Content，然后下边这是什么呀？底部我可以起个名叫什么呀，叫foot啊底部那这东西能不能写呀，这没有比这个再简单的了吧，三个div写完了以后，其实你再稍微写点样式是不是就出来了呀？来来来，尝试写一下来我们来一个13，我们写一个什么呢？写一个这么一个简单的一个布局啊，我们上中下诶三行，第一行我们来一个div，我先是不是先创建三个div啊，第一个div我们先来整一个什么呢？整一个我们这个头部的这个div，头部div直接div点一个e DR hi点是表示头部啊，哎，然后再往下这来一什么呢？叫做内容，主要内容，哎主体哎内容的这个div直接。

点一个div，点一个con content，然后这再写一个来一个什么呢？诶，底部信息这么一个div，哎，底部信息的这个直接来一个div，然后来一什么呀，点一个fo，是不是来一个foot特啊哎，这三个div，那三个div有了，那接下来我们是要给三个div去指定一个样式啊哎，指定个样式我们来怎么写，我们先来整集一个style，我们先来设置我们这个头部，哎头部这个点位直接来一个什么呀，点一个header header呢，我们来给它指定一个什么呀，指定一个宽度，设置一个宽度，宽度设置多少合适呢？随便写一个吧，来一个这个外来一什么呢？来一个这个1000个像素啊，1000个像素，然后呢，Hi，我来一个，哎200吧，200个像素，那这个是不是就是一个1000乘以200这么一个盒子呀，哎，这是设置一个这个高度，高度有了，然后我们还要等于什么呀来。

我们这这么设置完了，我是不是看不见他呀，所以为了看见他我来一个什么呢？哎，设置一个背景颜色，直接写叫一个background color，我们来一个这个red吧，保存CRL1运行，哎呦呵，这个有点有点戳眼睛了，Yellow green1刷新走你是不是出来了呀，但是这东西有点还是有点有点宽是吧，诶不是有点有点高啊，有点高咱们看干嘛呀，矮一点矮一点，我调整一下来一什么的，来一个这个一百五吧，一百五一刷新，诶这样稍微好一点，对吧，但是问题又来了，这哥们他是不是不居中啊？哎，我们网页最好，你这是中间，是不是得往往中间靠啊，所以我来让他居中，居中怎么办？哎，是不是居中margin啊哎，设置我们这个div居中，直接来一个这个marin marin来一什么呀，零然后。

来一个这个凹凸保存，然后一刷新走，你是就过来了，诶好，这是我们的中上边的div就完成了，然后那你说我这个中间的跟下边的是不是就一样了，诶来我们来写一下这来我们来设置一个什么呢？设置一个这个content，诶来点一个content的，那我们说它的宽度干嘛呀，是不是跟它一样啊，诶其实这些样式我们最好能给它干嘛呀，提取出来啊，提取出来我们今天省点，这我们先这么写了啊，拖拉懒，然后来给它设置一个高度，那既然是主要内容了，我这高度是不是就得高一点啊，高一点我们来一个这个400吧，哎400，然后呢，也给它设置这么一个背景啊颜色，背景颜色我们来一个什么色呢？来一个这个来一个这个这个orange orange啊，然后还是同样这东西是不是也得居中啊，诶居中我们来一个这个什么呀，Margin来一个什么呀，零，然后来一呀凹凸保存，咱们再看一刷新走，你中间这俩是不是也。

出来了，哎非常漂亮是吧，哎非常漂亮臭不要脸是吧？哎来接着往下再写，你这鼠标还不灵了，接着往下是不是还有一个底部啊，底部啊就直接复制了，咱们应该是抽一下，咱们这样不这么写，我就直接写了拖腰杆了，直接来了设置一个这个负的，同样负的这个宽度我们是不是应该也是1000呀，诶这个宽度应该都是什么呀，一样的，不然你一个宽一个窄，是不是非常难看呀，诶宽度是一样的啊，都是1000高度呢，我也来一个跟上边一样，上边是150，这也来一个150，颜色呢，改一个这个silver保存他们来一刷新走你诶是不是就出来了，诶三栏的一个布局，当然我这块呢，最好咱们再让它再再小一点吧，最好，然后咱们让一瓶就显示全了，咱们就不用倒了啊，但是这个东西你要真做的话，根据你的这个需求来调成一百二易刷新，诶正好在一页里就显示出来了啊显示出来了好，那这三栏我们是不是就做完了呀？诶你看非常简单啊，非常简单就是三个div来分别给它设。

的一些样式，当然设置完了以后发现其实不太好看，这他们这挨的是不是太紧了呀，那么希望就跟我画这个呃设计图一样，你中间是不是有一点留白呀？哎，中间有点距离，那这距离怎么办？哎，手外边距啊哎我可以干嘛呀，给上边的设置一个下位边距，再给下边的设置一个什么呀，上位弯距或者可以干嘛呀，直接给中间是不是设置两个弯距呀？哎设置一个上下它们之间这个距离是不是拉开了呀？哎，那我们来到中间，中间是我们是不是一个margin，上下是不是都是零啊，那干脆又改一个，改成一个什么呢？十个像素，诶中间这个诶这是hier去了，中间我们content这来什么呀？诶十个一个像素来，这回一刷新走，你这回是不就拉开距离了，哎，正好三块上中下三块我们就给它分开了啊，分开了好，那这一块出来以后，发现这哥们这怎么有一块白呀，呃，是不是又是我们这个默认样式啊，哎，所以注意啊，你一般做这些操作的时候，其实我第一件事。

来干嘛呀？哎，清除我们这个默认钥匙，哎，来一个什么呀星号，我们来一个Mar丁零，然后来一个拍定零，那你注意了，我这零这块啊，零你写我们应该是按理说应该写一什么呀，0PX，但是零写不写单位都是什么了，无所谓了，零在哪，是不是都是零了，所以写不下无所谓，他会自己找啊来我这一刷新走，你这时候就过去了，诶好，三栏出来了，那这东西so easy对是吧，咱们来扩展一下，这是三栏有了，那我希望什么呢？哎，我这中间太单薄了，我希望中间干嘛呀，再来三栏，这是一栏。赵一兰。是不是这一栏啊，哎，再分三栏，那我这是不是就左中右啊，那我说那我这怎么办呀，我是不是就中间那个大的div里，我再创建三个小div啊，哎，但是这三个小div我们说了，我写完了，我先写吧，中间的大div我们是这个C吧，哎，我们这创建三个小div div我就直接写了啊点一个left左侧的啊，我class叫left，但是注意啊，这个名起的不太好，我们说什么呀，我们起名的时候尽量不用用这什么呀，用这个方位，为什么不用方位呀，因为有可能我以后我想把这个left给它，是不是放右边去呀？诶它这位置不定，所以这个东西left最好别用，那用什么呀，用你这个标签里边的具体内容，比如说你这个div里是放新闻的，你最好就写什么呀，诶写个news你是放什么，诶什么体育的你就写个什么呀，Support的等等，就是根据你的具体内容来定这个类名啊，我们现在就现在稍微的写的什么呀，诶写的这个拖懒啊拖懒，然后left。

还什么呀，Center，然后这来什么呢？来一个我们这个哎，Right，哎，Right rightp这么三个部分，这是我们这个第一个live的，是我们这个左侧的div，这个center呢，是我们这个，哎中间的这个div，中间的这个div，然后这个right呢，是我们这个，诶右侧div，右侧div好，那现在我们说了这三个div我们有了，那接下来我们是不是要给这三个div分别去设置样式啊，诶那样式回到我们样式表里，那注意了，他们的样式我写到什么呢？写到这个content下边，为什么？因为他们是不是有一个父子关系啊，这样我找的时候能好找一点啊，好找一点好写在这，我们在这设置，设置什么呢？设置我们这个con的中小div的一个样式，那我们来看直接写了点一个这个live的，或者你怎么写呀。

你点content空格点left也行啊，也行，我就直接写点left，因为咱们现在没有什么冲突啊，直接写一个点left，那点left我们这里边先给他整一个是不是左侧这个呀，左侧这个我们说了，它应该我们应该是中间这个最大是吧，然后左右是不是都窄一些呀？诶左侧这个我们来看我这一共是多少，一共宽是1000，左侧我来一个什么呀，来一个200吧，哎，左右各200，中间来一个什么呀，600是不是正合适啊哎，来个600正合适啊，左边宽度是一个200，高度呢，高度是不是400行了呀？哎，负元素全部我可以写一什么呀，100%是不是也行啊，哎，100%行占它副元素一个全部，这什么是左侧，然后最后呢，给它来一个background color背景颜色来一个来一个blue吧，Sky sky blue保存是不是这么一个颜色呀，哎，咱们来看效果，这里边我这一刷新走你诶是不是出来了，诶非常的完。

美是吧，非常完美，然后咱们再接着往下写，下边一个是我们这个center，我就直接复制了啊，直接复制了点一个center center是我们这个中间这个，中间这个我们想想宽度是微宽一点啊，来一个600高度也是什么呀，诶100%，还有一个是我们这个右侧这个啊CTR shift2整个复制啊整个复制，然后center这是一个这个什么呀，Right right这个呢，我们来个什么呢？来一个200个像素，也就是说左边200，中间600，右边200 200，两百六百加一块是不是正好1000呀，也就说我子元素的宽度是不是正好是等于什么呀，负元素宽度吧，哎，就说我这三个子元素是加我们这个副元素，是不是给它占满了呀？哎，占满了啊，然后我们这换一个颜色，中间这个来一个什么呀？来一个yellow，右边这个来一个什么颜色呀，Pink是吗？Pink粉的是吧，保存我们来一刷新你。

哎呦，我这孙跑这来吧，诶拼错了，嗯，少了个T跟少了个T没关系，我这写的也错了是吧？所以你错也要错的统一是吧，所以不是这个毛病啊，不是这个毛病，一刷新还是这样，你发现什么了？这电为什么竖着过来了，为啥呀，是不是没浮动啊？哎，默认在我们这个文档流里，它是不是就是垂直排列的呀？诶所以跟这个center没关系是吧？诶但是你们说的也对啊，我是不是写错了啊，那所以我现在希望的是我们这个div在这个负元素里横过来吧，而现在我div是不是在文档里里默认垂直排列呀，那我让它横过来怎么办呀？浮动啊，哎浮动，那我来，我让life的浮动设置我们这个向左浮动，直接来一个left，我们来一个什么呀？哎，不是left float是不是一个left呀。

哎，那光让他一人扶行不行，哎一刷诶的确上来了，但是这是不是还没上来呢？哎，所以我们要一扶干嘛呀，这哥仨是不是都都扶啊，这三个标签都让它浮动保存，我这一刷新走你是不是过来了，哎这么中间三栏的布局就算给他完成了，但是还是这个问题，感觉这哥仨吧贴的调什么呀，有点紧，我是不是还是让你们产生点距离啊哎这样我感觉会好一点，那我干嘛呀，还是这个问题，我可以给左边的设置一个右边距，也可以给同时呢，给右边的设置一个什么呀，左右边距，那最简单的干嘛呀，诶中间是不是左右各设置一个呀，哎，所以这里边我们在中间这给它center，给它设置一什么呀，设置一个左右外边距，哎，水平外边距直接来一个marin垂直方向没有是不是零啊，诶左右来个什么呢？各十个像素，是不是就距离就拉开了，但是这么写它好不好呢？我们来看看啊，来看看我这一刷新走你哎哟。

这是不是挤下去了呀？那不对呀，我这是600，这是200，这是200加一块是正好1000呀，负元素的宽度是不是也是1000呀，那不正合适吗？怎么挤下去了？哎，你注意了，我是不是修改了Mar丁啊，我们说了Mar丁虽然不会影响元素可见块的大小，但是它会影响什么呀？我元素占地大小吧，哎，我左右加了一个20个像素，实际上我们现在元素我这个三占多大地了，是不是占六百二了？呃，左右各十就100，就六百二了，那六百二再加上那400是不就1020了？那我们说了1020干嘛了，是不是比1000大了呀，所以发现什么了，所以后边这块地方容不下谁了，我们这个right，所以就导致把我们这个right给它干嘛了，是不是挤下去了？所以注意啊，Marin虽然不会影响可见夸的大小，但是它会影响整个元素的一个什么呀。

占那位置吧，哎，占的位置啊，那现在怎么办呀？哎，我是不是把这给它减去啊，减去多少合适啊？哎，我是不是左右各加了十，实际上是不是增加了20啊，所以干嘛呀，我在这宽度是不是给他减去20就行了呀？哎，你在哪减呀，你在right在left减也行，在他那剪也行，那我们就在他那剪了，省事了，直接来什么呀，来一个五百八一保存，再一刷新走，你是不是正合适啊，诶正合适啊，非常完美是吧？诶这么一个效果啊，所以你们写的时候一定要注意啊，我们这个宽度一定要给它计算好了，因为你稍微差一点，它是不是就凸下来了，诶这也是我们这个固定布局稍微麻烦一点的位为稍微麻烦一点的东西，就什么麻烦呀，就是你得计算什么呀，这个值，而要是响应性布局干嘛呀，我设的值都是什么呀，百分比的相对来说就是能省一点事儿啊，能省一点事儿好，那现在这中间这三栏有了，那我想我再复杂一点干嘛呢？我想在这个中间再分两栏。

上边一栏下边一栏行不行，是不是两个D位啊，哎，两个D，那我想在下边这呢，再分三栏。

其实再分两栏吧，行不行啊，哎，是不是一样的呀，哎，你发现其实呢，你把这个写出来以后，怎么写你都能写了，无非就是大盒子里是不是套小盒子呀，诶有的盒子我浮动，有有的盒子我不浮动，这个布局是不是就就出来了呀，哎，就出来了啊，这个是我们最基本最简单的一种这个布局方式了，但是呢，把这东西掌握了，其实以后再复杂布局你也都能写了，所以把这个东西好好的去写一下，你也可以干嘛呢，自己去画一下，诶你想怎么布，你可搁一，你想你可以自己整一什么呀，各种复杂的布局，但是再复杂它也就什么呀，也就是盒子套盒子啊，再复杂就是盒子套盒子，好，这是我们说的这一块，我们来停一下简单的一个布局。