00:00
好,我们继续来上课,这节课呢,我们再来看一下我们的尺寸属性和列表属性啊,来,我把这两个直接复制到我们这个代码里边,来来新建一个文件叫做幺幺啊尺寸。属性啊,其实呢,我们对尺尺寸属性已经不是很陌生了,对吧?因为之前我们再去练习的时候,我也有用过,对不对?那尺寸属性无非就是什么宽度和高度啊,那么这里面还记不记得,在我们讲H条码的时候,我们说过有个什么叫做块状元素,还记得吗?块状元素还有一个什么呢?行内元素还记得吧?比如说div,它就是块状,什么叫行内呢?SPA就是行内的,对吧?含内元素什么特点呢?是不是不会?不会独占一行啊,对吧,而块状元素呢,是不是会独占一行,这是我们之前讲一条麻薯,我们见到的这个效果对不对,那咱们来看在C里边它还会有一些区别,比如说啊,在这块我们来。Div标签,然后呢,我们再来一个磁盘标签啊,就是我是块状元素。
01:00
我是块状。元素这里面呢,我们再来写一个叫我是行内元素,咱们来看行内元素跟矿产元素还有什么区别啊,来在这里边我们还是一样的,先去给它设置style标签,给它设置一个div。嗯。宽度我直接设置200像素对吧,我一般设置宽度啊,我们常用的要么就是像素,要么就百分比,什么就百分比。比如100%宽对吧,或者是80%宽啊,它是根据什么,根据负类,你负类多宽,它的80%就是负类的一百分之八十了,明白吧,哎,那么一般的我们常用的时候,比如说我现在先给他一个200像素吧,啊,然后高度呢,我也给你个200像素,然后BK加那单光呢,我给你个背景颜色变成blue蓝色好了,那现在我们来看啊这里边。诶,有一个200乘200的对不对,然后是。蓝色背景,然后咱们可以在这里边进行什么测试一下,你看是不是200乘200。200乘200。
02:00
没错吧,哎,那OK,那现在我给他退出,再看行内元素啊,也是我们死SPA标签来找到死SPA标签,我们给它宽度也设置为200,高度呢也设置为200,然后bank的背景颜色呢,Bag。BGRO单格的背景,我们给它设置什么呢?设置一个这个金色。God,好了,那这个时候我们再来看。刷新诶看它有宽高属性吗?没有对不对,哎,它的这个元素的大小是根据什么它的内容的大小来决定它元素的大小,看到了吧?哎,这就是咱们行内元素和块状元素的另外一个区别,什么区别呢?再返回这里边。会独占一行对吧,而且是什么具有了宽高属性。属性对吧,而且磁盘标签呢,是不会读这一行,没有宽高属性。没有宽高属性啊,这就是咱们的这个块状元素和行列元素啊,好了,那宽高属性我们做出完,这里面还有什么,还有最大宽这个高度和最小高度,那同样它也有什么最大宽度和最小宽度啊,但一般我们用最大宽度最小宽度时候比较少啊,对于我们PC端布局,我们用的最多的就是最大高度跟最小高度啊,这两种比较适合排版使用啊,这两种比较配适合排版使用,怎么去用呢?咱们来看啊,比如说在这个div这里边我重新创建一个啊,比如说这个叫做div,然后我们给起个叫做井号BOX1,好了,在这里边呢,我们给它一段内容啊,叫做卧室。
03:37
新的内容。我想测试最。大和最小高度的区别。好了,这里面写这么一句啊,然后在这里边我们来测试啊,井号BOX1,同样我先给它宽度width叫做100,我这个井号BOX1。BOX1对啊,对了,然后呢,再来高度也为100好了BCK。
04:06
B GR bank,我们给它一个呃,Blue蓝色啊,然后color我们给它变成一个白色井号井号FFX,好,现在我们来看啊,当前在我的页面中刷新是不是有这么一点内容了,对吧?哎,但是这个变白色的话,一会儿它超出的话还不好看啊,我们再换一下吧,来嗯,来个。谁谁谁。变成灰色好了,变成灰色了,看到了吧,哎,现在它没有超出内容对不对,那我而且我给的什么给的是一个高度对吧,咱们再看啊,我给他变我给的什么最小高度,我们先用最小高度慢杠head是不是最小高度是100啊,那现在咱们来刷新。你看。没什么变化吧,是不是,哎,不是没什么变化,是不是高度增加了,诶刚才我给的是什么。高度100PX。没问题,这是正确的啊,我给的最小高度吗?
05:02
杠为100像素。对呀。我的内容没有那么多呀,他怎么给我增加了呢?来咱们看啊,把内容我先删掉啊,什么内容顶了来。刷新。看一下它的高度是多高。100乘200了,为什么?那100是怎么来的哦。继承了谁是不是继承了这个div了,看到了吧,这里边我是不是单独设了一个div啊,哎,所以这不行啊,那我把这个div这个给它去掉了啊,来这两个我们给它去掉了啊。以免影响我们。好了,这个时候我们再来看刷新。正好是100对吧,那我当天给的什么,给的是不是也是最小高度对不对,那好了,那现在咱们来看我让的内容啊,开始不断的去加大CTRLCCTRLV来。再来刷新,你看内容加到高度,是不是也跟着在加大呀,对吧,那你看再来。再刷新是不是也加大对吧?哎,那比如说内容减小呢,来。
06:03
真的是不只留了这么几个字,只留这么几个字来刷新,你看内容减小它不怕,它最小展示100高度对不对?展示100像素的高度,当你超过100像素干嘛呀,它是不是根据你内容的高度来去决定它的高度啊,对不对?哎,这就是咱们最小高度啊,这是咱们最小高度,好,咱们在这记一下啊,最小高度是什么呀?这个展示。最小高度对吧,如果内容超过最小高度设定。角值对吧,会根据那高度高度会根据什么内容的高度来决定自己的高度对不对,哎,那一样有最小高度,也有最大高度,那最大高度就长怎么样呢?来这里边我们还是一样把它去掉,去掉以后我们来max-1IGT,比如说也一样100PX啊,那现在我们来看刷新。那你看最大高度是不是直接跟着内容高度来走啊,对不对,但是如果内容一旦超过100高度呢?来比如说CTRLCCTRLV,我再复制一个出来走,你这也没问题对吧,再CTRLV。
07:07
在周一,哎,也没问题,再来一次该超了吧,诶超了看到吧,这不已经超出了,也就说最大高度是什么我,哎,没有超过最大高度范围的时候,我的高度是根据你内容高度来走的,对吧?如果你的内容一旦超过我最大高度,那它的高度将怎么样?不再增加吧。对不对,哎,所以这里边。叫做最大高度属性。最大高度属性。允许。当前。元素。根据内容自动减小高度,没错吧?哎,但是如果达到了最大高度值。将不再增加高度啊,这是咱们最大和最小高度,这两个属性比比较适合什么页面排版使用啊,宽度呢,我们使用的较少啊好了,这就是咱们的这个尺寸属性,那OK,尺寸属性了解完以后,我们再来看列表属性啊,列表属性不多对吧?有这么几个,三个,然后呢,还有一个什么简写属性啊,那咱们来看在这里边同样我就用一个OL了啊,OL当做我们的列表,然后呢,这里边给他Li人生四大喜,我们再写一遍,有什么呀,有这个洞房花烛夜。
08:24
然后肯定C喂喂喂喂喂,好了,我就都写这一个了啊,然后这个时候我们来看周一,诶,我的这个已经有了,对吧,有了以后啊,接下来我们开始对这个列表进行设置了,但是呢,我们先给他这做一个,我看我做一个背景,还是做一个什么能看的更清楚一些啊来比如说这里边我们找到Li标签。给它设置一个back,一个背景颜色为pink吧,粉色,来我们看有没有什么效果啊,来刷新哎,有现在咱们来看啊,当前啊,我这里面的这些符号看到了吗?都是什么,是不是都是这个有序列表啊,有序列表我能不能给它变成无序列表呢?可以在这里边我直接什么list杠,Style杠,Type样式样式变成么de。
09:07
啊,这个时候你来看NY。都不对。我给用错了。走到这里,呃。实心的点叫做。要就啊DC啊设置C,那这个时候咱们来看。走你,诶我的有序列表是不是要变成无序列表了,无序列表前面是不是就实心的点啊对不对,哎,那么还能设置什么呢?包括我怎么知道是这个值呢?在这里边,咱们看手册这里边list杠,Style杠,TPE对吧,你看这里边它的取值都在这儿呢,看到了吗?哎,DC是不是实心圆,我还可以干嘛,空心圆,那空心圆长什么样呢?在这里边。Cle。刷新这不还有空心圆对吧,我还能变换什么,只要是在这里边你看到的都可以看到吧,比如说这里边有什么,呃,比如说这个小写的英文字母吧,来。
10:03
或大写的罗马数字吧C。给他粘过来,粘过来以后咱们再来刷新你看。1234是不是都有了,哎,这是什么设置我们列表符号的样式啊,但是注意这个样式是必须在这个列表中有的你才能用啊,没有的你不能用,你不能乱写明白吧?哎,那OK。那无论是有序列表还是无序列表都可以去使用这个啊,因为它针对于列表的吗?无论是有序还是无序都可以去使用啊,好了,那我能这么去这个,我包括列表我还可以干嘛呢?我还可以用什么用我们的图片来去代替,那我这里面没有图片啊,我们先找一个图片吧,我看看啊。嗯。我先去找一张我们能做列表图片的这个图片啊。
11:05
百度。列表。图片。代表图片。哎,这列表符号吧。好,就他了啊。或者这个挺好看。这个吧,来右键图像另存为。保存到我们的桌面上,不对,是我们的,呃,计算机我们的C盘,C盘里面的,呃,万八六十四,万八六十四里面的,3W里边的。好了。03IMAGE改个名啊,这里面已经有A了,对吧?有A了,我觉得b.DP记好嘞,好了,图片现在有了,把它关掉吧,关掉以后现在咱们再来看啊,我要想把它换成我指定的图片,能不能换的也是可以的,那我先看一下这个图片大小是多大啊,我500乘这么多啊,那我们先给它缩放一下啊,来先处理一下这个图片。
12:19
现在变成这么大对吧,然后再来重新调整它的大小,按照像素,比如说我给它变成多少呢?变成30。现在变成这么大了,看到了吧,哎,或者我可以再小点,比如重新调整大小啊项柱我按照二十二十行20就行啊来好了,有了对吧,有了以后当然这边白边有点多啊。哎呀,白边有点多行多多吧啊来把它保存一下好了,保存完之后这回这个图片小了,看看啊,20乘18了,对不对,然后呢,咱们再来看,我再返回我的代码里边,咱们不就是想要这个图片当我的列表图片嘛,对吧?List style1倍一样,UR图片地在哪?在当前目录以倍下边有个叫做B展GPG的,好了,这个时候我们再来看。
13:08
周一那你看前面是不是变成了我这样的图片的方式了,对不对啊,而且啊在这里边我先把它背景下这去掉啊,我用边框来看,边框看的会更清晰。来。你看刷新,现在你看我的这个符号是不是在这个边框之外的,对不对,我能不能设置让它跟在边框里边呢?也是可以的,那这里边叫什么list style。Position啊,等于什么呢?等于就是进来。看到吧,是不是进来了,哎,那么同样Y可设组呢,设置al outside就是出去啊,就是默认刚才我们看到的这个效果,也就是我们可以设置这个符号的位置,但是这个位置只有两个,要么进来要么出去啊,只有这两个位置啊。好了,那我们把它这块呢,一定要记一下啊呃。这里边我们用的是一个叫做in inside,还有一个outside。
14:05
O outside对吧,这个呢是什么呀?这个跟随内容对吧?这个是不跟随内容,不跟随内容是不是在边框之外,在边框之外啊对不对,那这个呢,就是在边框之内啊在。边框之内啊,那么一样列表属性也有简写属性啊,也有简写属性啊,简写属性叫什么呢?就叫做list style啊,那么包括我们其实用列表用的最多的什么?用的最多的其实并不是这些设置样式,而是最多的是什么呀?是取消它的样式,叫做list杠,Style杠。Sple杠什么呀?杠typeb,它的样式为干嘛呀,取消,那你看刷新是不是取消了,哎,这是我们用列表用的最多的地方啊,取消它的样式,因为我们很多地方其实都是列表来做的,但实际上并没有这个点的样式啊,都是给干嘛都给取消了啊,那么它的检验属性呢也一样,推荐大家使用绿色的杠style,你需要哪个你用哪个,比如说我想给他设置叫什么呢?叫做u per per ER,行,就这个了,然后咱们来看符号是不是就有了。
15:09
对吧,Abcd,然后呢,比如说我现在用图片了,那URL这里面当前目录你面积下边的b.CBG来你看。变换是不是变成图片了,对不对,哎,然后还可以干嘛呢,我比如说我让他进来inside来。是不是进来了,哎,这就什么,这就是咱们列表样式,但是一样啊,我说了这里面用的最多的ES list-style为NNE,什么意思啊,取消它的样式,取消它的样式走,你怎么取消了,哎,这就是咱们的列表属性啊,我把这个组织掉了啊列表属性好了,那这节课我们到。
我来说两句