00:00
我们现在开始学习我们的列表标签第二大部分,好,那我们列表标签呢,主要呢,是学这么三部分来看一下,那么它们分别是第一个叫无序列表,第二个叫有序列表,第三个我们称之为自定义列表,我们要学三个小列表好了,那么学习列表之前,首先也是按照我们的原来的规定啊,然后咱们呢,先学习一下我们的目标,带着目标呢去学习第一个我们理解要知道无序列表的应用场景,也就是说哎,无序列表可以来干什么呢?第二个自定义列表可以用来干什么的,这是我们要理解的,那应用层呢,哎,就说是我们要学习,哎,无序列表,让他去写出我们想要的列表来,第二个呢,我们能够写出最常见的自定义列表,OK,那带着这两个大目标呢,我们去学习啊好,那再见,前面咱们说过,诶我再问一下同学们,咱们缺前面学习的表格是用来干什么的嘞?哦,是用来是不是显示数据或者展示数据的,但是在页面布局中还有很多跟我们的表格特别类似的布局,比如说下面这个图,我们看上去,诶,是不是特别像表格呀,能这是一个大块表格呢,这是一行,一行里面放几个,这也是一行,这也是一行,对不对?但是呢,我们会发现这个跟表格又有点不同,因为它没有表格那么的规整。
01:21
它的布局并不像表格那样非常的规整,比如说这个123这三个单元格是这个样子,而这三个单元格就和它不一样宽,那咱们前面是不是学过我们的表格了,咱们说过那一行里面包含三个单元格,那第二行里面是不是势必必须有三个单元格才可以呀?好,我再举个例子,那这是小米的官网,那我们看一下这个像是一个大的一个表格,对不对,像是一个大的啊,但是呢,它又没那么规整,你看那这个呢,是一个,这边是一个,但是这边是不是还是一块呀,OK啊,这是一块,那么这个呢,是不是要进行合并单元格了,才能做出这样的效果来,但是呢,我们也知道合并单元格的时候呢,是很麻烦的。
02:05
那上上次我们学合并单元格的时候,有同学在练习的时候发现,哎,要死了,要死了,要死了的感觉,因为合并单元格太费劲了。很多情况下,你用合并单元格是解决不了我们想要的这个问题的,对吧,那遇到这种情况啊,包括下面这一切,那你看这个又又更复杂了呀,这个之后呢,你看这边是不是有两个呀,那你还要把这三个都合并吗?OK,那就很费劲了,那也就说是我给你分析了这么多,那有一些东西你是不是不用表格来布局的,所以说我们看的这个东西也很整齐,但是呢,不用表格来布局,所以说那用什么来布局呢?哎,我问你们打那打就是我们用的是列表。OK,那列表是用来进行表格,是用来显示数据的列表,我们以后经常用的来进行布局的,因为它是非常的整齐和自由的。那我们看一下,那什么是列表呢?啊,在这里面啊,就是容器里面装有的结构样式一致的文字或图表的一种形式,我们称之为列表,也就是说它是一个容器,里面可以装我们想要的文字或图表,它只不过表现出一种形式,那我们知道列表就像我们大阅兵一样哦,看我们的兵哥哥,看起来数非常的整齐呀,而且非常的组合起来非常的自由,它比表格还要进行干什么呀,自由度啊,你看那列表最大的特点就是整齐,整洁有序,而且跟表格非常类似,但是呢,它的组合自由度会更高一些,因为我们的列表已经没有了行的概念。
03:36
OK,看一下我们的,你看啊,这是我们的表格,表格是不是有行限制它们呀,你看一行二行,一行里面放几个单元格,而我们真正的列表去掉了行的概念,他们都是一个个的小盒子,你愿意怎么摆放就怎么摆放,那比如说这儿呢,我我完全不完全可以不要这个了,我完全可以准备这样的一个列表,那你看这个摆放就特别像我们刚才小米的这种摆放自由度了,那和它是不是特别的相似,这边放一个大的,这边呢放六个八个小的,这样是不是更自由一些,这是列表的优点。
04:11
好了,那我们明白了,列表是用来干嘛的布局的,它比表格好在什么地方,它的自由组合度会更高,所以说呢,这个就是我们讲的列表了,以后大家再看到这种情况,我们首先想到的是用列表来做的啊好,那我先右击给你检查一下,反正也是来测一测啊,打开完之后我们看一看哦,果然它用到一个叫做力的一个UR和力的小东西,那这个呢,就是我们要讲一会儿要讲的列表了,果然是和我们分析的是一样,那我们慢慢来看一下列表啊,刚才说过了,列表是不是分为三大类啊,分别是无序、有序和自定义,我们先看第一类,我们称之为无序列表,好,但所谓的无序列表大家看字面意思一看就很清楚了哦,无序列表是不是就是没有顺序的意思啊啊,那么它使用的是并列关系的啊,来看一下它的基本结构呢?是这么一种结构,是ul,里面包含的是力。
05:06
哎,这个是不是和我们前面学的标签不一样,这个标签呢,是由两组标签组合在一起的,它是一起搭配使用的。听明白吗?哎,这两个一起使用才可以,听说下雨天音乐跟巧克力更配哦,哎,那听说在列表里面U和力搭配反而更使用哟,能懂吗?哎,UR力的啊,好,我给你演示一下它到底是怎么使用的,好,首先那我们写成一个叫做五把,我们叫做这个样子啊好。H2,然后呢,第一个呢,一我们称之为无序列表。看好吗?哎,比如说这HR了啊,比如说你写上一个什么东西呢?哎,哎,你喜欢的水果有哪些呢?哎,OK,我是不是问了这么一个问题呀,那你喜欢的水果,那水果是不是有很多呀?那我可能没有最喜欢的,也可能有更喜欢的啊,打开完之后,那么里面放的是梨,看好它的基本语法结构了吗?先是一个UR,里面再包含了一个力表现,你喜欢水果是什么呀?每个人是不是可能喜欢不同的水果呀,比如说我喜欢我的banana,哎,香蕉,哎,特别好吃对吧?还我喜欢苹果,我喜欢吃苹果,苹果听说苹果美容啊,OK啊,那你还喜欢吃什么呢?哎,我喜欢吃榴莲,哎,榴莲这味道好闻呢啊,味道不错呀,对不对?那你还喜欢吃什么对不对,还有很多啊,你比如说我喜欢吃大白菜。
06:33
哎,大白菜啊,大白菜也可以啊,没问题啊,也算是水果吧,OK,那么我们写完毕之后呢,同学们跟我来看一看无序列表,它有什么讲究呢?打开看一看啊哦,果然生成了你喜欢的水果,有什么呢?诶,我们会发现,诶,香蕉,苹果、榴莲和大白菜是不是各不相同啊,各不相同,但是呢,他们之间用小点来显示的,也就是说它们之间是没有顺序的,谁写的前面,谁写的后面都可以。
07:03
能看明白吗?啊,这是他们的顺序啊好,那写完B之后呢,他们所以之所以没有顺序,就是说哎,我有可能我最喜欢的叫榴莲,OK,你可以把榴莲呢提到最上面去,看明白吗?哎,把榴莲提到上面去啊这个呢,咱就不要了,保存一下,那写完之后跟我来看刷新效果啊F5走一个,诶榴莲是不是在最上面了,没有顺序,那谁喜欢谁往上放就行了,没有顺序,所以我们称之为无序列表。好了,那你比如说在我们页面中非常常见,那这一些呢,都没有顺序啊,包括我们打开完之后再给你分析分析哪些用无序列表,这一个我们就可以用无序列表来做了,什么电话卡呀,电视啊,电视盒子之类的,这一个呢,他们是没有顺序的,哪一个活我们就放在前面,哎,用无序列表来做更合适,好我给你检查一下啊,右击再检查一下,选择它之后呢,找到打开它电视卡,你看人家小米是不是全都是用UR和力来做的呀,那里面这东西我们先别看,你看不懂啊,Ul和里面利利很多无序列表,还有哪一些用无序列表呀这块。
08:06
这一块也可以用无序列表,他们中间呢,也没有顺序,摆放起来就可以了,这些通通的,以后呢,咱们再见到这种布局,我们首先想到的是谁呢?无序列表可以下面这些还是无序列表。哎,我再给你测一测,哎。比如说我忽悠你们啊,打开完之后你看看是不是小丽呀,果然还是用UR和力来做的,没问题啊,所以说无序列表在我们场景中用的特别特别多,希望大家呢去重点记忆,比如说这一些,你看前面是不是有小点点呀,这一大坨一大坨的全部都用无序列表,它太常用了,所以大家重点去记忆,但是写起来还是比较简单的,好,简单给大家总结一下,无序列表,首先UR里面只能嵌套力。记住了吗?同志们,这个是有规范要求的啊,这个UR呢,就相当于父亲一样,它里面呢包含了你这个力,力的个数是不受限制的,你愿意写多少就写多少,但是这个力必须有一个父亲叫UR来做一个限定。
09:06
能懂吗?哎,这个咱们布局的时候呢,也会这么来布局啊,那比如说他们呢,应该有一个父亲,这是父亲叫ul,然后里面装着第一个小例,第二个小例,第三个小例,第四个,第五个,这样才可以他们有一个共同的父亲,那么里面不允许写其他的标签,所以说你这么写完全是you are wrong,你是错误的,不能这么写,千万不能出现啊。UR里面只能包含力,记住了吗?同志们有要求的啊,同样道理,力标签呢,只有在UR里面,就在列表里面才有意义,这个大家要注意啊。OK,那么直接在幼儿里面输入其他标签是不被允许的,不行啊,不能做,当然有同学非得反复试验,老师我在里面试了试,刚才我试试里面放了个屁呀,是不是放了屁之后发现管用啊,哎,管用的啊,这个确实管用,对吧?这个就类似于我们法律一样,对吧?我们走的时候呢,你是不是应该贴右边走啊,不要贴左边。是吧,你你贴着左边走,有可能你走了好几次没有问题,结果不小心有一次是不是,哎被被撞了一下,那怎么办呢?只要你不走右,你不从左边走,那不就没事吗?哎,所以说还是小心驶得万年船,咱们按照我们正确的规范去走啊,在就坐马路的右边,OK好了。那么利与力之间呢,是纳入一个容器,里面可以容纳所有的元素,跟我们的表格中的table宝是一样的,力里面你愿意放啥就放啥,比如说在这里面,我在个力,力里面可以放什么呢?你放什么都行,我这儿放一个div力可以吗?哎,可可以呀,很正常呀,很常见呀,我里面放一个图片可不可以呀,没问题呀,愿意放啥就放啥,力里面是个容器啊,跟表格一样,TD是一样的,你放什么都可以,好的,这是我们说的这两组标签要高,别注意第三个无序列表里面会有自带样式,放下那个样式让CSS来。
10:53
听到吗?哎,不要管了,哎,老师前面它会默认有一个小点点呢,哎,确实是有啊,老师你能不能给我换成个小圈啊,我说可以,你能不能换成个小块啊,我说也可以,那老师你换一个呗,我说不换,哎,这个我不会给你换的,因为我们后面学了CSS之后呢,统统都会把它去掉,这个呢,我们不想要,我们反而想换成更好看的,比如说搜狐里面这是个这个小灰的,或者是这个。
11:19
诶,后面呢,我们想换什么就换什么,但是我们不用它自带的这个小圆点,能记住吗?因为这个自带的小圆点呢,在不同浏览器里面显示的可能不太一样,那干脆既然不一样,我就通通去掉,我们自己写我们自己想要的那个,用CSS来做,所以说呢,这个小点点我们就知道就行了,放过它啊好了,这个呢是给大家介绍到无序列表中的第一个,我们称之呃列表中的第一个叫无序列表,无序列表还是非常重要的,它的结构呢,就是UR里面包含的力重点去记忆。
我来说两句