00:00
好,我们继续来上课,那么上节课呢,我们讲完我们的这个浮动属性了啊,那么一样,在这里边大家一定要记住浮动属性,这里边我给大家写的这两个注意的,另外在我们去布局的时候,只要是你把负类的宽高设定好以后,你在这个里边可以把子类任意浮度永远不会超出负类,对不对,哎,大家只需要记住这个就可以了,那么好了,那咱们来看啊,我们去找我们的这个页面,我们把它进行一个大概的一个。轮廓的布局啊。来,你看在这里边啊,你比如说。这一个页面对吧,我们要想给他布局,我们就先干嘛,先进行划分,那么页面布局的划分很重要啊,这里面要在划分的时候,大家一定要注意,我们页面一定是什么先水平划分,再来什么垂直划分啊,你不要上来就垂直划分,为什么呢?因为对页面而言,我们说了,我们页面可以让它出现垂直的滚动条,但是绝对不允许让它出现水平的滚动条,明白吧。所以对页面而言,我们在做页面的时候先什么。
01:01
先给它进行水平的划分啊,划分完以后再干嘛给他做垂直的划分,这里面是不是分成123,是不是相当于三块啊,对不对,那OK,那咱们来看,那咱们也布局这么一个页面出来啊,比如说在最顶部,你看最顶部的这段内容啊。是不是这样的,然后这里边,比如说这里边你看我所有内容是不是都卡到这条边下来了,看到了吧,所有内容这里边是不是卡到这条边下来了,是不是这样的,哎,也就是说我在这里边一定是给的这个元素设定了什么,设定了它的这个宽度了,没错吧,那OK,那咱们也去开始进行设计一下啊,比如在这里边我们新建一个H文件叫什么呢?就叫做这个10INDEX。第二和德莫勒。好了,这是什么呀,叫做首页布局,首页布局啊,那布局的时候,这个时候我们就可以用什么,用另外一套。布局方案了啊,使用立刻标签,比如说当前目录有一个什么CSS,目录下边有一个style.css好,那么有了这个引入文件,那我接下来干嘛呀,我是不是得创建去新创建一个目录叫做CSS,然后在这里边呢?我们再创建一个叫做t Le style.cs这么一个文件啊,那么进来以后啊,咱们来看啊,在这里边。
02:15
我所有的要求要写到这里了,对吧,那咱们先要有一个头部吧,那div井号,比如说叫做top啊,头部里边都有什么东西,咱们看好了,头部里面有什么,头部里面比如说。比如说啊,我把整个这块内容都算到他的头部。都算是他的头部,那是不是包含了几块横向呢,这是一块登录注册了对不对,然后这块呢,又是一块对吧?Logo slogan和搜索,然后这块呢,又是一块。是什么呀,我们的导航对吧?这块呢,是什么呀?是未来我们的幻灯片,也就是我们所站位的地方啊,那OK,那整个这块我都给看出头部了啊,那也就是说这里边这是我们的最顶层对吧?那最外层有了,那里边呢,我再来一个div,叫做点top,这是我们的最顶层,最顶层写的什么?是不是注册登录,那也就是A标签,比如说注册。
03:04
再来个A标签,比如说来个登录,是这个意思啊,我就只写这一个啊。咱们来看。现在是不是这样效果了,但是对于注册登录是不是显示到右边呢?哎,而且我们要把这个元素设置好,设置什么,设置它的这个宽高对不对,所以在这里面咱们来看啊,我先来设置井号top。给他设置什么都没有用啊,我先给他设置一个吧,B井号F7F7F7啊好了,我们只为了让大家看到这个效果。看是不是有个F7F7的对吧,然后同样在这里边,我是不是还有一个点套。BC跟加,比如说这个为什么呢?为红色啊,为红色好了,咱们来看这个点top周NY,你看点top跟负类是不是一边宽呢,但它实际上没那么宽啊,我给它设定好,比如说我整个页面所有内容的宽度就是1200,那这个时候来。是不是缩小了对吧,缩小以后最后这个注册登录是不应该在右边显示,那就简单了,我是不是直接给他一个T杠,等于一个RA是不是就过来了。
04:09
诶,这块是不是搞定了,但是呢,这个红色区块,注意这个红色区块是不是应该在我网页的正中间,是不是该在这个位置显示,但现在呢,我们还不会,还没学过,我们先不管它,等我们学完以后我再回来改它啊好了,这块内容勉强我们先过关啊,那么再往下来。下面下面是什么,你看下面是一个。一个元素,诶,但是这个元注意这个元素是不是满平宽的,它俩是不一样的,你看它是白色背景,它是不是就是有颜色的。满屏关的,然后在这里边呢。是不是有这么大的一个div,是不是这个意思,哎,所以那怎么办?看好了,我在这里边也开始给他进行设置啊,那泡泡的完事了,我接下来再来一个div这个区域,比如说我们给它叫什么呢?叫做这个logo区域。起名叫ID啊,我外层最外层我给它起名叫ID,那里边我是不是就可以这个叫做div,叫做logo啊。
05:06
点logo,这是不是就是什么class成了,或者就是这个用class了,对吧,外层用ID里头是没有class了,哎,那好比这一层,这一层元素就什么呢?就是100%宽的,而在这层元素呢,我就给它限制一个宽度,然后在这里边有三个div。比如说这个叫做logo。杠一。图片的。之后再来。这个叫呃slogan SL基slogan啊,然后再来一个搜索的。Search好了啊,比如说这里边我包含了那么多啊,那咱们来看,先去设置它的最外层,比如说井号。Logo它的最意外层的这个宽度是不是100%,那比如说WT宽度多少呢?100%宽啊,100%宽,然后它的这个背景颜色,背景颜色是不是就是我这个top的这个这个颜色啊,对不对,那OK,比如说我在里面重新给它设置一下,当然这个设不是其实没什么用啊,我只会给大家演示好了,但是设置完并没有效果,为什么?因为它没有高度,对不对?来咱给他一个,比如说高度为多少呢?为80相同啊,瞎给的。
06:07
走,你来这边这个高度是不是有了看。是不是有这么一个高度了,哎,当然具体多高,那我们在做项目的时候肯定是什么,肯定是这个设计已经给了我们这个尺寸,对不对,或者我们仿别人的时候,仿别人时怎么办,我就需要用什么用这个。标尺工具来量一下别墅多高吧。来,咱们来看标尺。啊,大家可以自己去下载一下这个软件叫pic p啊,然后这里边是不是有标识啊。哎,然后我给它干嘛,进行方向垂直,然后我量一下这个元素多高,我是不是给它设置多高,比如说它是114,对吧,我是不是可以给它设置114啊,就是这个意思啊,好了,那这里边我们先不管了,因为这个我们光设置高度肯定做不出来啊,我就随便先给他个80啊,或者咱看到了就一百一十四一百一十四啊。那现在咱们来看啊。高度是不是加高了,高度加高了,同样里边是不是还有一个子元柱,它要给它设置个宽度啊,那LJO。
07:03
它的宽度为多少,为1200啊,所有的都为1200PS对吧?B background,比如说这个颜色我给他一个什么orange颜色好了,然后再来再来什么再来好像就没有什么东西了吧,它的高度高度我也可以干嘛呀,他100%,那是不是就是他负了多高它就多高,那现在你就来看刷新。是不是有这么一个元素了,哎,有这么一个元素,这个元素里面是不是分成了左中右三块,那左中右三块注意。这个元素的宽高我都给他设定好了,那里边的东西是不是就随便浮动了,里边叫什么logo高image,就是它的宽度啊,我刷给一个300对吧,那高度呢,给不给都无所谓的,他肯定会继承,然后还有谁还有再来这个里边的s slogan。它的宽度,比如说我给他一个500。500好了,300加500是800。我的总单总宽带是1200,是不是还剩个400啊,所以这里边呢,SESH就设置它的WD,也就宽度应该是400,哎,然后给的背景颜色啊BS搜索呢,我用什么用绿色表示了啊,然后这个slogan呢。
08:04
B,我用什么用红色来表示,然后这个面积的logo呢?B。我用一个呃蓝色来表示好了,那现在我们来看啊,目前在我的页面中是这样的。刷新。诶。没有反应。点slogan。没给高度的问题吗?来高度100%好了,最后咱们来看啊刷新。啊好了有了对吧,没给高度的问题,对吧,再来高度啊对,因为里面那我也没有内容对不对,再来高度也一样100%。还有底子这个高度。也一样,100%好,现在我们完事以后再来刷新。来,你看三个元素是不是都有了,但是目前为止都是什么,是不是都是垂直的,都是div的特性,都会读在一行,对不对?那接下来干嘛,是不是让它浮动就可以了,比如这个一样左浮动,对吧,然后这个也一样,F float float left左浮动,还有谁呀,这个也一样,给他float float left也是左浮动,那这个时候他们三个是不是在一行了。
09:09
看到了吗?诶,怎么没在一行啊,Float left left,这个是不是写错了float。Float left啊好,那这时候再来刷新,你看是不是在一行里边了,对吧,分成了左中右三块吧,那左中右三块,剩下你就写内容就行了,对不对,那红色咱们换一个G。好了,换一个啊,只能跟上面的重合,这是不是就可以了,哎,那这块完事了,那接下来呢,接下来什么,我们是不是下面还有一块。你看是不是还有这个图片呢?不对,图片有这个叫什么导航嘛,哎,导航你看也是从这条线开始进行掐齐了,对不对,那我也一样,那导航这里边比如说。往回来。再来一个啊,给个什么呢?给一个div啊,给它起个名ID叫做AV对吧,里边再来一个div.class叫做NAV的一个ID,一个class对吧,那这个时候咱们来看啊。
10:03
先来说说井号div的啊。不对,叫V是吧,V9号V的它的宽度依然是100%对吧,然后呢,它的这个背景颜色,比如说我们给他一个这个。腾我用了是吧,那深层然后呢,在这里边它的高度,比如说随便给一个啊,He IG hei。GHT给它40相数对吧?好了,那负类搞定以后,接下来是不是就子类了点NAV给它的宽度多少啊,1200PX,然后它的背景颜色BCK,比如说我给他一个嗯,这个颜色,然后再来它的高度也一样,给他什么凹凸也行啊,凹凸自动自动是不是跟随它的负类了,对吧?那这个时候我们来看周尼。你看是不是过来了,过来了我的颜色。换一个颜色啊。这颜色有点太贴近了是吧?来这颜色吧。刷新。
11:00
刷新刷新刷新,诶颜色是不是没有啊,那看一下我们错在哪了,首先这里边宽度有了,高度是不是就相当于高度没有啊,来试一下100%吧。中音。诶有了,你看它的高度是不是就有了。没错吧,哎,那OK,那剩下的东西是不就差我往里边补内容了对不对?布局大块是不是就没问题了,那你看这里边啊,比如说这块内容我都浮动了对不对,但对下面元素有影响吗?没有,为什么没有影响,因为它的父类我没有浮动,没错吧?父类我是不是直接设置死了框框,你看它父类谁呀?这是它的子类,子类这也是他的子类,它的父类是不是它对吧?父类的宽高我是不是设置好了。而且在外层的负类,我宽高是不是都设置好了,哎,所以它的浮动对下面是不会有影响的啊,不会有影响的,好了,那再往下来呢,再往下来就这么一个大的div了,占位就可以了,对吧,那比如说。在这里边,同样银袋子里边,我再给他一个div。Div,这个叫什么呢?叫做。
12:00
我叫ID吧,BN呀班的啊,就给这一个单位就可以了,然后这里面就是井号BN呀班的给它的这个宽度为多少啊,为这个1200对吧,然后呢,高度呢,比如说我给他一个400,然后呢,再来这个b GR ground pink给他一个粉色,好,那现在你看我的这个是不是也有了。对不对,哎,接下来我们差什么,就差居中啊这些操作了,对不对,哎,好了,那现在咱们来看我的头部是不是就搞定了。没错吧,哎,那头部搞定,当然这些东西可能我还得改啊,为什么得改呢?因为。在这里边我是不是把整个这个内容都给放到海里边来,看到了都给放到这里边来了啊,那正常情况下呢,我其实我不需要了,这个这个家伙,这个老家伙,最外层这个老家伙其实我不需要啊,用不着了啊,你看。刷新有影响吗?是不是没有啊,对不对,你看人家该白的是白的,该是这个这个这两个都是什么?满屏的对吧?剩下的都是1200的,所有都是这个,剩下我只需要干嘛,是不是将这些元素一居中在中间显示,是不是我这页面布局就出来了,对不对,只是现在我们还没学过居中的啊,还没学过居中的啊,当然这里边我可以给大家用一下,大家看一下啊。
13:12
来,比如说在这里边所有设置1200的地方,我都加一个属性尖MAR0。自动。它可以干嘛让一个块状元素居中啊,这是。块状元素居中啊,块状元素居中,那一旦浮动以后,它还是块状元素了嘛,那这不就不是了,对吧,你看这这么居中了,那也就说在这里边的好处,上面所有的CTRLC。只要是设置1200的地方,我是不是都让它居中。这里面还有一个幺二。零零对吧,再往上来,这里边还有个1200,好了,现在你再来看刷新。是不是都居中了,这回我的页面布局是不是就出来了,哎,跟刚才我们看到的是不是一样,剩下只差什么差往里面填内容了吧,对吧,你只需要对应的往里面该是图片的填图片,该是文本的填文本,该是搜索填搜索是不是就OK了。
14:03
对不对,哎,那他完事以后,接下来再往下来什么,再往下来是不是就是这下边的内容了,对不对,这项内容一样,它有四块,你看啊,我怎么划分。比如说我把。整个这段内容看作一个div对吧,然后呢,里面包含了什么一个公告。底下又包含了一堆这些内容,这个内容里边是相当于是四个div,这是一个div,这是一个div,这是一个div,这是一个div,让它一浮动是不是就可以了,是不是这个意思,哎,所以在这里边咱们来看啊。加购。我们把它写完了吗?在这块我们给它一个注释的啊,叫做王在。主内容区域开始啊,那主内容区域这里边我就直接来个div,比如说我给他起个叫什么,它叫做公告是吧,Notice来class等于ID吧。ID等于nott啊,这个时候在我们布局页面的时候,你就不要用什么one two three,对吧,哎,你用这些那就不行。
15:09
因为一个页面中要写的话很多啊。你如果要是光起万通瑞的话,这样比或者ABC啊,一会儿你就整蒙了啊,所以一定要有关联,你看我外层用的是ID等于呃,那个notice对吧,那么里边一样我也可以用div对吧,然后再给它设置什么class ID等于什么什么值,就是这个意思啊好了,那咱们来看啊,刚才我忘了这个我们怎么划分了啊,我们划分了这么一个div。对吧,比如这个div就叫ID等于notice了,Div里面包含了什么?包含了头跟底部两块内容,对吗?哎,那OK,那在这里边也就是说再来一个,为什么呢?为这个notice的这个杠开头头部啊,然后这里边一样再来一个div,这个叫什么呢?这个叫做notice。Con con的内容啊,这么样,我给它进行了划分,然后里边又会有什么,有这个一堆的div对吧,Div咱们有几个,有四个啊,Class叫做。
16:07
产品嘛,比如叫OT-PU。Pro。CD啊,当然产品可能有多个对吧,现在我只给了一个啊,这个未来可能有多个可能CVVV就这四个嘛,是不是这意思啊,哎,好,那现在布局完以后,接下来我们开始去改它的样式啊,先去设置。井号not,它的宽度。Width宽度依然是1200,然后。Hei高度依然为呃,比如说我给随便给一个,先给他500,然后B单个勾上的BG给了一个什么颜色,给他一个,呃。金色吧,好吧,然后再往下来。也让他干嘛居中,那我把这个复制过来,这是它的最外层的副类,对吧,先看一下效果。走你诶在这呢,然后里边会包含了头跟不是这个顶部跟内容两部分,对吧,有点notice-title它的头部,比如说我给他一个高度,高度为多少呢?高度为80吧,啊然后这个宽度依然是100%。
17:15
对吧,然后b background给他一个什么颜色,比如说给他一个。格瑞yellow,好,那现在咱们来看它的头部是不是就有了对吧?头部有了下面是不是还有内容区域啊,那内容区域的话,这里边也一样点杠con content对吧?那同样我也可以给他with。宽度100%对吧,然后高度,那高度咱们看我总高度是500减80,是不是420,那我就直接给他四百二就可以了。刷新看不出来什么效果,因为什么没给颜色是吧,BB给他一个什么,给他一个F7CC吧。走里来看底下是不是变成这个颜色了,那这个颜色里面是不是包含了四个区块啊,那包含四个区块,区块我们起了什么呀,叫做。
18:07
对吧,那它的宽度注意你要看它的宽度多少,这个里面平均放的是几块,是四块对吧,那它的这个总宽度多少,总宽度是。1200吧,那1200除以四。是不是这个意思,哎,那也就是说在这里边我可以给他一个什么CALC,叫做1200P叉除以四是不是就是我一个元素的宽度对吧?当然实际它还会再缩小啊,但现在我们做不到,用不着啊,然后高度还剩多少,还是依然是四百二对吧,那就继承了你的负类吧,那就100%对吧,因为它负类是它没错吧。哎,它父类的宽度100%是不是就是1200,因为它父类继承了谁是不是就继承了。他爷爷类对不对,哎,为1200了啊,那好了,那宽高有了,接下来他的背景颜色BGRD啊多。B ground,咱们再给它一个颜色,比如说我就给这个颜色了,好,现在我们来看。
19:01
走,那你看它是一竖行下来了,对吧,为什么?因为里面所有元素都没有进行浮动,那接下来干嘛,我是不是在这里边给他一个f float float left是不是就浮动了,来你看。周一。呃。没浮动啊,F Fla啊float left,好了,这个时候再来刷新,你看所有的都浮动,是不是在这一层上了,这里面实际上是不是有四个元素啊,对不对,当然啊,这里边。我给的可以再小一点啊,比如说这里边呃,1200乘以四除以四。算了,我就固定好了好吧,一个3432300万,那一个就给他二百八二百八。二百八啊。刷新。好了,这个是不是就展出这些了,对吧?但实际上他们不,他们现在都是挨着,所以我看的像是一整块,但实际上是不是里边是四个元素对吧?我们可以通过检索来去看这里边是不是有对看这是一个对吧,这是一个,这是一个,这是一个对不对?哎,我们还没学合资模型,学了合资模型我们是不就可以把它干嘛,把它进行一些拆分了啊,把它进行拆分了啊,这就是咱们的布局啊,那么一样,大家也可以通过我这个页面啊,继续往下面,把这下面的内容,你看下面容基本上都是一样的,对吧?把正下面的内容再进行什么,再进行布局,你像这块的布局怎么样,这块的布局也一样,我先是干嘛呢?先是水平划分,比如说这是一段内容,哎,不对,错了啊,这这是一段内容对吧,这个内容里面可能分为上和下,然后呢,这块又是一行内容,而这个内容分为什么分为左跟右。
20:36
对不对,哎,这就是咱们的这个布局啊,大家可以按照这种方式,按照我这种布局方式啊,把下面的所有东西都做出来啊,都做出来,都给布局出来一样,现在你可以不填内容,你直接写什么,直接往里面加颜色就行了,加背景颜色就做成我这样效果,对吧?那这样的话,我是不是就把一个网站就布局出来了,明白明白什么意思吧?哎,这就是咱们的这个布局属属性啊,去布局页面的这么一个效果啊,好了,那这节课我们到这。
我来说两句