00:00
好,我们开始来上课啊,那么上节课呢,我们把我们的这个头部的布局已经布局完了,那么这节课呢,我们再来布局,我们的这个尾部的布局啊,也是这个从我们的什么友情链接对吧?这块是文字的链接,这块是什么图片的链接,以及我下面的这个叫什么。这个网站的底部对吧,那一样我们再去创建的时候,还是新建一个页面,我说了头跟尾我们给它分开写啊,这里边叫做fo foot好了,然后在这里面第一件事还是干嘛需要去链接我们的这个全局文件,当前目录,Image下边不对,是CSS,下边的叫做什么叫做这个global叫CSS,这是第一个文件,那么第二个文件呢,我们还是当前目录。CSS下边的叫做呃,Fo特展CSS,但是一样,这个文件目前我们还没有,那我们需要去新建一个文件啊,叫做H文件,错了,是CSS文件对吧,新建一个。CSS文件啊,叫做fo亚特的CSS,好,那么创建完以后,咱们再返回来先看这个这里面,那么第一部分我们应该写的是什么?是我们的友情链接对吧?那我们把注释也写上友情链接啊,那么友情链接开始以后,然后再往站就是我们的网站底部啊。
01:14
叫做网站底部啊,那OK,友情链接,这里面我们给个div,然后我们给起个名儿,叫做什么呢?叫做link啊,井号link。好了,然后在这里面是包含了两部分,一部分是什么?是我们的图片的,一部分是文字的,所以这div class叫做,呃,不对,叫做这个link test也是文字的,然后在这里面呢,再来一个div,这个叫做class,是link-image,这是我们的图片的啊好了。那这块完事以后,接下来就是我们网站的底部,底部的里边也一样。再来看啊,底部的底部这里面有一个满屏宽的对吧,然后呢,那肯定是在中间又有一个div是干嘛,实际上1200的,然后里边有个。两个P元素对吧,比如说P标签,让这个P标签进行什么进行居中,是不是这样一个效果,所以在这里边我们直接去给它设置叫做。
02:05
呃,Fo,亚特然后在这里边给了一个class c,啊,不对,是再给个div叫做C,呃,Fo。Fo这是class的对吧,然后它呢是1200,我就直接1200,然后给他一个居中啊,然后它是满屏宽的,那直接W杠。W,呃,不是不在ID里面写是吧?TR给他一个class w-100满换。好了,然后在这里面呢,我们给他一个P标签,然后再来一个P标签,这个P标签里边有两行内容,我们把这个文本复制过来啊,第一个这是这个,然后第二个。是这个好了,然后文本,那现在我们先来看一下我们页面效果啊,不是在不在这个页面了,对吧,它是单独的底部文件啊,我们拿到底部来是在这样的对吧?那其他东西我们还没有调啊,那包括这里边的文本的内容是需要去居中的,对吧?所以这里边我直接可以给他一个take-center适当的居中。那现在我们再回到这里面来看周尼。
03:02
OK,居中了,然后居中以后,它的最外层的这个颜色是什么深色的,那这里边呢,我们没有给他设置啊,所以一会儿我在这里面来设置了啊。好,这块完事以后,那接下来就是开始设置友情链接,我们先去设置友情链接啊,在这块来该给的基本属性我们已经给了那友情链接,那友情链接这里面也一样,友情链接的这个东西,这个元素是不是也要给他设置一个class对吧?Class叫做呃,W-100啊,不是满面关是W-1200对吧,然后呢,再给他一个M。凹凸啊,让它进行自动啊来刷新,没有任何效果,因为我们友情链接没有东西,对不对,比如这里面给个A,再给个A啊两个东西,咱们让他有一下好了,是不是在这呢?在这以后接下来友情链接这里边,你看我们有边框什么的,什么都没有,对吧,只有这里面的内容,也就是说在这里边我们需要去给他多个内容,一个A标签,比如说融职教育。好了,就给这么一个A标签啊,那A标签当然肯定有多个,肯定微微微一直都是这样的,对吧?那这里边刷新啊,不是这不是我们的页面啊,这是我们页面来刷新,好了,你看是不都是这样效果,那么现在我们开始去操作这里面的A标签,也就是他下面的A标签对吧?那在这里边。
04:13
叫做。它里边的。A,标签啊,我们给他一个什么呢?给他一个拍顶,我认为上下为这个20左右,上下为十左右为20好。然后我们先看效果啊。刷新。距离拉开了对吧,那同样我们给的一个borderer buildd buildd borderer1上素实现的叫做井号CCCC,推测好再来。OK,也有了,也有了以后我们要整个这个这个家伙距离上面远一点,对吧,所以点Lk.link和test,这是我们的这个。谁呀,是他对吧,我应该找的是ID为link的啊,所以我让ID为link的距离上面远一点,所以这里边我就直接给个井号link,让他Mar兼marin杠。
05:02
马吧,上下为20啊,左右自动。左右不是自动左右杯。上下左右,左右为零。左右自动吧,U啊左右自动,因为在这个里边我用了一个谁用了一个modu对吧,那我就不用它了啊来再来刷新。好了,距离有了对吧,哎,距离有了那一样,上边上边啊,上边它由于是什么,我直接是顶部了,所以它没并没有真正的20那么大啊,然后在这里边还有一个A呢,这里边这个A什么,这里面这个A是我的这个image对吧,那把image这个A删掉,现在是这样效果差不多了,对吧,那咱们给的给的再大一点啊,比如说这里边。嗯,那就上下为40吧,上下为40啊好了,那同样这个点。Link一个test给它,我们也给它设置一个马九啊,上下也给它,呃,20像素左右为零啊,左右为零,好了,这个时候再来看走你OK,距离都拉开了对吧?那么距离拉开以后,这里边咱们说了,只要加一个东西,它就肯定有对吧?那咱们再来,比如说这里面再来一个A标签,比如说叫什么呢?融资教育,还有什么学习园地。
06:09
学习原地啊,然后再来一个,哎,比如说这里面再来一个智校云。自孝。云网络科技有限公司啊,可以打的长一点啊,咱们来看走你。你看不管是给了什么样的,是不是他都是长这个样子对不对,然后呢,我还可以干嘛呢,在这里边,比如说我再给他多复制两个,咱们连他有一行效果对不对,看他到第二行是什么样的啊,再给他这几个,好这个时候我们再来刷新。OK,没问题,没问题啊,在这里边看们看啊,它到第二行的时候,注意在这块的时候,是不是就已经变换了这个样式了,对不对,哎,所以这里边我们需要干嘛呢?不能因为它是行列元素啊,所以我们给它去变换一下啊,变换成什么呢?变换成块状元素,在这里边我们可以给它一个play。This play,为什么we block啊?比如说唯一block in block,那这个时候我们来看刷新。
07:04
你看诶这没问题了,对吧,第二行这里边确实也什么也下来了,对吧,那这个时候我就可以干嘛,可以给他一个marin值了吧,Mar减marin上下,比如说上下为十左右为零,那这个时候我们再来看这个A的啊来刷新。OK,距离是不是也拉开了,哎,上下为十,左右为零,但这个左右为零啊,我们也不确定对吧,所以这里边我们给他一个包啊,我们看一下EPX。EPS sod给它一个红色,我们看最终给我们边框,因为它没有参照这个页面对吧,它本身就是一个参照物,没错吧?哎,那OK,它会干嘛一直往下去排列,直到排不开,是不是它就会换行啊,对不对,哎,完了,那换行以后,这里面上下为十的时候,你注意在第二行里面是不是就比较难看了,所以这里面我不要这么给啊,我就始终给他一个下就行了。Margin button boom。好,左右为零不给了,那这个时候我们再来看刷新,OK,距离是不是就小了对吧?哎,好了,那这个时候它搞定了,我们把它删掉啊删掉咱们再来看。
08:06
小心,好,这就是我们,哎,给错了,删错了是吧?我应该把谁啊,把它删掉啊好再来保存,这回咱们再来看,这就是我们的友情链接是不是搞定了,那友情链接搞定了以后,接下来是不是还有图片的链接,那图片的链接这里面我们就得给一张图片,同样图片也需要带A标签,所有的链接都是需要跳转的,对吧?那以image在这里面,当前目录以image下边,然看这里面还是用logo吧啊,然后这里面再来刷新。你看是不是有个logo,那同样图片链接我也给它缩小一点啊,比如说这里边我给它固定一个大小到link,呃。Image link image里面有个什么,有一个A对吧?这个A标签,我们先给它设置一下this display变成什么呢?变成block,是不是变成行内行块元素对吧?然后呢,在这里边给它去设置它的这个大小,比如说它的这个width width宽度,比如说幺二一百二对吧,高度,高度的话我们让它自动就好了,对吧,高度让它自动啊,然后呢,在这里边一样点link,以面积里边的A里边的乙面积,让它的宽度变成100%,是不是追随着它的腹内的宽度。
09:12
对不对,那现在我们再来看刷新。好了缩小了,缩小以后它也一样会有多个对吗?那这里边还是一样把它复制多个CTRLC喂喂喂喂喂。好人的出现。第二行走你。OK,第二行有了对吧,但第二行有了,注意啊,这里边一百二可能相比来说,比他来说还要大一些,对吧,那我们也可以干嘛再给他再小一些,比如只调这里就行了,比如说我的这个宽度为80,比如说我减了对应减了40的宽度,那你看是不是又小了一些,对吧?哎,或者是给到九十一百万,给了100万啊。来100啊,也就说你传的这些图片的宽度必须是100啊,然后这里边我可以干嘛,也可以干到,比如说每一个A标签嘛,那ma键马刚right距离五像数啊,每个距离右边都有个五项数,诶好了对吧,哎,每个距离右边都五项数,那同样这里边我还可以干嘛,再给它两个,让它出现下一行啊。
10:04
来,再来刷新好了,到下一行里了,那下一行这里面同样还是需要干嘛,需要给它一个宽度吧,也就是这个A,我们给他一个build啊,Border-button为五项数。好像没什么太大变化是吧?嗯,给他十像数,哎,错了,五项数,咱们给包能对吗?给什么呀?给这个呃,J marin-八是吧,距离下边我们想数来再来刷新。好了,这回是不是就有了,哎,好了,那完事以后,接下来就是我们最后这一部分了,对吧,我最后这一部分应该什么?应该是我们的这个叫做王的礼物啊,那咱们同样啊看一下跟他对应一下啊,跟他对应一下我们做的,因为这里边啊,注意咱们这里边做的这个内容啊是不一样的,跟他的略有一些区别,什么区别呢?你看啊,它这里面所有的块容,所有的这些东西都是。宽高给你定义好了对不对,而我们这些呢,咱们说了我们是什么,因为万一别人的这个名字要比较长呢,对不对,如果你定义好的名字比较长,是不是就超出去了,哎,所以肯定不行啊,所以呢,我们这里边给他干嘛,让他自适应了对吧?这边有空你就往上放,没有空就下来,对不对啊,而这个这两个他俩都是设置一样了,那我图片这个呢,由于是什么这个图片小,所以它可以干嘛,可以过来对吧?那比如说这里边图片我要稍微放大一点啊,比如说图片给他100亿。
11:26
来,你看,再来刷新。还是能装下哈,一百二的。揉你。走你啊,一百二是不是就下来了,对不对,哎,那一样啊,但是大家明白这个是怎么回事就可以了啊,只要明白怎么回事可以了,好了。你再给他收回来啊,还是这样就可以了。那么做完了以后,那么接下来呢,在这里面在干嘛呢?咱们来看其他的基本已经没什么问题了,对吧,还剩最后底部,底部有这么一个颜色,这个颜色是什么颜色,我们就来吸取一下啊,在这里面选中它叫做这个颜色CTRLC,这是我们的这个foot的颜色,对吧?那我们在这里面调过来啊,找到foot们还没用是吧?那立刻完事,就是网站底部。
12:10
网站底部啊,也就是我们的这个井号foo PR给它的这个BA背景颜色变成这个颜色,同样它的拍顶啊拍顶比如上下为十像素啊,左右为零,好,现在我们再来看啊。这里面来刷新。OK。没问题,有了对吧,这两个距离可能有点太远了啊,我们来看一下这个距离是靠什么来设置的,我们给它对应的减少一些对不对,嗯,那就看一下在最上面,应该在这什么马井上下为。20对吧,那就是让它下边为十,下边为十,让它近一点啊。来。呃,还有这个啊。为30。再来调一下。OK,这个距离会拉近一些对吧,好了,拉近一些,这是我们网站底部,网站底部最后这个文字是么样,变白色就可以了,那也就是说在这个福里边井号fo呀,Foot里边的这个P标签嘛,它的color变成。
13:16
好,这回再来看。刷新。刷新。直接空格里的P,这里面是多了一个是吧?哎,因为这里面还有一个点复呢啊,所以我直接空格P了啊来吧,在这里面再来刷新,OK,字的颜色也变白了,那现在咱们看网站的底部我们是不是就搞定了,哎,那现在头跟尾都搞定了,剩下差的是什么?是不是差我们网站中间的内容了,也就是在这里边中间的这些。对吧,哎,这就是我们的主题部分了啊,所以主题部分也一样,我们单独再拿一个页面来去写它啊好,那这节课。
我来说两句