00:00
好,我们继续来上课,那么今天呢,我们再来布局一下我们这个后台的页面啊,那么咱们来看后台的页面呢,是由这个三部分来组成,首先呢,是我们的这个头部对吧?然后是我的左侧页面以及我的右侧页面,那么当我点击左侧页面内容的时候,会对应的展示右侧页面的内容,没错吧,就是这里边。他没有了。我给他关掉重开一下啊。比如在后台这里边。找到我们的index。好了,这时候你看当我点击网站配置的时候,你看它显示的是网站配置对吧?当我点击这个会员信息的这个管理员信息修改的时候,它点的是这个修改信息,以及点击用户列表的时候,它就是用户列表还有什么,还有我们添加用户数,就对应添加用户对不对,哎等等这一系列点击左侧显示右侧的页面啊,也就是说我们后台是由什么,是由三个页面来组成的,对不对,哎,分别什么,分别是我的这个诶。分别是我的这个。顶部对吧,然后还有我的左侧以及我的右侧这三部分的页面,好好,那咱们先来看一下啊,在这里边。
01:08
我们怎么把这三个页面先整合到一起,对不对,那我们先把这个页面的布局先给他做出来啊,咱们来看在这里面。也一样,我需要有什么,需要有一个这个文件叫做这个index,相当于我的主页面了,对吧,然后主页面里边有了以后,对应的要配合三个页面,一个叫做什么,一个叫做top顶部的,还有我们的这个。Left左侧的还有我们的RA右侧对吧?那P,呃,文件叫做r right右侧,OK,我们有这三个页面,然后同样他们需要对有CSS样子,所以在这里边我先创建一个CSS的目录,然后在这CSM目录里边呢,我们再去创建一个,比如说我创建一个什么呢?创建一个这个叫做格global gl bl.CSS这么一个全局的样式文件,然后还有什么呢?这里边我还会有其他的页面,对吧?那。
02:00
具体配合某一个页面,我就在某个页面中去设置啊。好了,我们就先写一个格萝卜就好了啊,那格lo也是所有页面都会包含的,那么让他的这个呃,Pdd ing拍顶设为。零,以及我们的margin也设为零好了,然后还有什么呢?还有一些这个样式对吧?比如说这个,如果我们又用到列表的话,那我们就是list杠,Style等于还有呢,我们用到A标签的话,就script叫做taste杠。还有如果我们用到这个字体颜色的话,对吧,那我们的color,比如默认默认给个颜色,其实这里面color字体我们就不给他默认颜色,但是A标签的字体颜色我们要给他一个对吧,比如默认为井号000,诶默认为什么为黑色啊,或者是怎么样,我们要么就是把所有的颜色都给它变成什么Co color为井号,比如说666。啊,给这么个颜色,那A标签的我就不要了,对吧?好,那现在完事以后,我的这个基本配置是已经搞定了,搞定以后我们在主页面中干嘛呢?我是不是要嵌套这三个页面对吧?哎,这三个页面我们在嵌套的时候,那我们这里边需要是什么?I frame标签I I frame对吧?一然后在这里边我要嵌套的什么头部点H,那同样它需要也给它的宽度和高度,对吧?那在这个全局里面我们开始去设置,比如说有这个宽度高100的,那它的这个WDTH就是100%啊,然后这个高度杠100的,它的这个with也一样也是100%,然后还有什么呢?比如说在这里边再来我宽度。
03:34
啊,宽度比如说有这个有15大啊WTH就是。15%对吧,那再来第二宽度点二宽度还有多少,还有这个20的啊,比如说我的这个WTH就是20%对吧,把提前我们会用到了,我们都干嘛做了一个这个编写对吧?因为你看我顶部有一个宽度是100%对吧,那高度可能我占一半就可以,或者是用到默认的高度就可以了,然后呢,我左侧还有左侧和右侧两个页面吧,你看这里边是不是还分左和右两个页面,那左侧比如说15%,那右侧是不是就百分之这个呃85啊对吧?所以这里边我也需要杠W85。
04:18
85%对吧,那有80的,我是不是有这个20的,我是不是要对应给他一个80啊,那再来一个。比如说WPH,我再来个80%啊好了,大概这么样子,那好了,那接下来呢,再往里面再去写内容的时候,来找到我们这个里边,那这里边的这个class,我是不是可以直接设置它的这个宽度,是不是就是100%宽了,对不对?好了,那现在我们先来看一下有没有效果,在这里边我们来刷新。OK,有了,但是我们看不出来对不对,那我们需要在什么,我们已经引入了top页面对吧,那我就需要在这个top里边,我们去写一下,叫做这个我是投。测新诶是不是就有这个内容了,对吧?哎,跟我们这个页面的效果就差不多了啊,那同样它底下是不是有一条边线呢?对吧,那底下有这条边线,那这个就不由谁啊就不由。
05:10
他来控制,而是由谁是不是要给I frame1条变线,所以在这里边我需要去引入这个文件啊,另一个标签。然后这个叫做CSS目目下面的格lo的CSS啊,那在这里边我们要给他变线的话啊,给他下边线的话。比如这里面我们也给他起个class吧啊。Class叫什么?叫做top好了,然后呢,在格萝卜这里边,我就在格萝卜里面写了叫点top.top干嘛呢?给他一个border移项数错了,叫border-bottom对吧?移项素实现了井号CDC一个灰色,然后我们再来看。刷新OK底部了是不是就有了,哎,底部有了以后,那这个底部变现有了,那接下来就差我们布局这个头部的内容了,对吧,那先不管它,那我是不是还有左侧左右两个页面,那同样的道理,左右两个页面我需要也给它包含进来,对吧?那这里面CTRLCCTRLVV3个,那这个。
06:04
左的我就叫它left啊,右的呢,我就叫它right,那同样我们给它起一个名字,这个class我们叫做什么叫做left啊,Leftft这个呢,我们叫做r rt RA,那同样因为最终我们都要往右侧页面跳,所以在右侧的页面中,我们给它起个名字叫right啊好了,那这块的宽度呢,不能是100%的,比如说它这块是15%,对吧,那它这块呢。15%,他的话85%呗,是吧,那他的WD就是85%,OK,搞定搞定以后同样他们都要需要有边框对吧,那需要有边框在。这个格鲁贝CS里边,其实这个top啊,我不应该这么去写,我们给它单独做一个边框吧,比如说BOT Bob border杠,BOO,诶。只要你用它,那就代表是下边框对吧,那再来一个build left,然后再来一个border。
07:00
呃,Left呢,B-l left等于epx so l l,井号CZ,也就是说左侧的边框对吧,那同样你要是写右的了,那我就包的杠。Rap。然后buildd啊,杠IPSO,然后井号C加COK,好,那这几个样式写上,写上以后,那我是不是在引袋子里边继续给它加就行了,顶部的我们需要有个下边框,所以我这里边给它加一个包button,然后这个右侧,这个左侧呢,我需要有个右边框,对吧?所以我叫包the right啊左侧边框暂时不需要啊好了,那现在我们来看刷新。诶有了对吧,有了以后注意它的高度实际上是没有那么高的,对不对,那我们需要把它高度延伸到我们整个这个高度,那我们就来看一下这个高度大概有多高啊。来先看我的整个浏览器的高度多少,463对吧,463减去减去什么,减去我的这一部分的高度吧。对不对,那其实我们这块不用他看我们直接拿标尺量一下,是不是也可以找到我的这个标尺工具,然后呢,在这块我们给它变成什么呀,变成垂直的,然后从这到这啊,应该是700多对吧,700。
08:13
不知道吧。700多对吧,那我们先不管700多少了,从这开始我们量它就行了,是吧,那这块呢,是不是就是五百五百八十五对吧,那OK,我们把它去掉啊,那我们就单独给它来设置了,对吧?Top的格,Global的CSS里边。啊,在这块我们来一个这个点,呃,高杠。585好了,那he体为585PX,那我在这个这个里边,我是不是再给他加拉的时候,就要给他一个什么呀,H-585啊对吧,那现在我们再来看刷新。诶没问题了,但是哎哟是不是超了很长啊,看到了吧,哎,超了很长啊,超了很长,那同样那怎么办,因为他给了这个下拉的这个条啊,所以我们对应再去减去这些啊,减去这么个大概这么高度,刚才我们量的可能不对啊,那这块至少有100多我们给他。
09:05
剪一下吧,来,先把这个。只改了,比如说改成485啊。名先没改对吧。刷新。四。400吧。404。刷新我瞎给的啊,深的是是我瞎给的,好了,现在现在不出现什么,不出现这个纯子滚头条对吧,然后我再往上加他,那你看。现在是这样的,对吧,我们先来选择一下啊。这边因为这边现在没有高度看到了吗?第二个现在是404,这是我们给他设置死的这个高度,对吧?因为这里边我们引入文件是没问题的,但是它实际上是没有内容的啊,所以在这里边怎么办?我们先给他一个内容啊,我们先看一下什么不方便我们看啊,叫做我是左侧内容啊好再来刷新。OK,在这边是没问题的,对吧,那接下来就差我们给他的这个高度啊,那我们再量一下高度是不是量错了吗。
10:02
嗯,这里边。从明开始。到这确实是。嗯。八。585确实是585是吧,那OK,我们再给他啊。在这里边再给回他585PX,然后我们来再来刷新一下。但是你给他585,他下面会超。超出这么大一块是什么原因,我们来看一下啊,下面有没有东西。对。有个A。哦,这怎么这是我右边的东西了啊,我说怎么在一直下面有东西了,那我们看啊,把右侧页面我们也写上啊,叫做我是右侧内容,那右侧内容肯定是在这面显示,但它右侧现在在哪是不是在下边显示,对吧?所以他们两个我需要一个什么,一个左浮一个右浮动嘛,哎,所以在这里边。同样,格罗伯,这里边我来一个点F。
11:00
好。啊,叫做float left,然后再来点FR,叫做float left,啊好了,那这里边在这个同步这里面,我是不是再往里面加加一个FL,这个再加一个F。啊,是不是这个意思啊,一左一右,但是现在咱们来看啊,它不一定能上来,为什么?因为它的宽度我们给的太宽了。不能给太宽了,是因为有这个边框,我把这个边框先去掉啊,来再来刷新。你看是不是上来了,但是我加了个边框就多了一项数,是不是就不好使了,哎,所以这个left我需要给它干嘛呢?再设置一个啊,但是什么呀,让它变成什么这个怪盒啊,点box啊,点box等于什么呢?等于这个box,呃,Boxx box-size等于border box啊那我这块就这border。Bur book什么啊,那所以在这个life,呃,不对,是在这个里边,这个里边我是不是要加一个加一个什么,加的一个这个,诶错了啊哦。
12:00
给了边框以后,我再加一个u box,好,这个时候我们再来看刷新。OK,这回这么没问题了,对吧,高度也没问题了,然后这个里边呢,注意啊,它看好了它的这个东西是不是有这个大概这么几项数的这么一个没接没融合呀,哎,所以我给他往上来来一下啊life呢和这个right他俩应该都是对吧,因为只是right,我们没给样式啊好了,那我们找到这个里边。这个叫什么呢?叫做点left逗号点right,让他们两个的Mar marin-top负五负5PX负PX,那那往上去,那这个时候看来刷新。融合了对吧,那好了,那现在咱们来看我的头左右这三个页面是不是就搞定了,哎,搞定以后,接下来我们是不是就要写这三个主页的效果了,没错吧,那我们先把这个头部啊先完成那么一样,在完成头部之前咱们来看啊,我相信这里边你看我选择它啊,刚才大家应该看到了,这个右侧的实际上高度是没给的,看到了吧。
13:09
看右侧高度是不是只有一百五啊,哎,也是默认的这个高度,那我们需要把右侧是不是跟左侧是一样的,所以在我右侧的这里边。我们也需要给它加一个高度叫什么叫做H杠。H-585这么一个高度,好了,给完以后,现在我们再来刷新。OK,这回没问题了啊,这回没问题了,你们可以看一下来把它选择你看。这是他顶上那个内容啊,我们应该选的谁选的是上面这个啊好,你看这回是不是就整个这块了,哎,好了,那他完事以后,那接下来。我们就要开始做我们的头部内容了啊,那头部内容我们先看一下你的头部,头部内容还比较简单对吧?先是有这么一个div,然后这个div呢,是靠右侧紧靠右侧的对吧?然后有这么一段内容,然后下面呢,又是有一个div,分成了什么左跟右两部分啊,那OK,我们先来把它做出来啊,在这里边我们先找到它的头部,头部这里边我们说了有两个div对吧,一个div叫做井号top。
14:09
然后呢,在这里边呢,我们有一段内容啊,内容叫做MM。叫啥来着忘了。啊,就这个CTRLC啊这里边。没有超链接,但是退出是个超链接对吧,所以在这里边我们也要给他加上啊,把这句话给他放过来,放过来以后这里边我们应该给他一个什么,给他一个A标签啊,A标签结束的A标签。然后。H ref,那同样这个变成加粗了,我们给他一个B标签,结束的B标签,然后最外时候我们再给他套一个SPA标签,然后。结束了视盘标签好了,那他需要做什么事呢?其实他他的话啊,我就不给他ID了,我直接给他class,我们做了宽度等于100%,他就是100%宽对吧?但它的内容需要向靠右,没错吧,所以这里边我们把这个文件先连过来link,然后一样还是什么当前目录CSS目录下边的哪个文件还是格萝卜的CSS对吧?那格萝卜的CS里边我是不是就需要再去添加,添加一个什么,添加一个叫做点test,它刚right这么一个家伙,让它变成test的刚right,所有的文本就变成这样了。
15:21
啊,不对,Takes-A等于I,好了,那现在我们再来看在这个。Left这里边啊,不对,是top里边啊,我就要把它给它再加一个什么,加一个test,那这个时候我们再来看来刷新。是不靠右了,哎,靠右了以后接下来我干嘛,是不是就该给他一些它单独的样式了,对不对,哎,给他一些单独的样式,比如说它的这个拍ing啊,对吧,它的背景颜色啊,其实这些我们也可以单独来设置啊,也在格global里设置吧,比如说这里边我们给它来一个点BG,呃B吧B,然后叫做什么叫做这个BF7。
16:00
然后。Back background井号。F7。F7。七。怎么没有这没匹配到这个颜色呢。好了,那这个背景颜色我们给他加了,那同样它也有它的这个高度对吧,那高度的话,呃,我们就不给他了,我们一会儿再单独来设置吧,啊怎么都得设置它。然后这里边我们给它加一个叫准。BFC,现在我们先来看啊,有没有效果走你。是不是整个这个有了,哎,接下来设什么,就设置它的这个拍顶值,让它给它加大就行了,是吧,不需要给它设置框高啊,就像给设置拍顶值那一样,这里边我可能我需要去连接一个页面对吧,还连接一个CSS文件,比如CSS这个是谁呢?是top的点,这个CSS也就是归top所有的对吧?那这里边我们再来新建一个H文件啊,不是A是CSS文件吧,新建一个叫做style文件,叫做top了,那top这里边我们需要设置,不管设置谁,我是不是要给它先起个名字,比如说起个top啊top。
17:03
求top好了,那在这里边,那就是点top,我们需要给它的判定,比如上下为十,左右为20,那这个时候我们再来看走你。变大了对吧,但是整个内容它都变大了,对吧,所以我们这里面需要给它做一个什么,呃,不对,是box,然后给box。好,刷新,OK,这回又回来了,对吧?哎,亲爱的会员,什么什么欢迎回来,但是这个字啊,有点太大了啊,我们在云端用不着给那么大,我们可以在这个全局的文件里边给它设置一下它的这个字体的大小,叫做放杠,Size SI默认都为实时小数就可以了啊。好,刷新真的缩小了对吧?好了,那这块完事以后呢,接下来就是什么,就是我底下这部分了,对吧,那底下这部分也一样,在我的这个top的合德波勒里边,同样底下又是一个div对吧?在这个div里边,它的这个宽度呢,也依然是什么100%吧,然后呢,它还需要干嘛,它基本上就没什么,它里面会有两个子元素对吧,一个比如说class叫做logo啊,然后还有一个是统计的,对吧,那再来个div,比如说叫做class,嗯,咱们给他一个统。
18:15
统计统计,统计叫做呃,Stats。啊,好了统计对吧,那OK,给了这两个以后,那接下来这里边是一个什么,是一个A标签,A标签里边配合一个image,然后当前目录,比如叫image下边logo加PNG啊,当然我还没有这个对吧,所以我把它拿过来啊,找到我们的后台这里边,这是我之前写的,里面有两张图片,还是用这两张图片啊。然后呢,把它拿到我们今天这里面来。好,翻过来一面积有了,那OK一面有了,现在我们再来看这个页面。刷新。图片是不过来了,哎,图片过来以后一样,他也需要干嘛,做一个填充吧,对不对,先咱先不管它啊,然后下面还有一个叫我是统计的内容啊好了,先把它这个基本样式给调完,你看它俩现在是一上一下对不对,而且它出现了这个垂直的滚动条,那我们先要干嘛呢?这个第一个它是FL对吧,他我也给他FL。
19:15
FL。它也一样,FL好了,保存一下,在这里边我们再来刷新,刷新完你看现在是不是就一左一右了,哎一左右,那接下来我们给它宽度也设置一下,比如说它的这个宽度它占多少呢?占20%吧,那要是占20%的话,它的宽度是不是相当于80%了,对吧,那同样我们都让它变成什么,变成这个怪一盒啊,那这里边也一样变成。灌一盒,那现在我们再来看,走你。OK,没问题了,对吧,这边有距离了,然后接下来我们是不是设置它就行了,那就找到logo啊,在top这里边我们找到点。Logo logo给他一个pading,比如pading left为30像素。等等往里面来一来对吧,在这个位置好了,那这个位置完事以后一样paing top,我们点击一下啊,或者marin top marin top10像数。
20:08
让它下来,OK,在这,然后接下来呢,就是它这个右边的文字对吧?右边的文字我们起名叫什么呢?叫做这个,呃,Sta ts对吧,我们先给他一个边框啊BRDR1像素实现的红色边框,这只是为了让我们做调试用的啊好了,这个边框就在这这么大对吧?那么同样这个里边我也让它下来,那比如说这里边Mar尖marin margin杠。泡泡吧,我给了30像素,好了,让他先下来。好了下来了对吧,下来以后啊,我这个文字注意你看人家在这里边写的是大概在这个位置对吧,而我的这个呢。是在这儿啊,因为我这个给他这个宽度也比较宽啊,所以我也可以再调整,比如说咱们来看啊,在这里面我们给的宽度样式都有哪些啊有。你看二十八十五八十再没了是吧,比如我给的小点了啊W宽度,宽度刚到了刚六零。
21:05
WTH这个宽度就是60%对吧,所以这个时候我只要给了它宽度小了,那咱们来看啊,我再去找这个谁呀,找我top的这里边,那它就是。六零,那我就不让他FL让他FR了啊,那你看这个时候刷新。向右边。You know。宽度在六,零。W杠六零。FR。诶,没问题啊。怎么跑到这里来了?他呢?FL。宽度在21%个21%个60%,这是没有问题的吧,是不是我写错了,来看看60%W杠六零没有问题对吧,我们来检索一下啊,来整个人数。在这里边我们找到这个家伙。
22:02
来看一下啊。嗯,给他加了一个边框,加了一个这个套,这都没问题。对吧,然后呢,在这里边有一个。Logo现在是不是浮动的,是浮动的对吧,宽度在2020%,然后。给了这些,那他呢?它的F2。他的F2怎么没有起效看。它的FR没有起效的原因。我们要看一下呃,Border margin,然后这个FR应该是没有问题的,FAOT啊,才打错了是吧,我应该叫f o at啊,所以在这里边我们找一下那个FR叫floatat这个就好了啊来这个时候我们再来刷新。OK,这是不就完事了,哎,完事以后呢,接下来是不是在这里边我们就去写那个东西就行了,那包括要这个div,比如说这里边呃,Top的CMS啊,这里边比如说我给了Mar top了,那我同样我再给了Mar red,距离这边我也给了30像素啊,让他往右边来一来。
23:08
那你看是不是过来啊,哎,过来以后,现在接下来往这里面去写内容,这里面写的是什么内容,那我们就要看一下了啊,找到top这里面,先到top这里面把这块删掉,删掉以后我们来看这里面有什么,你注意它有一张图片对吧,先是有一张图片,然后后面是什么一段内容吧,啊一个图,一个图带一个内容,一个图带一个内容,注意这个图我是用字体图标做的啊,这个字体图标呢,我们在第二阶段我会详细给大家讲解,那么在这个阶段呢,既然我们用到了,我就教大家怎么去用,包括你看这块是助理图标,这块是不是也有图标,图标对吧,都是用图标,这些图标现在我们已经不需要用背景图定位了啊,因为已经有这个阿里,比如像阿里已经给我们提供了大量的这种字理图标,那我就没有必要让让它变成图片了啊,因为要是你比如说你要是这块S背景图的话,那么每次你刷新它是不是都要去请求去加载这张图片,对吧?哎,所以他。
24:01
会浪费我们的这个带宽啊,而而我们使用这种字体图标呢,它就是一个字体啊,它就是一个字体,所以我加载代码的时候就可以把它加载过来,对吧,所以它的速速度也会快一些啊,效率会快一些,好了,那咱们来看在这边有这三个元素嘛,那我们就三个div对吧,Div里边有个I,然后I呢,就是我的这个自己图标的内容了啊I,哎,后面我们再给个SPASPA呢,我们就给这个,比如今日发表文章300篇,诶放到这来。好,这是一个,这里面总共几个三个I是吧,那三个这个DV啊不是三个I来CTRLCCTRLVCTRLV,这是第二个内容是今日文章评论。这就是我们做了一个简单的统计啊,然后还有一个什么今日注册用户。CTRLC也拿到我们这里面来。好了。现在咱们再来看我们的这里面啊,找到它来刷新一下。
25:01
所下它是什么都是放到一起的,因为什么,因为div嘛,它是占这个整个的,对吧,所以这里边class我想到FL,然后这里面也一样,Class fl,还有一个也是class fl,对吧?所有的都让它进行什么,进行了一个浮动,但是他们一浮动是不是就变成这样的效果了,哎,那OK,他们浮动完以后呢,接下来我是不是要给这个图标啊,那图标怎么来找呢?咱们来看,在这里边我们输入icon放点CN这个网址,这是我们阿里图标的网址啊,然后呢,在这里边你第一件事干嘛先去登录啊,我已经登录过了,你是用get哈去登录,或者是用你的微博去登录都可以,登录完以后你在这里面就搜你的想要的图标,比如说我想要一个用户的图标,对吧,小图像的,比如我们就给个用户来搜索,搜索完以后你看各种用户图标是不是就有了,有了以后接下来干嘛呀,接下来你就找一个用户,然后添加到购物车对吧,那你看购物车里是不是就有了。购物车里边有一个,你可以干嘛添加这项目啊,那我这里边做了一个后台模块,你可以在这新建一个项目,对吧,或者你用这个都可以啊。
26:01
这块是我自己创建的,通过点它创建项目名称对吧,建完之后点确定就可以了啊,那么我点它,哎呦呦点错了给删除了啊来随便再加一个加到购物车里边,好点开购物车,然后我们添加这项目,然后我们点击。返回一下啊,就这个就行了,然后确定对吧,但你看是不是牵扯到我后台模块这个项目了,对吧?然后呢,我们在这里边选这个found class啊,字体类我用就是它有三种方式,加载图标的方式,我们现在就用在线的方式就可以了啊,然后这里面你看他告诉我有新的代码,我是不是点击生成,生成完之后我就复制这个代码,这就是CR文件了,看到了吧?哎,复制这个CSS文件,这是第一件事。在我的top里边。Linkk去加载HTTPS冒号,把这个文件地址复制过来,是不是这是我的CS文件地址,哎,复制过来以后接下来干嘛呢?接下来你看我们是不是要用用这些图片。对吧,用这些图片,那咱们来看,刚才我们原来这里边,因为图片我都提前找好了吧,所以这里边我们这个是哪个我就用哪个了,这是两个文章的个样子,两个文章两个文档是不是他呀,哎,这里面你放的是不是有复制代码,点击复制代码复制完以后啊。
27:16
然后在这里边咱们说了,我是不是给I。当这个字体图标了,所以在这块我直接给他加一个class,把这个代码复制过来就行了,行了以后现在你看我刷新能出效果吗?来刷新。有没有有吗?但是只是只是什么,只是一个小口,看到了吗?这是什么乱码了啊,乱码了我需要怎么办呢?我不光给这一个属性,每一个我都需要给一个公共的属性,叫做icon放,Icon放哎,你只需要做这三件事就可以了,第一件事是干嘛呀,把你的这个图标啊都加入,把你需要用的图标都加入到你的这个。项目里边对吧,加入项目里边,只要你加一个它就会代码就会更新啊,更新你就得复制这个最新的代码了啊,那复制完以后呢,把它复制到我们的这个另一个标签里边,要我们另个标签能连这个C的样子,接下来干嘛?接下来第二件事就是把这个名称是不是放到我的类里边,定义一个class对吧,放到类里边,然后在那后面我再指定一个公共的Su放这么一个类样式啊,这个公共的ICU放也是在我远程加载的这个文件里面去定义的啊好了,那现在完事以后,你看我这个时候再来刷新。
28:22
是不是变了对吧,那它能变后面这几个是不是也一样的道理。在这里边咱们来看,这是一个搞定了,第二个class也叫icon OT放的,但这名称我还不知道对吧?第三个也叫class icon icon FT放哪好了,那还剩什么,最后这两个图片啊,我们去找一下,嗯,它这两个用的是哪个,看一下啊,一个是这个,一个是小人的啊OK,那我们来看啊,一个是。带个评论是他呀,对吧,另外一个小人是他啊,叫做用户用户icon杠用户,那OK我记住了啊。
29:00
这是。评论的这个呢,是。Sun杠用户好,现在我们再来看。走,你。OK,搞定对吧,哎,搞定以后呢,他们之间肯定也要有点距离啊,所以在这一块我们给他设置一下,那也就是它里面的div啊,那搞到top的CMSCSS叫做它里边的div,给他一个Mar Mar marin杠,Right,每个之间给他15像素吧。再再来刷新。OK,距离有了,有了以后,接下来咱们是要把这个图标的颜色给它改一下,对不对,哎图标颜色怎么改呢?那在这里边找到这里边的,这里边有个div div里面是不是有I标签,哎,这个I标签,比如说我给他看了变成什么呢?变成红色啊,字体颜色变成红色来稍息。图标是不是就变了。看到了吧,哎,那一样接下来他是干嘛,他是不是再往下一点,所以我的Mar top变成60。等着我下来。
30:01
好了,那有点太大了是吧,50就可以了啊,那50吧。Tony OK,完事,完事以后最后一件事干嘛,是不是卸磨杀驴把这个家伙给它去掉啊,所以我们把这个边框给它注射掉,注射完以后,现在我们再来看我的这个。统计是不是就做好了,哎,那到这为止,我的这个头部是不是就已经OK了,哎,头部OK,接下来我们做什么?再做的就是我的左侧内容了吧,那好,那这节课我们到这里,下节课我们再来做我们的左侧内容。
我来说两句