00:00
好,我们继续来上课,那么今天呢,我们主要去完成我们的第一这个第一个项目CMS的这个页面布局啊,那咱们来看一下,那咱们在这个上一关当中啊,我们已经给大家带了一个这个页面的这么一个布局的效果,对吧,我们来打开看。这是我们针对于我们第一个项目的页面做的一个布局,对吧,但并没有完全。实现页面中的所有内容,那么我们本关呢,就要实现这个页面中所有的内容啊,那么在实现这个内容之前啊,我们先来分析一下,我们先不着急进行布局啊,我们分析一下我们在布局的时候,我们都写了哪些属性,那么在这里面又有哪些属性都是什么呢?都是共用的,就是什么一算功能就是都是重叠的,对吧?比如说在这块他用了,在其他地方他也用到了那种重叠的属性,我是不是写一次就可以了。哎,这样的话在我布局的时候就方便很多,那咱们来看啊,在这里边,比如说你像宽度。你像这个背景色啊,你看宽度1200,你看这下面宽度是不是也1200,然后这个马井零左右自动,你看每一个这里边我是不是都写过来float对吧,然后还有什么back ground背景背景色你看这里面又马九零左右自动对吧,你看这又float left,你看这里边是不是重复的用到了这样的。
01:13
样式,那么既然重复的这样用到样式,我可不可以把这个样式单独的给它封装呢?封装完以后,那只要我的这个标签需要这个样子,我是不是直接给他加这个样式的名称就可以了,这样的话我在布局页面的时候是不是就会更方便一些啊?对不对,哎,那OK。那么咱们就来总结一下啊,就通过我们在这里面布局的,那么在这节课当中,我们就来总结一下我们都需要用到哪些公共的样式,比如说刚才我们说了有马径零左右自动,也就让它进行居中对不对?然后还有什么呢?我们在这里面再来看啊,还有float left对吧?还有设置什么,设置它的宽度为1200对吧?以及宽度为100%,你看宽度1200,有宽度100%,宽度1200对吧?这个宽度三百五百不说了,400不说了,这就是宽度100%。
02:00
对不对,哎,然后还有什么,还有这又是宽度120的,这些是不是都是我们公共的钥匙,你看这里面还有八点理论之路,没错吧,那好了,那我们干嘛呢?我就把这些所有公共的样式都单独的提出来,写到一个CSS文件里边啊,CS文件里边,好了,那咱们来看在这里边啊,我们想布局这个页面对吧,在里边。零五这里我们新建打开我们这节课,就来提这些公共的样式。然后咱们来看,在这里边已经有一个CSS了,对吧,然后也有一个这个10INDEX,这是我们在上一关中写的这两个代码,对吧?那我只是给他保留,作为我们今天的参考而已啊,我们今天的一切都重写,那么在这CSS里边我们新建一个CSS文件。再外面,比如说叫什么呢?叫做global全局的。CSS啊,那么全局的CSS里面都有什么呢?比如第一件事,我可以在这里面清除,清除什么呀,清除所有标签的padding,听到没零所有标签的什么呀,这个。
03:04
Module。也为零对吧,然后呢,我来设置什么呢,设置我所有标签的,比如说放杠。Size为多少?为12或者不能12太小了,为14像素啊,所有的都要呢,为14像素,然后A标签呢,比如说K杠。这个应当为什么呀,No。Ne,对,去掉下线,然后列表标签的style也让它为NNE是不是去掉它的这些样式对吧,这是我。目前做的所有的公共的这些对吧,把它所有都取消了,那比如说刚才我们通过在这个star c SI里边,我们看到看到什么样,比如说这里边有一些背景颜色。对不对,哎,BG color f7,那我可不可以给它做成公共颜色,公共样式也可以对吧?包括我们看到的宽度1200对吧?那比如说在这里边我给它定一个名称,注意我是先写CSS对吧,我定一个叫点,点什么点W-1200啊,等于什么呢?等于W-IDCH1200像素对吧?然后再来还有什么,还有点这个,比如说有这个再来看一眼吧,这里边还有什么,你看啊,Takes red这些我们可以也可以,当然我们也可以给它封封装对吧,但我先不封装了啊,比如说慢零左右自动,这个我们是不是也很常用啊,对吧,那我就直接点这个M杠。
04:22
凹。AU to,对吧?点M高度,那就是M压减Mar。接。减零对吧,左右。哎,我就设置这么一个样子啊,然后还有什么呢,比如说还有这个。呃。宽度100%的对吧,来点W-100 W-100代表什么意思,就是我的宽度是100%对吧,那有可能我的宽度是什么,比如说我宽度不要100%,我还有可能50%呢,那我就是一个宽度为50%,对吧?哎,总之我只要遇到那种重复写的,我是不是就可以定义到这个文件里面对不对,然后包括比如说我们的浮动,浮动什么,比如说叫做。
05:05
那个呃,Float。能别float了,就叫做点F吧,点F等于什么呀?等于float float。Float left是不是往这边写,然后再来,还有R呢,Right对吧,那就是float right,还有清除浮动呢,比如叫C,那就叫。Booth。Boss。Lo o at吧,叫做o at啊好了,这些都是什么?我们目前用的这些公共样式对吧?然后咱们这里边再来看还有什么公共样,比如说咱们说了背景颜色这个FCFC对吧,那好了,那在这里边也一样,比如说我叫什么呢?叫做这个点B。呃,BAC吧,BAC叫什么呢,F?F7嗯B这些F7什么意思,就是back井号F7F7F7是不是我就定义这么一个名字对吧?那好了,那再来再来看这里面还有什么啊,Take right我们先不管它,因为这里面目前就看到一个对吧,然后高度呢,高度现在我没有办法给你对吧?因为每个元素的高度是不一样的,我们这里面给高度只是为了干嘛,只是为了他有这些显示而已啊,然后再往下。
06:14
非颜色orange。有一个橙色对吧,那你看比如说这种背景颜色啊,不管它是站位也好还是什么,你看这还有背景还是blue对吧,那我可以不给以提前声明啊,比如说叫什么呢?BC,不对,叫点B,注意我用的点是不是都是什么,都是我们的类样式,那是不是在标签里面只要加一个class,起个这个名,是不是就可以用的应用这个样式了,哎,比如说这个BCKBC什么杠org。Orange,那是不是就是b or?O,诶,错了background or是不是就设置这个颜色了,哎,我可以给他这么做设置对吧?包括比如说我们做一个边框的这个调试啊,比如说点这个包叫包ER啊,只要你加了一个包ER,我就给你设置一个包ER,一上做so,然后给它来个blue来色对吧?做一个什么,做一个调试用啊,然后再往下来看看这里面还有什么。
07:05
Fla的这都写了对吧,宽度宽度你看它有300的,有500的对吧,那这个不一样,我就没法也可以写对吧,那也可以干嘛,我直接在这个,当我用的时候,我直接在这里面写也行,对不对?哎,然后再往上设置,这里边你看基本上就是宽高浮动,宽高浮动看到了吧?诶基本上是不是都是这些,包括NVNV这里边是不是也一样,你看宽高幅度。对吧,这里边呢。是不是这些宽高浮动加上什么,加上这个。呃,居中对吧,你看基本上是不是都是这些看到了吧。是不是啊,哎,宽高宽高对吧,但是我说了我们的高度啊是不固定的,所以在这里边高度我们不需要给它定义成这个框架里边啊,剩下的别的是不是就没什么,那现在来看,在这里边我是不是就把我的这个目前为止我们所分析出来的公共样式给定义好了,定义好以后咱们说了怎么用啊,对不对,那我们就先学会它的用嘛,那在这里边新建一个文件,比如说啊,我们自己建一个怎么建一个test。
08:04
这个DEMO吧,我们先做一个测试啊,比如说在这里边我们有一个元素叫做div。好了,那现在div我想给他个宽度对吧?那怎么办呢?我就直接错了,我先把CS文件样式再引入过来了,这回引入哪个文件呢?Link标签我们要引入是当前目录,CSS这个目录下边。叫做什么呀,叫做呃。格global对吧,那就是GL格global的CS好了,那么引入完以后,比如说这个div里面,我要想给他设置样子啊,Class,我是不是有一个W-1200这个家伙,这是不是就是代表了设置的宽度的百分之一百百,呃不,宽度为1200了对吧?还有什么呢?我还可以空格MM什么呀,M杠凹凸什么样的居中啊对吧?哎,然后在这里面,比如说我给了一个A让他做单位了啊,然后咱们这里面是不是还有个边框,比如说给了个包的对吧?还有背景颜色对吧?比如说bank这个,你看我是不是加了这些类样式,加了这些类样我直接显示页面,你看好了,这个时候在我里面中是不是就有这个效果了,对不对,因为我说了高度嘛,我们没给的对不对?那比如说这里边我也要做测试嘛,我们也给了一个高度啊,比如这只是测试的点h.H的,比如点H-100吧,啊,我瞎给的啊,那h he GT为100对吧,咱说高度是个不固定的,所以高度没有必要去给它定义这个啊,那点S等于100以后,那在这里边我们可以干嘛,是不是直接。
09:25
第二,哎,不对,就直接H-100就行了,高度是不是就有了,那你看这个时候来走,你高度是不是就有了。对不对,哎,包括我想要文本的居中居左,我是不是都可以定义到这里边,比如说在这里边啊,文本呢,那叫做KT,呃,不对,点T-L。或test杠吧,Test-center那是不是就是a Lin,不对,是test-a Li gn等于一个center对吧?那如果再来还有什么呢?我想的GU右takes-right那是边的GU,那就是takes-AGN等于RG right吧,对吧?哎,包括比如说高度,你看啊高度,虽然我们不定义这种固定的这种像素,但是这里面注意高度100%。
10:11
哎,还有没有了。没有了吗?嗯。高度苯分是不是也有啊,哎,所以这种这种高度100%的话,那没问题,我可以定义吧,比如说这里边叫什么点H-100那啊不用了,这里边咱已经写了是吧,那咱就给他一个什么高度100%,不给他100像素了啊,比如说高度的100%啊。那能给100%,比如说这里面再来点H-五零,这高度多少啊,H1I的,比如说高度就是杠50%的,对吧?哎,我给百分比的话是没问题,因为什么?因为只要父类你给它定义高度了,那么它的子类你用这个样子是不是就没问题了,它就可以继承它的这个父类的高度,对吧?你用这个就继承父类的一半的高度50%了嘛,对不对?那现在这样的话,你看我先把这些公共的类样式都定义完以后,在这里边我在用的时候是不是就轻松了很多,对吧?我只需要给学校标签加这个了,哎,比如说在这里边咱们来看啊,这里面再有元素,比如div。
11:08
再来div。再来div上个div对吧,那这里边我想要进行什么呢?进行一个浮动啊,那比如说在这里边,呃,宽度的话,我没有给一个像素是吧,咱们先给一个啊,比如在这个style里边,咱们来看啊宽度。呃,不对,格在哪啊?来你看这里边宽度有设置吗。来我是不是只给了这几个宽度对吧,这都是什么百分比的吧,那好了,我这里面给两个宽度啊,比如说点W-300啊,这个时候就是宽度等于300像素的这个意思啊,咱就拿这个我是做测试来你看比如在这里边,我这里边要给它宽度。W。杠300。高度杠100对吧,然后再来。Class。W-300。高度高100。然后再来。
12:01
Class。W-300,然后高度杠100好了,那都写完以后,现在宽高有了就能显示吗?可不一定哦,刷新是不是什么都没有看到了吗?我这个蓝色边框都变成一条线了,为什么?因为高度这里面咱们给的是什么?100%对不对?哎,百分百的话它是没有高度的,对不对?所以我们需要干嘛,比如说这个高度我们单独给他做一个测试的吧,啊就别用这个了,来比如说点呃,H。H100-P叉啊代表什么呢?是100像素啊100PX,也就是he接近为100PX,好了,那这个时候我可以在它的父类里面加加不是它了,而是什么呀?H是H100-P差了对不对?哎,那这时候父类有100的高度,那子类是不是也有了?哎,那这回再来看刷新,诶有了对吧,有了,但是子类有显示吗?没有,为什么,因为子类我们没有给他颜色吧,那比如说这里边我们给他一个颜色叫什么呢?叫做B。呃,BACKF7,这是是F7的颜色,这个呢给它bak orange对吧,这个呢给它我们再加两个颜色,这颜色也确实太少了是吧,来。
13:08
比如说这里边再来B杠不要orange了,我们再换一个什么,换一个blue。B。呃,B对吧,然后再来点BAC。BCK,杠杠什么呀?杠这个,呃,格瑞GR这两个都是我做测试的啊,我们当然在写页面的时候很少能用到这么样的大色,对不对?Bck b GR background,给它来个呃,GR好了啊,Yellow green也行,那这起码有颜色了啊,那有颜色了,我在这里边是不是就可以给它加了,我们再回到这个DEMO里边。这个咱也换了啊B。葛瑞行,这个再来一个B。浮对吧,现在你来看我这一个负元素里边是不是有三个子元素对吧,那接下来比如我想让它浮动的话,这个让它F。F对吧,这个也是,呃,不对,我们是给的F吗。
14:02
我看看我这里面浮动我给的什么,给的是F跟R是吧。这不叫F2了,FL。呃,FR right啊,这一个float right啊给这两个了,那这块我是不是就给了FL对吧?这里边比如说我想让它也让它左浮动FL,最后这个让它右浮动FR,那现在你再来看我三个元素是不是在里边也开始做浮动了,对不对,哎,这有第一个元素,第二个元素,这是我第三个元素吧,来你看里边我们给它加上一,诶给错位置了一。啊三来再来刷新123啊,这三在这呢啊,包括比如说字体颜色,字体颜色我们能不能设置也可以啊,比如说在这个格萝卜这里边。当然我们每色一个,最好给这个加个注释啊,比如说点这个color color颜色对吧,Color什么的,Color比如说color。或者是taste吧啊叫taste taste-WH啊这什么意思啊,白色吧,哎,那我就给他一个c color叫WH白色的对吧,那你像刚才那个就比较适合,为什么为白色啊,适合为白色好了,那这个时候咱们来看,在我们这里边,比如三的这里边,我就直接给一个W,不对,是K的杠Y。
15:21
对吧,让它干嘛,让它变色来刷新,你看是白色了对吧?哎,是白色以后,比如说我想它居中,我是不是可以配the center再加一个让他进行什么进行居中是不是就可以了。能明白吧,哎,那OK,这就是什么,这就是咱们的这个。提取的这个全局的公共类样式啊,公共类样式,那也就是说我们在布局页面上说,当然现在我们是第一次布局,对吧,我不会给大家布这个,呃,提出那么多公共类样式,因为我们在提出的时候大家也想象不到,没错吧,那我们在布局的时候呢,我们边布局边去想,如果其他的还用到这个类样式,我就可以干嘛加到这个配置文件里面去了吧,对不对?哎,那OK,这就是咱们提取的公共类样式啊,那OK,那这节课我们到这里。
我来说两句