00:00
刚才我已经把无序列表的使用告诉大家了,我们再来体会一下,和表格呢一起对比一下,咱们刚才说过,我们的表格呢,是这么一种结构,来跟我来看啊,走这个呢,我一个个的来表格,它首先是有行的概念,有了行了之后呢,里面再放上我想要的单元格啊,一个呀,两个呀,三个四个啊分别来放就行了,好,OK,这是一个,那你想要再来一组的话,我再复制一行,然后呢再拿下来,那表格呢,它有了行的限制,所以说让我们的数据显得更加的整齐,但是同时会引出一个大的缺点来,自由度就不高了。那这个时候呢,哎,我们就出现了列表的概念,列表呢,它要比着我们这个表格呢更自由,因为真正的列表它是这么一种格式,和上面不一样,列表呢,首先先是一个ULUL呢,就是这么大的一个盒子,OK啊,一个大盒子先放过来,这是一个ul,也是有像它就类似于我们表格中的table一样,现有一个大盒子,然后UR里面是不是只会放的是力呀。
01:04
没有了,其他就放力,那什么是力呢?这个就是力,我可以我这个力呢,可以这么大,看明白吗?然后呢,第二个小力呢,可以是这么大,OK,那么我再来一个,那这样在摆放的时候就突破了行的限制,它在摆放起来是不是更加的自由一些了,发现了吗?哎,这就是用我们的列表来布局,自由度反而会更高,OK,这是列表的概念,刚才我们讲了无序列表,那还有没有其他列表呢?Yes,哎。We have,我们还有其他列表,那就是我们要讲的有序列表了,所谓的有序列表呢,哎,大家简单了解一下,它没有无序列表用的多,也是了解啊,那其中你比如说这儿呢,我们有啊,美国、英国、中国啊,这是不是一个奖牌榜啊,一六年的奖牌榜是美国是第一名,英国第二名,第三名是不是中国呀,他们是有顺序的,所以我们称之为有序列表,OK,那我们来看一下有序列表怎么去使用。
02:01
同样道理啊,到这里面去我再来啊,有序列表,我干脆就复制一份,OK。到这里来。走。第二个哎,我叫语序列表啊,粘贴看下位展贴一份,好,那我们说就是我们就叫做什么呀,啊奥运金牌榜就可以了,好奥运金牌榜,那么我们写的时候呢,看好它的写法啊,跟上面这无序列表几乎是相同的,看好它是怎么写的啊,几乎是相同的。对起啊对起,OK在这里面也是来OL看好吗?叫OL了,好OL里面包的呢,写法就一样了,还是立好。第一名叫什么呢?第一名叫美国,OK,我复制一份啊,叫C加V,第二名呢,叫英国。好,第三嘛,我们叫中国,那他们有没有顺序呢?有第四个呢,叫俄罗斯,OK,那这样的话,我们这个奥运金牌榜又出来了,来刷新一遍看效果啊,好走一个你发现,哎,我们的什么呀,有序列表啊,这是第二个有序列表,它有没有顺序呢?有的,你看奥运金牌榜第一名是美国,第二名是中国,第三名呃,第二名是英国,第三名是中国,是不是有顺序的,哎,那你比如说我想把中国。
03:14
提到第一名来,是不是美国就不愿意了啊,美国不愿意啊,我是第一名,为什么给他提过来呀?OK啊,所以他没有顺序,不能随便乱提的啊,好,那你一提上去呢,特朗普就不愿意了,哎。你不愿意吗?不愿意,我给你提到第四名了。是不是,哎,第四名啊,我可以给你提过来,喏,在这里面去看家V站过来,第一名呢是什么呀,中国可以啊,哎,让你不愿意好中国,然后呢,这个呢是俄罗斯好,你看当我改完之后,你再刷新息名看效果啊,一刷新哦,是不是中国成了第一名,美国反而成了第四名了,他们是有顺序的,这个呢要注意一下那具体的使用规范,哎。这里面啊,所有的特性基本跟UR是一致的,但实际中比无序列表用的反而更少啊,你看结构是不是UR里面包含的是力啊,同样道理啊,里面比如说什么呀,Or里面只能包含力啊,力里面可以包含很多关系呀等等之类的啊,跟上面完全一致,所以在这呢,我就简单介绍一下,这个我们称之为有序列表,它们是有顺序的,好,那除了这个之外呢,还有呢,第三个我们称之为自定义列表,那自定义列表它又有什么不同呢?哎,自定义列表跟它还有更大的不同啊,OK,我再复制一份。
04:27
到这里面去。我们的第三个来看一看啊,除了之外,我们最后一个啊叫做自列表,好,那自定义列表有什么不同呢?哎,你比如说我们这个,就比如说是地区啊,我这写一个地区看,好那自定义列表比其刚才呢,会稍微的更复杂一些,那么复杂呢,它里面呢,是有三组标签才能组合而成的,其中最大的那个父亲叫做DL是不是啊,Ul叫无序,Orl叫有序,DL称之为自定义列表,它里面又分为两组啊,其中第一组叫DT。
05:00
哎,第二组呢,我们称之为DD啊,这两组看明白吗?DD和DDOK,那么DT呢,好比是老大,哎,DD呢,好比是老二,他们分别分开的啊好,那在这里面的话呢,我们可以看一下,就是定义列表,将常对术语或名词进行解释和描述的,就是一定看好这个解释和描述,也就说是这个DT是干什么的,DD是围绕它来进行解释和描述啊好了,那么我们来看一下它怎么写到这里面去,我写完你就知道了,好进括号啊,走一个D。第二下面呢,首先是DT看好了吗?DTDT里面,比如说我写上一个我们的北京。哎,我们的北京,北京CTRL加CCTRL加V啊下面呢,不叫DT了,而是叫DD,能看明白了吗?哎,DD啊二兄弟,OK好了,那DD呢,北京有什么呢?北京比如说我们现在是在昌平区。昌平区OK,除了北京,除了昌平区是不是还有很多的区域啊,比如说叫做海淀区OK,还有大兴区OK,还有我们的什么呢?啊,比如说我们的呃。
06:04
东城区,西城区等等之类的,看明白吗?它的写法呢,就是一个DL,里面包含的是DT和DD,这是一组,好,改完之后呢,同学们给我来看一下它的效果啊,第三组叫做自定义列表DT,我们发现哦,竟然是这么形成的,这个呢我们称之为DT,而下面这一组呢,我们称之为DD,你会发现北京是不是相当于一个名词,而下面这几个区是不是围绕着这个北京是不是来进行解释和描述的呀?哎,围绕它来进行做的,这个情况下我们就可以用自定义列表了,好,那比如说我呢,再给你来一组,你来对比更明显一些啊,它的里面呢,不仅仅是包含一组啊,还可以呢,再来一组,好,除了北京之外,比如说哎,我们的老家山东区啊山东,OK,山东有什么呢?有威海。OK,有什么呢,潍坊。还有我们的济南OK,那么再来我们的青岛,OK,那这样是不是这几个城市是不是属于山东的,打开完之后,我们刷新一遍,走一个你会发现,诶,是不是还是那样子的,这是DT,这是DT,而里面的小DD完全是不是围绕着DT来进行解释和描述的,这是他们的关系。
07:18
能不能看明白,哎,这是我们的自定义列表啊,那自定义列表稍微有些许的麻烦,那么都是围绕它来的。倘若各位小组能够理解DT和DD的意思,结合来记忆,想必也是极好的。那他在我们这里面去,我给你举了个简单例子啊,到这里面去,那我说的这句话是甄嬛传里面经常会有的,那你想想这个啊,甄嬛传里面的就是那个皇上对不对啊,然后呢,这个就相当于DT了。哎,他而下面这个,哎,比如说我们的嬛嬛,哎,这是嬛嬛,她属于弟弟,哎比如说哎剑任就是矫情,不是他说的吗?他也属于弟弟,OK,皇后也属于DD,这一些呢,都属于DD,是不是围绕着DT来进行解释和说明的,那他说你们都是我的,是不是他围绕着DT来进行解释和描述?这一个我们称之为什么自定义列表。
08:13
这样结合记忆能不能清楚一些,哎,OK啊好了,那么在这里面的话呢,我们教授说此时用DR更合适一些啊,哪些地方用呢,比如说这个用啊,打开我们的小米商城,我走啊走走拖到我页面的最最底侧啊OK,我们这儿呢,有一个这个看好这一组了吗?我们页面。这一组你看帮助中心是不是个小题,小标题下面有什么,哎,我我怎么帮助你呀,你的账户有问题呀,你买东西有问题了,你的订单有问题,你有问题的我都可以来帮助你,是不是下面这几个都是围绕着上面是不是来解释说明的,包括线下的门店啊,线下门店哪些有啊,小米之家在哪呢?服务点在哪,零售点在哪儿呢?是不是它也是围绕着这个来解释说明的,如果以后大家布局在见到这样的一个结构,这个结构是不是在我们页面里面极为常见。
09:05
也是非常常见的,好,那么如如果以后遇到这种效果,哎,我们就可以用它了,我再给你检查一下,看一看我选择帮助中心,你会发现哦,果然它是用什么做的,是不是DRDT和DD,帮助中心是DT,下面所有这三个都属于DD,那那么。123这三个都属于DD以后,咱们在做用这个自定义列表是不是更清楚一些,所以呢,很多很多情况下,我给你啊,像很啰嗦的一样,给你解释我们为什么要用它呀,我给你举实际中的例子,就是呢,目的为了培养你们这一些,就是渐渐这样的一些效果以后见到效果之后,诶当时我们老师说过这个地方用自定义列表更合适,OK,那做到这种效果,诶这是他们中间呢,没有顺序的,老师说过这个用无序列表是不是来做,是不是更合适一些。哎,这个呢,就是我们给大家讲的关于这个列表的概念,我们讲了列表,讲了自定义列表。
10:01
好了,那简单的我们总结一下,把我们的列表总结啊,那我们列表一共学了三个,其中第一个我们称之为无序列表,无序列表里面只能包含的是力,是没有顺序的,我们网页布局中最常见的一种列表,这个属重点去记忆好。第二个呢,我们称之为有序列表,它们是有顺序的,前面的呢有12345 OK,有顺序好。最后一个我们讲了一个叫做自定义列表,自定义列表注意它里面有两个兄弟是DT和DD,记住DT和DD它俩是什么关系呢?是并列关系。发现了吗?哎,虽然他围绕着这个DT来解释的,但是他们确实是兄弟关系啊,或者是我们称之为夫妻关系,为什么叫夫妻?你想想,他是皇帝,她是皇后,包括他们的这些妃子,是不是也是相当于他们夫妻关系呀,只不过他们是一对多的关系。也就是说一个皇帝可能有后宫佳丽3000,有好多好多的妃子,那么这些妃子都是他的啊,有的同学就比较羡慕皇帝了,对吧?好那个呢,我们先不管研究啊,我们先不研究它,我们来先看看我们的代码,我们代码呢是存在是这样一个DT呢,可能和有多个DT相对应的,可能一个DT里面只有一个DD和他对应的,可以呀,可能这个皇帝的英雄比较专一,就喜欢一个人,当然可能比较少,对吧?还可能呢,一个DT里面有很多很多个DD,那么他这个DD的多少呢,完全取决于皇帝的需求,不是皇帝啊,完全取决于我们的需求,我们呢,你看人家小米这个,小米这个呢,你看一个里面一共有几个,他就三个DD相对应的,他就需要仨,所以说呢,这儿呢,就写三个就够了,那如果需要五个,你就写五个来取决于我们的需求啊,好了,那在这里面还可能是一组DT和DT,这是一组,还可能有另外一组,当然不一定有限制,没有限制完全取决于我们的需求。
11:53
就哪怕是只有一组也是比较常见的,就刚才相比,它就是一组一组的啊,OK,这是我们说的它存在一个DT包含多个DD,哎,存在一对多的关系。
12:03
好了,那在这么我们做完总结之后呢。我们现在学完之后呢,需要给大家再声明一个地方,咱们现在呢,还没有学布局,我们现在只需要记住两点,同学们,我讲的时候,你脑海里跟着我一起来想啊,第一个我们要学会什么时候用无序列表,什么时候用自定义列表,这个要搞清楚,你比如说这个地方,哦,老师我知道这个地方老师说过用无序列表,什么时候用自定义列表呢?哎,这个地方我知道,这个地方用自序自定义列表那就可以了,你首先你得搞明白什么时候用他们。这列表啊,好,第二个问题就是无序列表和自定义列表的代码怎么写,这是第二个需要你学会的地方,哎,老师我会了,无序列表就是UR里面包含的力,那自定义列表呢,就是DL里面有DT和DDOK,那只要你学明白了这两个地方,那我们学列表的目的已经达到了,那具体的我们看到了,哎,这这么绚丽的一个效果对不对?这个布局怎么布局出来的,是等我们学完CSS之后,后面我会教你一个全面的来布局,那个呢,是我们学了样式之后再一起搭配来学的。
13:10
在这里面呢,我简单把我们的列表呢,给大家做了一个总结。
我来说两句