00:00
好,那我们继续来上课,那么这节课呢,我们再来开始便利我们首页的这个主体的内容,对吧,也是从公告开始,便利公告模块啊,然后我们这个推荐的文章模块啊,对吧,还有什么,还有我们的这个精品的相册模块啊,对不对,把这几个模块我们再给他做一个啊。编写啊好了,先看我们的这个最新公告模块,那么最新公告模块呢,在呃,从这对吧到。到这没错吧,然后呢,在这里边可能分为两个元素,这是一个元素对吧,这下面是一个元素,上面元素呢,主要是写的这段内容,而这个下面元素呢,是里面有四个div div呢包含了一张图片,然后一个标题一个描述,对吧?哎,给了这三部分啊,所以在这里边,那我们也开始进行来给他编写,咱们再来看,同样我们需要新建一个。主题内容啊叫man慢叫M全码好了,在慢的安全码里面,同样我要引入csi文件,那我这里面也创建一个叫做。慢点CSS的文件啊,那在慢点安全码里面,依然我需要干嘛呀,先去包含一下文件啊,叫做这个,呃,格罗某后期我们肯定都会整合到一起的,所以大家不用担心啊,在CS下面那个logo下面CSS,这是我们的全局公共库,对吧?然后在这里还需要什么,还需要这个叫当前目录,CSS下边的叫做manin慢点CSS。
01:19
好了,然后在这里边我们给他一个div起名,叫做什么呢?叫做公告notice。好了,然后notice是多大呢?我们来看notice是不是也是这么大,哎,满屏宽的对吧?那这里边我们就直接给它起一个class,诶,错了啊,叫做clala classlas class class,给他一个什么W-1200,也就是说我们先把它的这个宽度给它设置好了,好宽度给它设置好了以后呢,所有东西都在这里面显示,显示对不对,然后呢,再给他设置什么,再给他设置一个,这个里边有两个元素,一个div,再来一个div,对吧?这里面是内容,也就是notice no,比如说给了个class叫O。杠content行,就这个名,然后在这里面呢,再来一个class,比如说这个叫not杠啊,这是我们的标题,那标题叫什么呢,叫做。
02:08
呃,按LT。分号叹号对吧,然后杠杠杠杠,然后再来一个。RGT这里边,然后中间写什么呀,写的是最新公告,最新公告啊好了,那这块完事以后,接下来我们再来看。嗯,不是这个页面了,我们一样打开。执行公告是不是在这呢?哎,我们给了1200以后需要给他什么,给他一个M杠凹凸,让它干嘛变成自动来,是不是变它自动了,但这个自动尽量我们不要这么去写啊,为什么呢?因为在这里面我们给了M杠度,它是表示的是零对吧?上下为零,左右自动那么一样,这里面上下我也直接给了一些间距了啊,所以我在这里面进行设置啊好了,找到这个我们给的是井号他对吧?这是我们的最新公告。
03:05
最新公告模块啊,在这里边我们给它设置一个什么,设置一个这个marr Gin mar9上下为它为20像素,左右自动啊,也就是上下我给他一些距离,然后再让他开始做什么做这样效果好了,对吧,然后呢,同样这里面我们为了方便我们的调试啊,我给他包点,然后移像素实现呢,红色给它这么一个边框来小心。OK,在这呢,对吧,在这以后接下来呢,我们就开始去设计里面的东西了,对吧,因为什么它的外层没有什么可设置了啊,但是有一点啊,你看这里边它是不是有段距离,这块是不是也有段距离,哎,所以这里边我们就给它一段距离啊,这里面来一个叫padd拍定,默认为20。再来刷新。OK,变大了对吧,但是我给了拍顶变大了以后啊,它是不是整个元素就会超出了1200了,所以这里边我给了什么呢?给了一个叫做border-box size。
04:02
等于border box,然后这里边我们再来刷新啊好了,这个时候我的我才能让这个元素保持什么,保持宽度是1200吧,哎,好了,那这块完事以后,接下来呢,我们再来看,开始去设置它的头部了,那头部就是直接点点谁呀,点这个叫做notice。开头这是它头部的文字内容,对吧,我们先给它放大一下,比如说给他来个26像素。26像素,然后呢,我们给它颜色也变一下啊,看了变成井号C,呃,000,然后给它加粗等于BD。这里面我们再来刷新看一眼。走你OK,没问题,没问题,以后他是不是居中啊,那居中的这个公共样式我们已经写好了,那直接我们找到公告,这里边我们有一个test,有个class对吧,直接给他设置test-center,那整个这个内容是不是在这里面就进行居中了,对吧?那OK,我们跟他之前的也比对一下,它的颜色可能没有我们这么深,对不对?哎,我们的颜色是比较深的啊,那我们也用也换一下啊,别用这个零零了,我们用一下什么呢?用一下这个666吧。
05:10
井号666好。这个数再来刷新。OK,这个差不多对吧,好了,那公告的这个头部已经有了标题有了,接下来是我们公告的主体内容,那在这里边主体内容在他对吧,主体内容里面会包含这么一个div,然后这个div呢,是真正我们的内容呢,我们就起一个叫做notice notice notice杠。Con的内容,它已经有内容了,这里边咱就叫。内容的。呃。这样我们把它改一下,它叫notice杠,Botm啊底部,然后它呢叫内容cont,然后在这个内容里面会有什么,会有图片对吧?那也就是说在这块我们给他一个div,这里边给他来一张图片,那图片有可能是带链接的,所以我们还是给他A标签啊,然后再来图片,那这里边我给他一下叫做以魅,下边我们有一本咱们这个细说PP的书,对吧?然后咱们就用这个图书当做我们的封面啊好了,那这个第一个内容我们搞定了,那接下来它还有它的标题,那这里面继续div,标题也有可能被这个超链接,对吧?所以我再加一个A,然后这里边我们给他写上一个这个标题,它的标题写的是什么,我们看一下啊。
06:30
叫做。It驱蚊对吧,比较简单啊。嗯,这里。ID曲文,然后它有标题,还有一个什么,还有一个子标题吧,就是它的这个副标题对吧,然后这个副标题也就是它相当于相当于它的描述一样啊,那我们把这个描述也一样,但注意这个描述它后面是不是有点点点点省略了对吧,也就是说超过了多少,它就会干嘛显出省略号,所以我给它复制一下CTRLC,然后在我们这里边也一样。把这个描述的话,就不会有超链接了,我们就把它删掉了,直接给div就可以了啊,那我给它多一些对吧,因为我们也不确定多一些超出以后是什么样效果,所以我们先给他,然后接下来呢,那我们对这个注意啊,整个底部是不是这一块,那整个内容是不是单独就是这么一个,它复制一个出来,是不是就是多了一个内容,所以在这里面咱们来看啊,我来刷新一下,你看这里面是不是就相当于两块内容了。
07:23
对不对,哎,那好了,那我们开始进行对内容的这个设置啊,来找一下在这里边。叫做。公告内容。给它找到它找到这个内容以后啊,我们先给它一个边框,我们先看一下包ER1像素实现的红色,因为目前为止它还是块状元素,还会独占一行,对不对,所以呢,我们需要给它进行一个什么,进行一个浮动,这是第一点,第二点呢,我还要给他设置一个什么,设置一个宽高,让它left,然后呢,给它设置一个这个宽度,比如说宽度咱们注意啊,总共宽度多少,总共宽度是不是1200啊,然后呢,这里边我要放四个元素,那是不是1200除以四。
08:04
对吧,哎,然后呢,这里面还会遇到个什么问题呢,有可能啊,我在这块算完以后。比如说这里边啊,我们给他1200除以四了,就是比如说一个是吧,一个是300对吗?那一个是300,我还有可能什么,我是不是还有可能不可能让每个元素挨的那么近嘛,是不是还有些间距啊,所以这里边我就直接干嘛呢?咱们来看啊,我就直接给它一个,呃,1200除以四就是300对吧,三四十二嘛,那我每个就给他二百八了啊,二百八的这个宽度啊,那这个时候我们再来看。刷新,诶是不是又缩小了。哎,这个时候他就已经缩小了啊,缩小以后咱们那个最新公告,咱们看一下公告,公告的那个边框咱给它去掉,不然它会影响到我们对吧?来刷新好了,给它去掉了,那接下来就是就就是那个内容这块嘛,对不对,然后这里面还有一个咱们再给它直接设置一下叫准点呃,O。Fat,让它距离上边in。
09:00
距离上面20像素啊,给它拉开距离,别挨的那么近对吧,好了,那距离上面20像素,那接下来我就开始设置这些了,对吧,那它是280,那它里面的图片呢,肯定也是280,那就是notice no PI。The notice a god。没给是吧,那这里面我们给一下来,Class叫做notice notice notice,杠杠杠,咱叫什么呢?就叫image吧,然后这个呢,就是notice的标题class CLA,有标题有了是吧,那就是no。C。E p Du,产品的标题叫做tle,对吧,然后这块呢,就叫产品的图片吧,P Du杠,Image,然后还有一个产品的描述,那再来一个class,叫做notice杠,Pro杠。DESCR就直接C简简写一点啊好了,那这块完以后我们再往里续写。
10:04
叫做O杠,呃,P的这个。一倍几这个图片对吧,它的这个宽度。也依然是多少100%吧,100%的宽度,然后呢,那它要是100%的宽度,注意我的图片会变吗?来先看一下会变吗?不会因为什么,因为里面有AA里边还有那什么还有image呢,对吧?所以这里面我直接去找找谁呢,它里面的image。直接是它里面以面积让它变成100%,好,这个是不是再缩小了对吧,但是第一个为什么没有缩小。第一个为什么没有做脚?呃,Not pro,我们来看一下啊,第一个里边我有没有加,是不是来把这几个加上去。算了,不用讲了,把它直接删掉就行了,是吧,因为它都是一样的,我最终只需要复制这个商品,CTRLCCTRLVCTRLVCTRLV4个商品。来,这回再来看刷新。OK,都小了对吧,都小了以后二百八我们给的是280,二百八可能也有点小,我把这个图片再给他重放,重放吧,啊不要。
11:04
不要给那么大。来,那这里的图片咱就变100%了,咱就给他90%啊,90%刷新,OK,图片还小了对吧,然后里面的内容呢,咱们来看啊,这个图片是不是在这里面相当于要居中啊,所以这里面我给他给谁给他的上一级也就是点no的image,让它里面的test杠等于center让它居中。走顶好了,居中了,居中完以后啊,再往下来看,咱们看什么,看这个文字信息了,对吧?一样啊,在这里边它的这个整个生产,我可以给他一个拍顶啊拍顶为多少呢?为十像数上下左右都为十,然后border杠不对,是box-S等于box让它进行什么central为这个是吧?好了,那接下来是不是就是写文对这个文字进行处理了,那文字在进行处理的时候,那我们就要看一下了啊。在这里边咱们来看文字是居中的对吧,这些文字都是居中的吧,那好了,那我们先让文字也在这里面先居中再说啊嗯。
12:07
来,给他一个。Build包一像素实现的红色边框啊,然后呢,再往下文字的,嗯,叫做pro的,它再往下文字,文字是title,有一个标题对吧,BD的一项数so。红色,然后再往下呢,还有一个一杠。Src吧,刚de sc啊,然后这里边还是一样包的一项数实现的红色,好了,那这个时候我们先来看啊,在这里面同样刷新,刷新完以后你会发现它是长这个样子对吧?大家想到文字居中很简单,那这里边我们文字居中,文字居中它也一样需要takes-then等于一个center对吧。那当然我也可以直接在标签里面加,是不是也行啊,因为我标签里面也写了,你像这几个,其实我不应该在这里面,我是不是应该咱说了这里ID区没要居中,那是不是我直接在这给他一个什么,给他一个配center,但是我这里边已经把这些代码都复制完了,我再写的话,我是不是这几个都要改啊,所以我就直接在样式里面设置了啊。
13:10
好了,这个标题第一个标题搞定了,搞定以后我们把它的样式也同样设置一下啊,这里面放杠。Size给他多少,给他这个20像素吧,啊,然后这个fo杠位Bo让它加速。走你OK itd驱蚊有了对吧,有了以后呢,这些边框剩下的边框咱没用的就可以给它注册掉了啊这图片呢,咱们已经调试完了,那你就给它注掉就好了,对不对,然后it趣闻呢,是不是我也调试完了,调试完了我也可以给他注释掉了,那接下来什么,接下来是不是就是我这个底下这个内容了,哎,这个内容我们也一样,给他一个pad pad拍顶,比如上下左右都为十。然后注意。好了,有点距离了对吧,然后呢,左边的内容是不是要差不多,跟书差不多,咱们来看一下他这块是怎么写的啊。左边的内容。
14:01
是不是跟书差不多对吧,哎,没有那么太大对吧,但是他这书的外层还有一层淡淡的边框,我们的书的外层。没有这种单的边框啊,所以书的外层书是谁书是这个一面积吧,我们在他这边给他一个包着移项数实现的井号CCCC。来,走,你OK。一层淡淡的边框有了。来,你看它那里边是不是也是一样的,对吧,我们这里边是不是也给它加了一层蛋蛋的边框,好了,那加完以后它是以边框为主吧,看它是不是以边框为主啊,在这里边它的文字比一个边框近一点,对不对,也就是说在这里面实际上有一个又有一个什么内填充嘛,那在这里边。到pading pading-left吧,我就直接拍定杠left,给他个20不就完事了吗?对不对?好了,这个时候咱们再来看刷新。是不是相对填充了对吧?哎,同样我这里面可以设置什么设置叫做box。Box size等于border box,那变成什么变成怪?
15:02
给他灌一盒对吧,他经常这里边也是灌一盒,因为外层我就给它设成灌一盒对不对,好了,那现在这块完事以后,咱进来什么是不是他要。超出的部分,因为我们不确定到底超出多少,所以我就给控制在一行,控制在一行是不是给他做一个省略号,那做省略号超出不分显示省略号,那直接给他一个什么这个啊属性我们需要去单独去记,因为这是我们后期的属性啊,给他第1OVERLO等于开展让他操作部分隐藏啊,操作部分隐藏看到了吧,现在有操作隐藏吗?没有啊,没有这进来干嘛呢?我说他强制在一行,也就是我们需要用到我们的这个啊,外杠space为no what,这是什么意思?不换行啊,你看啊,我现在不换行来刷新。是不是都在一行了,都在一行了,接下来可以干嘛,我是不是可以超出部分隐藏了。啊,是超出部分隐藏了,哎,超出部分隐藏以后,咱说我超出的东西有的时候可能会被截断是吧,那怎么办?我给他一个小小省略号啊,那也就是W。
16:02
给他一个wordwap,然后。呃,我的爸爸不是这个,嗯。叫这个takes overflow啊,不是它给它takes-o v o v overflow等于什么呢?等于它让它也变成什么,变成省略号啊,也就是说在这块内容中,我主要是设置什么设置啊设置。如果啊,这个文本内容啊,超过超出,超出后看完了显示省略号,选省略号啊好了,那现在咱们来看,在这里边我再来刷新啊,刷新以后是不是都省略号了,对吧?那这个边框我们自己搞定了,搞定以后,那接下来边框我们依然不要了啊,不要了,不要以后现在我们再来。反馈我们到这里边给他刷新一下。OK,这个边框也完事了,完事以后是不是就剩它最外层这个外边框了,这个最外层外边框不能是红色,而是一个这个深色,对吧,也就是说我们给他再来设置一下,找到我们的代码,找到我们刚才设置为红色的这个位置,它不应该重色,应该是井号,呃,666。
17:07
深色一点,好,这个时候再来刷新。OK,没问题,没问题,以后他们每个之间是不是要有间距啊,哎,所以这里面我直接给他一个Mar Gin marin left,比如说我给他十项数啊,我先给他十像素,十像素肯定会超啊来诶,没超正好看是不是就可以了,但是这个666好像有点太深了吧,我们来看一下银内的边框是什么颜色啊,我们也来匹配一下来Co。这里CC看到了吗?那里头的呢?F7 OK,那把这两个颜色我们就变一下啊,这块就是CCCC,那C跟C的那个位置应该是F7。F7 F7F7,好,现在我们再来看我们的来。核心。OK,这不变回来了对吧,而且距离也都有了吧,哎,有了以后呢,咱们一样把它的最外层啊也打印出来,因为它现在没跟别的页面整合,对不对,最外层是谁,最外层是不是他公告内容,公告的内容,我要它的公告也是这个,我把它的边框再打印出来啊来边框再打印出来,我们再来看一次。
18:18
刷机。他最外层公告啊,他一打印以后,你看里面所有东西都那什么了,对吧,因为什么,因为它没有感知到里面的高度啊。Over,我们没给他设置高度对不对。来刷新一下。好了,这回你看是不是感知里面的高度了,哎,感知里面高度注意啊,这里边为什么它会换行啊,因为这个东西超出了,因为咱们一给这一项数是不是左右各两项数了,哎,所以这么说,也就是说我给的这个东西实际上是没有什么问题的,对吧?哎,这里边咱们给他来一个。去掉吧,啊知道长什么样就可以了,对吧。刷新OK过来了啊啊,过来以后,其实我们可以拿这个公告的这个宽度来比较会好一些,比如说这里边这是我们的最终的公告吧,来Bo风光的标题啊,或是公告一像素,So,给他一个红色,你看拿它做一个比较啊,在这里面一样,我给它刷新一下,你看。
19:11
它的两边宽度是不是差不多啊。对不对,这边是正好啊,因为我给的是十像素,那这里边我其实还有个内填充呢,对不对,那应该也让他往里边一点,是不是会好一些,那咱们这块就别给它十了,对吧?嗯,找一下。给他多少,给他一个八啊,每个月呢,减去两个。这个时候我们再来刷新。你看这边是不是也有空,这边是不是也有空了,哎,好了,那搞定了,搞定以后最终我们把这个不用的给它注释掉,那现在我们的公告模块是不是就完事了,那同样公告模块完事以后,接了公告的下边还有什么,是不是还有一个站位的一个元素啊,咱们来看这里面,诶不是它在这了,是不是下面还有个站位广告对吧?也就是我们的第二广告位对吧?所以在这里边,如果我在这块直接写成广告的话,咱们来看啊。
20:01
嗯,在这对吧,我给他写上叫做。广告。占位啊,广告站位的话,比如说我们给他来个div,叫做井号ad,给他来个class,等于什么呢?等于这个map two,再来个W,等于1200,好,现在我们来看啊,我们的这个什么效果啊。这里边刷新。没看不出来对吧,因为我们没去设置的,那在这里边我们来去设置一下啊。来拉到最下面这块完事了,叫做广告的站位啊。广告占位直接是点a dad的宽度,高度们宽度跟居中我们都设置完了对吧,我们直接给他强行给个高度,比如说给他300小数,然后B依然为粉色,那OK,现在完事以后我们再来刷新走你。有吗?是不是没有反应,哎,我看我是不是叫ad啊,咱们叫点ad,这里边ID叫ad了是吧,那OK,我们把这个ID叫ad的给它删掉啊,咱也依然叫什么叫class为ad的空格。
21:11
再来刷新。OK,没问题是吧,也上来了啊,上来以后,那接下来呢,再往下来的是什么,再往下来就是我们的这个,呃。编程语言这块了,对吧?哎,编程语言其实也一样,编程语言跟我们公告差不多,但是它唯独比公告要多一些,对吧,你看这里边先制它的标题,然后什么,然后是精品文章推荐对吧,然后再往下才是它的内容部分,而且注意整个编程语言这一块,它是不是有背景色的。这个背景色是不是一个F7,然后旁边你看上面是白色这块不有个淡灰色嘛,对不对,那OK,我们就先把它的这个外面的样式写上来啊,在这里边找到它还在这里边继续。叫做精品。文章推荐。
22:04
来个div。这是它的最外层是吧,最外层它有一个背景,然后在这里边才是它是什么,才是它的这个详细的内容吧,是不是这个意思啊,你看最外层一个背景里边放详细的内容,详细内容里面再分为什么,再分为这个头,然后这个内容的这个头就底部的头对吧?再分为底部的内容是不是这个意思。看那OK。那我就直接给这个起名了啊,比如说这个叫做ID啊,ID给他一个什么呢?给他一个AI慢杠article吧,AR t AR tle article文章对吧,那这里面就是class,然后也给了一个呃,Main曼杠arle article对吧?因为咱说了这里边你看人家原图这里面啊,最外层是一块对吧,然后里层又是一块,所以我给它它两块啊,给两块以后最外层它是有背景色的,所以我们给它直接加一个class,等于B。
23:01
就不是他的样式了,对吧,直接给他,然后还有什么呢,还有他的这个,嗯。背景颜色给了他就够了,对吧,然后他给了一个什么自动,然后再给他一个M杠幺二。哎,类似W-1200,它需要给一个W-100是吧,100%啊好了,那现在完事以后,接下来咱们把这块给个A啊,我们来看一下。然后。这里边。他。稍息坐下来。有个A确实能看到对吧,但是很小,因为我们没有给高度啊,好了,那小不要紧啊,那接下来我们开始去写它了,那写它的时候呢,我们把它先拿过来,CTRLC拿到我们这里面来。这叫做。首页。嗯,栏目精品文章推荐。推荐啊好了,然后点点点叉点叉对吧,它的第一件事,它的背景颜色先给它变成白色啊WH先给它变成白色再说啊。
24:03
好了,那我们来看一下,在这里面先刷新一下。哪去了?慢,Article。E我是把它的那个内容给删掉了吗?啊把内容把那个A给删掉了啊,所以他没有单位的好再来刷新。来这回是不是有了,你看整个中间这块是白色对吧,但现在比较小,我们看不出来啊,那先不管它了,那我们直接在这里面开始加内容啊,这个A我们也标了,这回应该给什么,应该有给div,它有一个头部有一个。底部对吧。这里面啊,咱就直接给他起名了,Class,这个叫做呃,A。Man article-T标题啊,这是头部的标题,然后在这里面呢,开始再来class,叫做manin-Bo button,然后它里边再去详细给它划分啊,那在这里边杠少一个a tle-button吧,啊在这里边我们直接是写它的标题就可以了啊标题呢,它也没有什么那个超链接对吧,直接就是这么一段东西,但在这一段东西里面注意啊,它这块是不是还有两条横线呢?
25:16
对不对,所以我们要给这个横线,这两个横线其实就是两个元素啊,所以在这里边我们给它单独去再划分一下看好了,比如说给一个div啊,然后呢,这里边再给一个div,在两个div中间我给一个span标签,然后写它的标题,标题叫什么名来着,叫做。呃,就变成语言是吧,那OK,它的分类名称就变成语言。好好了,那我一会就用这三个来组合刚才那个效果啊,那咱们来看在这里面我们去试尝试去做了啊,叫做man。推走对吧,他呢。先给他个边框吧,来UD包一像素实线的红色边框,然后现在我们先来看它的效果来刷新。有了编程语言在这呢,对吧,然后接下来呢,咱们一样,它整个这个内容啊,我们应该距离向上一些对吧,所以给他一个这个错了,它的这个应该是井号man啊,给他一个margin Mar。
26:13
间马上下为。为20左右为零。真的下来写啊。就是与上面远一点对吧,然后接下来就是什么开始去写它的这个内容了啊,那内容这里边一样,它的这个内容我们先给他一个class,直接让他什么case生产,让他先居中再说啊。刷新能居中吗?居中不了对吧?哎,居中不了原因因为它是什么,它是一个行内标签,所以我先不给他了,那我应该给谁呢?给他加一个T-center,让他先居中来。走你OK居中了对吧,但大家知道它的一左一右都是有个div的,对不对,有这两个div的,所以我把这两个div啊得给打印出来啊,这里边叫做它里边的div,我给它一个什么呢?给它一个宽度,比如宽度为多少呢?为这个150像素。
27:01
然后给他一个包的EPS so red,好了,也给他一个红色啊,现在我们再来刷新。是不是有这么两个了,对吧,但是它分上中下对吧,所以他们几个应该怎么样,是不是都浮动啊,哎,都应该浮动,所以这里面的div我们给它一个float left,然后再来点,这里边的SPA我们也给他一个fruit float left,好了,这个时候我们再来看。走,你。诶,确实是可以了,但是呢,这个元素是不是找不到了,哎,元素找不到了怎么办?给它一个o overflow等于hi d head。走,你。又找到了对吧,找到以后呢,在这里边注意啊,在这里边它并没有给我拿到这个居中,没错吧,因为什么?因为一旦我给这几个元素都浮动了以后啊,它并不会过居中,所以这里边那我就最好是什么,我可以不浮动,不浮动的话怎么办呢?我可以给它this play this play为什么唯一烂block是不是不会读占一行了,那同样他是不是也一样,我给他也是this play in block,哎,给他们来去做。
28:06
布局,那你看这是不是依然保持呢?哎,保持了以后,那咱们说了,那在这里边编程语言,这里边我要给这个编程语言放大,那直接这里面给他来个放到杠size,比如为30像素,然后form杠。VT-W,比如说给他来个厚加粗,加粗完之后我们看看什么效果来走你。大了也出了对吧,哎,文字呢,我们比如说换颜色的话,C就给他一个这个黑色。我们第一个标题有了,那同样这两条线,这两条线是不是要向上啊,所以这两条线在哪呢?在这呢,对吧,我要想给它向上的话,比如说给他一个marin-top,比如负十像素是不是就往上去了,那这个时候来看走你。诶有用吗?啊没反应是吧,那没反应的话怎么办?咱们可以给他一个定位啊POI position等于什么呀,Really,然后top再给他什么负十相除,这个时候你再来看能不能上来啊来周尼。
29:01
诶,没问题对吧,但负十可能有点大啊,我们给他一个负八就可以了,负八。核心是不就行了,同样那这个边框呢,我们不能光给它啊,直接给他一个就行了,八一项数直线的这个来个井号CCCC。啊,就是我们拿一个元素当成一条线。来显示,你看这个时候是不是就有了,哎,如果感觉这个蛋的话,我们给他一个井号666对吧,我没有完全按照我之前写的那个样式对吧,那你看跟我之前样式对比是不也差不多是吧,但是他这个可能会浅一点是吧,我们这个可能会深一点,所以说吧,哎,好了。然后这里边一样啊,我们也可以干嘛,它这距离挺大的,对吧,那距离挺大的,在这个div里面,我们也可以给他一个拍p DD ing。然后冒号特为上下为15,上下左右都为15吧。在。往下刷新。是不是就过来了。
30:01
对吧,有点距离了啊上下,那上下它近一点吧,来上下它30,上下它30,然后这个让他干嘛,这个让它,嗯为零为零对吧,当然他没有什么,他没有做这个,哎,不对,给错人了,给div干嘛啊,不是应该给div应该给谁啊,应该给他上一层对吧推对吧,给他啊操作部分我也不需要隐藏了,因为什么没浮动啊。好了,这时我们再来看。总理。距离是不是就拉开了,哎,好了,距离拉开了,那接下来是什么?接下来就是这个也给他不要了,我们这一块内容是不是就搞定了。保存一下。好了,它完成以后,接下来什么就是它底部的东西了啊,那底部的东西一样,我们先给它设置一个底部的基本样式,也就是点manin杠。给他一个。嗯,比芽包的一像素实现的红色开始设置它。刷新一下。他在这儿对吧,那么一样设置它的时候。
31:02
嗯。我们看一下啊,你看这两块的交叉,我感觉对不对啊。红色他的直接跟他交叉了。而我们这个呢。我们这交叉的时候是有一些距离的啊,我说看了怎么这么怪呢,你看这会书看的很怪啊,哎,因为他什么他这个上步我们给的问题啊,所以我们先找到他这个交叉的地方,也就是在这里边我们给了一个慢。对吧,给他一个马景啊,把这个马景就不要了,去掉了啊。好了,先让他上来,OK,这个没问题了,对吧,那觉得距离远了,我们应该给什么,不应该给他应该给的是paing是吧,所以井号man这里面的PA丁。啊,上下为20左右为零。好,这回再来。周。OK,这回是不是就好了好了,但是我怎么看的这么别扭呢?人家这边有吗。
32:00
啊,人家的这个背景颜色,所以人家的背景颜色没有变,只有底下文章的背景颜色变了,对吧,而我们是从这个这块就开始变了,那就不对劲了,对不对,那所以这里边我们把它找到车的背景颜色这个位置啊,也是整个它的这个。不需要,可TRLX给他拿走啊,那就他就没什么用途之地了,我们也不给他进行设置了啊好了,那这个给谁呢?给这个button进行设置,Button好,这个时候我们再来看。刷新。OK,这个没问题了,对吧,那button呢,我们现在还没有东西啊,我们先给button里面去添加东西去button这里边我们要有一个div,这个div呢,我们要里面去写的什么东西,咱们来看啊,这里边分现在文章,然后是内容也一左一右对吧,也就是说这里边这个button的这个头部啊,那也就是class manin。A2。刚bottom的top头部啊,直接这么给了啊,头部这里边有两个div对吧,一个DIV2个div div可能这里面还有个A啊,这是什么呀,这是给他一个下标啊,比如说我们没有那个箭头对吧,我直接打一个V1了啊。
33:10
比如说V,我们给他一个这个。哎。太小了。为。好了,给个这个对吧,然后前面的是什么,前面是他的这个精品文章的名称,给它复制过来放到这里边来好了,现在我们再来看我们自己的啊,来刷新。OK,这里面有了,有了以后大家知道它是怎么一左一右的吧。对不对,所以我们要给它进行什么浮动,那这里面我就直接给他class c flas class一个FL,然后这个呢,给他一个。拉一个F2好,一左一右。走,你。OK,一左一右,当给了一左一右以后,那么它的这个top是不是早感知不到里面的高度了,所以在这里边我去设置叫做点二,它给他一个什么呢?O v o v overflow,等于hid hidden,先给他一个这个东西。
34:09
知到高度了,感知到高度以后,接下来开始干嘛?给他拍顶pdd,拍顶上下左右,上边为20左右为上下,左度为20吧。再来刷新。OK,这没问题对吧,有一些距离的,其实左右为20就行了,上下的话我们给销量把它上下给10万啊。大理石左为20啊。OK,没问题,没问题,以后接下来什么它的这个背景颜色吧,来看背景颜色,背颜色是这个深橙色是吧,那OK,我们再给它设置一下,叫做BA background等于它我们再来看。刷新一下,OK,没问题,没问题,以后这里边的这个颜色我们是不是都要给它改一下,也就是这个,呃,我看一眼啊。嗯,咱们只给了一个他是吧,那精品文章呢,是标题了,也就是我们的这个给他一个top吧。
35:05
然后这个呢,是我们的这个top。杠T,杠二这个是杠FL。啊,就是左边的标题和右边的效广对吧,好了我又设置了这两个样式,那同样我们去改变它的这个点。Top。Catal一个它逗号,再点top-FL对吧,这里面的A,然后给它设置什么color井号FF白色。好,再来。OK,变白了,然后开始设置它的这个什么文字的大小吧,呃,比如说放到杠SIZE16像素,然后放到杠W,呃,W为是吧,为这个bld,好,我们再来看。刷新。OK,加粗也变大了,对吧,那现在我的精品文章是不是就有了。精品文章有了以后啊,咱们来看跟原来的再对比一下,看看还差在哪啊。
36:06
基本差不多就是高度了,对吧,那高度的话好说,这里边我们左右20上下为15呗,再给他加五像素的高度。是不是高起来了,哎,好了,那这个红色边框我们就不需要了啊,把他们这红先留着吧,因为还底部咱还没写呢,对吧,那底部这里边再往下来。VI。给他一个class,叫做man article。慢。一个boot Tom bottom button啊,底部的底部对吧,那底部的底部里边我们都写什么了,咱们来看一下啊,在这里边,嗯,是不是就是这些内容了,其实我们不应该叫底部的底部啊,我们应该叫什么?叫各个各个文章啊,所以应该是底部的文章叫做arple OK,底部的文章好了,底部的文章,那这里边先是有什么,咱们来看啊,嗯。
37:04
一部的文章。这么一大块儿对吧,底部是这么一大块儿,然后呢,里边包含的每一个文章。文章里面就是一个图片跟一个标题就行了啊。比较简单对吧,那也就是说,嗯。整个底部在这呢,对吧,然后他的这个里边给文章和标题,那也就是在这里边,我再来一个div。啊,在这个div里面,我们给了一个class,这个叫做嗯。那这个还叫底部的底部吧。BOT Tom,那这个就是man manin。Article。所以叫boot To Button,底部的a c article啊,底部的文章对吧,然后这里边就有一个图片A标签,再来一个image,然后src当前目录,Image下边的我用的是书是吧?呃,图书啊,这是一个,然后再来呢,就是它的这个文字信息divva,然后里边再给他一段文字。
38:16
ATE。拿到。这里边来OK,搞定搞定以后,现在我们先来看一下它的效果啊,来刷新一下。在这呢对吧,在这呢以后呢,那我们就开始给他进行来设置,也就是这个家伙先设置它啊,它是代表里面的内容对吧?哎,给他先来设置一下在这个。里边。等他,然后呢,给他一个这个什么呢?Width宽度,宽度一样啊,这里边我们还是设那些,那我依然给他280,咱们来看啊,这里边的内容是不是依然是四个,跟我们上面是不是也一样的,哎,所以它的这个也依然我给他一个280,甚至我可以给他更小,比如说我给他260,对吧,然后呢,高度呢,没有我们先不管它,然后给它一个边框,BD包的一像素实现的井号CC一个灰色边框。
39:05
好,最后再来看。走,你。OK,这里面有了啊,有了以后只是图片太大了,给它盖住了嘛,所以这里边我们要去找图片,找图片的话,图片在哪,图片在这里边对吧,也就是说在这块我们再去给他一个叫做class,等于main啊呃,Article不对,反过来应该是b Tom-article-image,这是第一个。这里面一样,Class。杠,嗯,文本test或者叫标题都行啊T对吧?好了,我给他加了这两个属性,那么接下来咱们来看在这里边,嗯。第二。呃,他吧。不对,反过来了是吧,那给它删掉,是bottom里边的ART里边的image对吧,它这里面是有一个image的,所以我给他乙面积的宽度,让它变成少80%,80%啊好了,然后所有的这里面的内容一会再说,现在先看图片。
40:10
走,你。OK,缩小了,缩小完以后它是不是要居中啊,所以在这上面给他一个text杠,等于一个center啊,让他先居中。好了居中了,居中完以后这样,这里面的这个图片,我们也给它这个缩小一点,对吧,所以在这里边我看看啊,它的外层。它俩的外层是article,所以我就给他俩吧。那就这里给它PDG判定,上下为15,左右为十,好,这个时候我们再来。OK。是不是变成这样了,然后同样它的这个Y1圈Mar Mar尖Mar减上下左右都为十。来找你好了,外圈是不是也有了对吧,那这个外圈有了,这里边的15上下为十五行左右它为零吧,啊,左向它为零。
41:01
变成这样的了啊,变成这样了,OK,那他这一个完事了,完事以后接下来这里面有几个,有四个对吗?那也就是说我要把这个叫做article的整个这一个的东西,CTRLCCC4个,然后再来。刷新。你看四个确实有了对吧,那咱说了每一个干嘛呀,这每一个是不是都要进行浮动啊,所以在这里边在慢点CSS里边找到谁呀,找到这个,这里边每一个f RO float给他left。开始浮动。走,你好。是浮动过,但浮动过来父亲是不是感觉不到高度了,所以在他的父亲这里边看他的父亲是谁,他的父亲是巴特姆吧。来。他的父亲是不是他?还有他。我就给一个就行了。
42:00
这是顶部文章推荐,这是底部对吧,那就给他了啊,那找到底部的底部。也没有。嗯,这个给他一个overlo,等于he让它超出部分隐藏,也就是让他能感知到子类的高度,OK,这回感知到子类高度了对吧?没问题了,那没问题,以后这里边我们接下来要调的是什么,你该看你家原来的啊,原来的接下来什么是不是就调这里面的位置了,对不对,哎,就是每一个距离了啊,调每一个距离,而且它是什么上下两排的对吧,也就是八个数据啊,那不管怎么样,我们先把距离先调好再说啊,先把水平的距离调好,那这里边。我们随便先给他一个,先找到我们要找的这个元素在这了,那这里边marin我们上下左右都为十,以后我们再单独给他一个marin left的实像。好,这个再来。走,你。会不会太大?没有变。Mar杠为十像数。
43:06
那就这样。嗯,上边为十。然后右边也为十。然后底下也为十,左边为20。好,这时候我们再给他一下周尼。好了再变了对吧,这没问题啊,没问题的,这里面还有点儿距离,看到了吧,还有点距离,我可以再给他一下,比如说这个为13码13。就是上。右为。右边为零啊,右边为零。先不给他那么多好了,现在都赎回来了,这左边是不还可以再给啊,所以这里面左边可以给他25。三十二十八吧。因为这个属性我们没算对吧,好这个位置差不多了啊,差不多以后接下来呢,咱们是上下为十是吧,上下为十可能有点太少了,我给他上下为15吧啊。
44:01
来刷新一下。好,有了有了以后呢,咱们看如果一旦元素要增多呢,哎,不对,我这里边光给了上下还没有给是吧,下也没15啊。啊,再来创新,OK,这没问题了,如果元素一旦增多,也就是说这里面我再多两个元素。走到这里边。CTRLC。很就。V一个两个三个四个,OK,这就八个元素了,对吧,那现在在这里面我们再来刷新一下。你看八个元素是不是都在这块,哎,那现在这块内容是不是搞定了,搞定以后我们把它最外层的红色边框我们给它去掉啊,找一下我们的红色边框在哪里,在这里对吧?给它去掉,去掉完以后,现在我们再回过来刷新一下,咱们来看我的编程语言这块内容是不是就搞定了,哎,那OK,那这节课我们先到这里,下节课呢,我们再去布局我们的下面精品相册。
我来说两句