00:00
好,我们开始来上课,那么今天呢,我们主要去讲一下我们HTML5中新增的一些标签,以及我们布局的标签,还有我们这个新增的这种媒体标签啊,以及咱们CSS3中新增的这些个选择器以及属性,好了,那咱们来看,在这里边我们先新建一个文件。我们先看一下我们新增的这个标签啊,先做一个了解,当然在这里边标签我就都给大家都记好了啊,好了,那咱们一个一个来看,在这里边我来新建一个文件。叫做HL文件,比如说这个叫做HTML tag他给的,然后零一。好了,那这里边叫做新增的HTML5标签。来第一个我们要了解的叫做什么呢?叫做b do标签,它是干嘛呢?是覆盖默认的文本方向,怎么叫覆盖默认文本方向,大家也看好了啊,这里边还给我们多了一个属性,对吧?现在我们先不管它属性,我们直接在这里面写,比如说我写一个叫做今生为你。
01:00
好了,那么写完以后,现在我们再来看,我们来刷新用浏览器打开一下啊。来刷新,这个时候你看是不是出现的内容,是不是今生为你抠对吧?哎,它没有任何的变化,我正常写到一个普通标签里面,比如说我们来个SPA标签,那么这里边也一样,我写个今生为你偷,那么现在你来看好了啊,我在这里面再来刷新,是不是正常一样的效果,对吧?而且看到了它也是行内标签对吧?因为这两个标签能在一行里边啊,那OK,那它怎么叫做覆盖默认的文本方向呢?我们可以通过这个DR属性,DR属性给它设置一个叫做LTR,这个LTR表示什么意思呢?表示的就是。Left to right啊,也就是从左到右,那么现在我再来刷新,你看有变化吗?没有对吧,我们默认的文本方向是不是就从左到右了,那么接下来我可以干嘛呢?我可以给它设置RTL啊,那这里边。
02:00
再来叫做RTL,那OK,让它从右到左,那你看现在是不是就从右到左了,哎,那OK,这就是咱们的。述的标签啊,那么叫做dets details定义细节描述好了,比如说这里边我们定义一个对电影院定新上的这个电影来描述啊,比如说这里边来一个叫什么呢?叫做这个,呃。电影名称,电影名称对吧。电影名称,那叫做小名。真人版。真人版好了,然后再来还有什么,还有电影的价格吧,对吧,叫票要票价啊,票价叫做。糟了。不是刀了啊,是这个钱啊,998,然后再往下来继续还是P标签,然后我们开始对它有一个描述,对吧,这里边比如说只要998。
03:08
998,然后小明带回家好了,那么现在咱们来看我写完这么一个内容以后啊,接下来我们再来看这里边我们点击刷新诶。看到了吗?怎么出现一个详细信息了,而且这详细信息还怎么样,是不是还带箭头了,那我点一下,诶,你看点一下是不是把这些内容,我刚才写的这三个批标签里的内容给展示出来了,我再点一下是不是说回来了,你看再点是不是点一下隐藏,点一下打开啊,哎,所以他要什么叫做交互式控件,可见或者是隐藏啊,用来补充这个细节了,但是这里边有个问题,什么问题呢?就是一个详细信息,其实我们不应该叫详细信息,对吧,我们应该叫什么,哪怕我们叫一个这个,呃,院线上映都比这个要好听,没错吧,所以我想定义这个标题,能不能定义呢?也可以怎么定义呢?在这里边我们通过一个叫做summary的标签sum may,它就是为S标义标么?一比如叫院线上映。
04:06
这些增用好了,那这个时候我们再来看刷新。OK,月线上映对吧,点一下展开,点一下促销啊,这就是detail好了,那再往下来还有什么呢?还有我们的这个聊天标签啊,那么聊天标签也样,大家作为了解就可以了,叫做dilo dig dilo好,那这里边我们需要用这个DT来去做角色啊,那比如说这个角色一。说说什么呢,你好,对吧,然后再来比如说DT啊,当然我们用DD也可以啊,角色二说。你好在吗?在吗?对吧,然后就是说什么你好。你不说什么事?我怎么知道我在不在?好了,那么这里面有这么两句话对吧,那么接下来一样,我们再返回到浏览器里边刷新,诶诶诶诶。
05:04
有效果吗?没有吧,哎,默认是不支持的这个标签,那么我们要想让浏览器里边支持这个标签,我们需要给它设置一个属性,叫做open,等于true,让它打开啊,那么再来刷新,你看这里边是不是就有这么两个内容了,对吧?哎,当然这是角色一跟角色二,那么我可以把它变成什么?DT跟DD。好,那现在你看好了,是不是就相当于像一左一右了,哎,你说一句我说一句,你说一句我说一句,看到了吗?哎,这就是咱们这个聊天标签啊,说白了干嘛,就是定义聊天窗口的啊,定义一个对话窗口。那我们把它注册掉啊,那OK,那么其实我们不用它定义对话窗口,别的定义不了嘛,也能啊,我们想做这种这种效果是不是很轻松了,对吧?那我们直接拿一个div是就可以做,但是咱说了所有你就记住所有H标签它都是有意义的,这个意义都叫做语化标签啊,这个意义不是给你来去定义的,给谁呢?是给浏览器,给搜索引擎去定义的,明白吧?哎,所以对于你来说,你看的无所谓,在搜索引擎他知道啊,那这个框口里边都是什么,都是聊天记录,对吧,因为这个窗口里边都是对话啊,这就是咱们dilog标签的作用,好了,那这个标签之后,我们再来看下一个标签,下一个标签什么呢?它一般是用于这个描述的,咱们来看一下在这里边啊。
06:25
就是fire啊,它是干嘛呢,用于对元素进行组合的啊,多用于图片与图片描述组合,就是我们定一张图片以后经常会有图片的描述,对吧,我那里面少写一个标签啊。好了,那咱们来看一下这里边,比如说我先是注意啊,它是定义组合的fire,那么组合肯定要包含在这里边,对吧?这里边比如说我来个image,那么当前目录咱们这里是不是有张图片,我就用它的啊,然后这里边描述,那就随便给一个吧,叫做这个属性值。熟姓直是吧,给了一个描述,好了,那现在我们来看啊,在我们页面中有什么效果吗?来刷新,就这一张图片没没有什么问题对吧?好了,那么接下来咱们说了,与它是一个组,定义一个组合,那组合现在只有一个人就不叫组合,对不对?那么还需要另外一个对他的描述,对吧,那叫Fi。
07:18
它是干嘛呢,就是用来定义这个图片呢,描述的啊,相当于这个标题一样,比如说这是。CSSTS属性。属性值OK,那现在我们再来看效果来刷新,你看这里边是不是就有了这个内容啊,对吧?哎,就是说这个Fi cp t它是干嘛的,就是用来这个图片去定义这个标题的,当然这个标题我定义到或者定义到下这都可以啊,都可以来刷新。看到吗?这就在上面了,它俩是一个代表什么,这个时候代表他俩是一个组合啊,代表他俩是一个组合,那么一样让它居中,直接设置到居中就可以了,对不对?哎,而且我们可以看一下,比如说这里边我们给他style设置一下,我们可以出去通过什么呀,通过设置边框BD。
08:09
Border EPS sod,通过设置边框,我们来确定这个元素是什么,是行内元素还是块状元素,你看我这一设置,它在整个一行,这是不是行内元素了?对不对,哎,那OK,这也是他测测试的一个方法啊,也就是说这个东西它就是一个什么呀,一个这个块状元素啊。好了,那包括这里边我们可以继续title对吧,也可以给它一个标题,然后给一个内容,然后这里边一样刷新对吧?鼠标放上来,放图片上,鼠标放图片上,它就显示它的配图信息啊好了,这就是这个标签的作用,干嘛呢?就是将它们给它捆绑到一起对吧?捆绑到一起以后一样,你看好了,我这里边可以给它设置一个t style,我给它设置一个text到等于center,让他们都居中是不是也没问题,来刷新你看是不是都居中了,哎,上面是图,下面是它的图片的标题,下面是不是就是这张图片了,哎,或者他俩换个位置对吧?先是图片后面是对它的描述都可以啊,这就是这个这一对标签,然后这里边呃,我们需要再去加一下啊,我这里边没没写对吧?这里边我也说了,多数用于图片组合啊,那再把这个加上来叫做。
09:18
Fi c p t。结束的Fi cp啊干嘛的呢,定义标题的对吧。Cap什么跟表格呢,是不是一样啊,哎,定义标题为谁呢?为这个fire对吧?定义这个标题啊,或者是定义这个图片的描述啊或者。做定义图片的描述都可以啊,咱们可以看一下官方给的解释是什么意思啊,来打开一个。然后这里面我们直接进行百度。查一下这个属性。你看这里面直接有这个标签对吧,然后这里面再点过来。好了,点过来以后,他说干嘛用作文档中插入插图的图像带有一个什么一个标题,说白了是不是就为文档的图像定义标题的,你看这里面是不是加了一个标题,下面是不是它的图片,看懂了吧,哎,然后用这个标标签干嘛给它包含,证明它是什么,它是一个组合,好OK,这就是咱们这个Fi好了,那把它关关掉,关掉以后我们还有一个标签叫什么呢?Mark mark对吧,它是用来干嘛呢?标记文本的,比如说。
10:26
这里面我再来一个。呃,来个P标签吧,比如说你是大长腿吗?大长腿吗?啊好了,那现在我要把这里边谁给标记出来呢?我要把大长腿给标记出来啊,但怎么标记咱们先看啊,我们先来刷新一下,看一下默认效果来在这儿呢,你是大长腿嘛,对吧?然后接下来呢,我把这个大案给标记出来,怎么标记呢?来个mark。然后结束的Mar,哎,好了,现在你看我标记完以后走,你你看它是不是自带背景啊,哎,这个大长腿自带背景啊,这就是定义带有这个记号的文本啊,它会把这这一段内容干嘛突出显示,把这个文本后面加一个背景色的啊,这就是咱们的mark标签。
11:11
好了,那放到这里边,我们来看一眼啊,这里面标记文本对吧,然后他会干嘛呢?他会给要突出的文本。加。背景色没错吧,哎,那OK好了,那这些标签我们了解过以后,接下来我们再来看我们的这个语义化标签啊,这个语义化标签是我们布局的语义化标签。布局与化标签啊,咱们在之前没有学过布局之前啊,我们不是在没有学就没有上过今天课之前,我们之前再去学这个div加CSS布局是什么样的。来比如说这里边我们快速写一个啊,叫做div加CSS的布局啊。好了,那这里边咱们是不是正常啊,我们一个页面,比如说我们来仿一个吧,看看。放一个来百度。
12:01
百度首页有没有对,就绑绑定百度首页吧,咱们来看啊,正常的话,这块是不是有这么一个大的div,大div分左右两边对吧?哎,然后中间又是一个div,这个div是在中间显示,然后下面又有div也在中间显示,是不是这么样的一个结果,那OK,那现在你看好了,比如说这个div我们会给它起一个ID,比如叫什么叫做h he DR,这是我们之前做的,然后中间它还有个内容,对吧?那比如说这块div啊,我们给它起一个叫做什么呢?ID等于man慢。主要的内容。MN对吧,然后再往下,下面是不是还有个底部,那底部的话,我们给它起个什么叫做呀,对吧,然后在这里面,比如说我们style开始对它进行设置井号ID,这个井号这个header怎么怎么样,比如说宽度,我现它这个100%宽对吧,然后高度,比如说我给它一个40高,好了,这是我们之前做的这个。样是吧,来给个包的移像素,实线的blue蓝色,然后再往下来,比如说慢也一样,井号main main,然后TH宽度,它的宽度可能会小一点,对吧,比如说我给他百分之呃60吧,然后呢,我让他Mar Mar。
13:13
十像素啊。Manin啊好了,那再往下来还有什么,再给他一个边框嘛,来BUILD1像素实现的,还是叫录吧,好,然后最后一个井号foot雅with对吧,然后这里边给他一个这个。宽度还是60%跟上面的对应了啊,然后。MR尖n Mar,上下为十左右,自动AU to AU to,好,然后一样给它来个边框,EPXSO,然后P给它个紫色好了,现在我们来看啊,这个页面我们就已经。这个上中下的结构我们就已经给他分好了,对吧,其他这两个为什么没展示,因为我没给它设置高度对吧,比如说这里边来个高度GI,这个高度给他300。
14:06
啊,然后这个高度he g,比如he g给他多少,给他比如也给他40吧,好了,那现在我们来看周里这个页面大概的布局,你看是不是先是这个长,然后中间那个内容,然后啊,您的底部也是正常的对吧?好了,那你看是不是大概的布局我们就已经有了,对吧?那有了以后注意啊,我这里边用的都后是不是都是div,然后我们给他去给他起的不同的名字。对不对,哎,这是我们之前布局的方式,那么如果我们要用H5的这个新的布局标签,我们要怎么去写呢?看好了啊,叫做HT03。03HTML5。布局布局布局布局。忘了布局单词怎么说了啊,好了,这里边来HTML5 HTML5的布局标签。布局标签好了,那这样一样,比如说我这页面中还是有头中尾三部分的内容,对吗?那么头我可以干嘛呢?可以用到hi的标签啊,这个hier标签就代表的是我们的头部,那么一样,每个页面是不是就只有一个头部啊,哎,它就等同于什么呀,等同于我们这里边给个div,然后井号,不是井号是ID给它设置了一个hier的意思啊,就等同于这个意思,因为这个hier在每个页面只有一个,只有一个,因为我们只有一个头部,那么有头部也有什么fot啊,也有福特底部,也有福底部,那么中间呢,中间我们可以用什么呢?可以用一个块状标签,对吧,比如说你用div,这没问题,那么现在我们推荐用什么呢?用selection标签。
15:38
S EL select啊,Select这是在H5中的布局的块状标签,那么咱们也可以看一下这几个标签,官方给他解释啊,来百度一下,这里边我们先搜搜一个叫做he DR header。好了,找一下HM。好,你看好了,这里边他给你说的是什么呢?角的标签定义了文档的页眉,说白了也就是顶部的样式啊,顶部的页面啊,然后再往后呢,还有什么,那foot的话,可想而知,Foot呀,它会告诉你标签定义这个文档的页脚嘛。
16:14
啊,是不是文档中的页脚部分,哎,也就是页面中的底部用起来用它,那么再来还有一个什么,还有个select。来selection标签,你看他说的什么文档中的区段看到了吗?哎,也就是这一个区块我们都可以用,什么都可以用select,那甚至我在区块里边是不是还可以再包含的区块,对吧?你看定义文档中的结啊,Selection区段的意思啊,比如章节,页眉、页脚或者文档中的其他部分,其实说白了就是你之前用div怎么用的,那么都可以替换成select。啊都可以,因为他比div更专业啊,你看div他给你的解释啊来。第。它就是一个块儿。你看文档中一部分会显示为N啊,这块可以颜色了啊,什么玩意儿?
17:02
定义法来,你看这是不是也是这么说的,你看可定义文档中的分区或节对吧?哎,这个标签可以把文档分分割为独立不同的部分,它可以作用严格的工具,并且不使用任何格式与其关联,如果用ID或class标记,那么可以直接让它变变得什么更有效对吧?然后用法是什么样的啊,所以说这是div是我们之前啊布局的标签,那么现在布局的标签就推荐干嘛?推荐大家使用这个selection布局啊,而且这里边也说了,你看好了,这里边你说4.0跟五之间的差异,Selection标签在H5中的新标签对吧?这是H5中的新标签啊,所以推荐大家用它来啊。好了,然后这里边往下来就不需要输入了啊,没什么用了,那咱们再看这是不是头中尾就有了那么一样,这里边我也可以给它继续干嘛,定义ID,比如说叫做main,对吧,我不用,因为这里边是定义一个区块一个节嘛,我说了它跟div是一个意思一样的,对不对?那么这里边我一样,我给它定义ID啊,如果不定义ID,我只用一个selection的话,那妥了,你这个页面中再有几个selection是不是都会被改变了。
18:09
好了,那这样定义完以后,那你看我在这里边直接style标签去给它设置,直接找header就可以了,因为我说了页面中只会有一个标签的存在,一个header的存在,对不对?好了,那开这里边同样我比如说我给它设置一个叫做什么呢?叫做marr j margin,呃,不是marin啊,宽度WTH,比如说宽度我们给他这个呃,百分百。百分百对吧,有宽有高。40,然后BOARD1像素实现的GR绿色,OK,这是一个,然后接下来呢,还有fo,你那我就不用再去写像定义ID了,明白吧,就是这个意思啊,不用再定义ID了,然后宽度,比如说我给它这个960PX,好,然后高度也一样,我给它事实,然后buildd啊包的一像素实现的,呃,这个P吧。
19:01
好,然后再来再来是不是中间内容呢,那就是井号main井号慢,然后width宽度,比如说我给它这个,呃,一样的啊,它是多少九百六是吧,来960。然后he高度我们也一样给他,比如说我给他个300,然后再往下来呢,包ER ber像素实现的叫做yellow。好给了这么几个对吧,那么同样我让他们两个居中一下,那这里边我就是fo呀和。井号manin对吧,给它一个上下为十像素,左右为自动,OK,那现在我们再来看。反过来刷新不对。这个吧,返回来刷新这个也不对,我这个页面没打开是吧,来打开一下。你看。是不是我三个块跟刚才那个是不是一样的,哎,这是咱们H5H天马五中新增的这几个布局标签啊,这都是什么浏览器,我都关一下吧,我就浏览器打的有点太多了啊。
20:04
把它关了,把这个也关了这个。我还用火狐打开一次啊。好了,这回出来了啊,OK。好,那我把前面那个就挂了啊,那你看这个布局跟我前面是一样的,对吧?哎,所以咱们学了这个新的,肯定用新的,因为五天百五中这个布局啊,它优化的会更好,对吧?它会让浏览器识别的识别度会更高啊,所以尽天尽量我们使用这种标签来来做什么来做优化,那么包括这里边布局还有什么呢?你看啊,我们经常在网站上还会看到这么样一个东西,比如说我们打开一个网站,叫做l Mo KL monkey。好,咱们来看啊,在这里边是不是有个侧边栏呢,你看。在这个位置。这个位置这是不是有个侧边栏对不对?哎,那侧边栏我们也有它对应的标签,而且一个网站一般定固定到右边的侧边栏也就一个,对不对?那这个侧边栏我们可以用什么呢?比如在这里边,这是Q里边,那侧边栏肯定写到这这个位置的,对吧?哎,那在这里边我们可以对应用的它的侧边栏的标签叫做。
21:13
Aid啊,这是什么,这是侧侧边栏,好了,那现在咱们来看啊,我在我们这里边再来刷新。OK,这是不是有个侧边来了,哎,那接下来的话嘛,我就可以单独对这个侧边来。来进行什么进行设置样式,比如说这里边我给他设置一个这个WPT就宽度,宽度给多少呢?比如说给他30像素有点小是吧,给他80像素吧,然后这个高度MN最小高度我让你变成200像素好了,然后给了你个边框包的一像素,实现的井号CCCC灰色,那么现在咱们来看我这里边。侧边栏是不是有了,哎,有了侧边栏以后,接下来这侧边栏干嘛,侧边栏是不是要靠右边来来做呀?哎,那靠右边来做,注意这里边我们可以怎么靠右,之前我们是不是直接给他来一个float float,然后right是不是这么靠右了。
22:09
放心。诶诶。侧边栏O啊。现在你再来看。走是不是直接靠右了对吧?哎,那位置剩下的你自己调是不是就可以了,没错吧,那也一样,那这里边我们还是可以给它进行靠右,但是我们可以不用它,你知道吧,我们是不是还学过定位呢?那么在定位而言,我们是不是说过,如果它的父类,它的副类是谁,是不是这个负类做了相对定位?子类绝对定位的时候,是不是就以负类为参考点啊,Relative,这是相对定位对吧?那么它的子类是不是再去做绝对定位的时候,Position叫做absoluteut,在做绝对定位的时候,它的参考点是不是就变为它的负类了?对吧,它的负列是不是就这了,哎,所以这个时候咱们来看我同样,比如说我告诉他RA距离右边为零,像数好了。
23:04
总理你看诶。刷新。我这里边RIG啊,怎么老打错呢。来再来刷新,OK,是不是距离右边了,那么同样上下我是不是还能调整啊,那上下调整我就可以干嘛计算一下呗,Top叫做clc,就是CSS计算属性啊,那么你的这个它的这个高度是什么?是不是就是我最小高度是不是就200啊对吧?哎,200PX除以二减去它自己自身的高度对不对,它自身,哎,不对,它负类的高度吧。负力高度是多少?负力的高度你看是300对吧,所以应该是300除以二减去它自身的高度,是不是就能随就能找到它居中的高度了,对不对?那现在我们来看,再来刷新。我。300除以二减去它的一半吧,哎,就200的一半,这个时候才是这个居中的高度啊好了,走你你看是不是就拿到居中的高度了,我这个侧边栏是不是就在这居中了,对不对?哎,当然它是在这个位置一直是居中,因为现在我没有下拉列表啊,如果有这个垂直滚动条的话,你看好了,比如说我们把谁给大呢?
24:20
来,负的给大宝啊来。OO在这里边啊,高度我们给它。940。好了刷新看好了这个滚动条是不是有了,来刷新刷新滚动条现在是不是动的。看到了吧,哎,这个滚动条是动的,而人家的滚动条动脉,你看人家定位到这里边,是不是始终都是定位到这里的,所以这个时候我要需要干嘛呢?把它的这个定位设置就要改一下了,不能用什么,不能用这个定位了,而是用这个f fixx fix定位,那用fix定位的时候再来看。这里边刷新你看他就以谁了,这回你就跟负类没有,跟这个负类没有关系了,他就以这个浏览器去定位的了,看到了吧,哎,他就以这个浏览器来定位,始终都以浏览器来定位了,这个高度我这么设置也没有用了啊,那你就自己找个位置,比如说在这里边我直接给他一个top,等于多少呢?比如说我就给它定义到100的位置上好了,就是距离顶部就100,它始终就保持到这,你看始终保持在这,你这边随便做随便转,它是不是都在这块。
25:20
哎,这就是什么呢?侧边栏啊,好了,那侧边栏完全还有什么,就好比我们在第一个项目的时候,我们是不是还经常写文章啊,对吧,那文章比如说在这块啊,我在这里面再来一个区块。啊,或者在它的上面区块里面是不是可以包含的区块,诶selection,那这是一个区块,这个区块好比就是一个文章区块啊,这里边我给个HR叫做该区块区块要书写文章,好了,那么现在我们来看啊,来再来刷新,你看这里面写了该区块要书写文章,注意这个区块谁是不是这个select,也就是这个ID里边的这个selection,对吧,我没有给它定义内容,那么我要找的话怎么找,是不是井号慢里边的。里边的selection对吧,大家在找的时候注意啊,尽量不要给这种这样的,就是这种子代选择器,你知道吧,因为这种只要是在里边有袋都会被选中,你尽量找好,一定要精确的去找,这是最好的啊,直接是干嘛,就必须是它它的子类才可以啊,那它我给他一个包的一像素实现的红色。
26:20
好了,那现在你看我再来刷新,你看它是不是本身就是化妆标签呢?哎,那才说了,这是要这个地方要该引它该区块要书写文章,那是不是要有文章才行啊,那么写文章在这里边我用什么来表示呢?看好了,我在这里边就用article标签,A r TL article这里边啊,就是我们所有的文章就可以写到这里边来了啊,比如说这里边80岁,80岁老太太为何意外怀孕?200头母猪为何半夜惨叫?这呃女生宿舍为何频频被盗?这是人性的扭曲还是道德的沦丧?请看下集。
27:05
某某的不归路。好了,那现在咱们来看。刷新我的文章写到这里来了,看到了吧,哎,但是写到这里就叫文章嘛,不是我说了,这个东西不是给我们用的,给谁用的,给搜索引擎用的,对吧,给浏览器用的,浏览器在识别这块的时候,就是在解析这个代码的时候,他知道啊,你这里面包含的什么是文章啊,识别select的时候他知道啊,你这里面包含的是区块,直接到HR的时候,你这里面包含什么,是一个二级的标题。明白吧,哎,不是给我们用的,是给谁啊,是给浏览器来用的啊,那么包括包括咱们再来看这里面还有一个东西,你看好了,到学原理,因为这里面是不是还有一个导航呢?看没看着哎,那么导航之前我们怎么做,是不是也定义一个div,然后给他设置一个ID叫什么叫做NAV对吗?那现在不需要了,我直接在这里边,比如我在hi的下面给个一个AV,这就是我的导航了啊,这就是我导航了,那么导航里面继续写,该写什么写什么,比如UI Li,然后Li里面写个A对吧,第一个什么首页,然后肯定cvvvvv OK,有这么多好看,好了,我是直接给了谁给了n NAV,那么u Li跟Li标签他们是自带样式的,对吧?所以这里面我先来设置一下u Li跟Li。
28:17
Ul跟Li,把它的样式给它去掉啊,Ting为零,然后may接Mar也为零。好了,然后这两个都设置为零以后,接下来还有什么,还有它的这个list-style等于no OK都给它设完,设置完以后,现在我们再来看啊回来。刷新一下,看我的导航是不是就有了,哎,导航有了以后一样啊,我们再把这个n NAV再来设置一下,比如说NAV,然后给他一个BD包的一像素。So,实现红色啊来,你看好了我的NVNV是不是也是取也是个块状元素啊对不对,那NV完事以后接下来干嘛,我是不是就是可以让NV里面u Li里面的Li给它进行float left什么样的左浮动就可以了,左浮动之后这会你来看刷新。
29:09
是不是都上来了,注意啊,上来以后NV是不是找不到里边的东西了,哎,因为里程图一浮动,无论是NV也好,还是UUL都找不到了,所以这里边V威廉他能找到,给他一个overlow等于hidden,它可以干嘛识别子元素的高度。看到了吗?是不是包含过来了?哎,它包含过来一样,Ul需不需要?其实ul也需要,只是我们一直在做的都会忽略它overflow。O overflow等于hi,好,那现在我们来看。刷新没什么变化对吧,但是啊,注意,如果我不给它的时候,你看好了来buildd啊,BORDERDER1像素实现的井号000黑色,如果我不给hidden的时候,现在你来看这个黑色的边框在哪呢?是不是在紧上面一条边,因为什么?因为它的子类走了,他感知不到高度对不对?所以这个时候我需要给他overflow hidden,让他再来感知高度,那再来刷新,你看是不是还有啊。
30:02
哎,那OK,那这个就是用来我们布局什么布局我们这个标题的啊,导航的啊,我们可以直接给这个拍on,上下为十左右为20,好了,让他们距离也拉开,导航我就有了,看到了吧,哎,这就是咱们用的这个NV标签啊,直接给他设置,因为导航我们在页面中一般也就一个,对不对,哎,有可能有多个,那么多个的话,我可以给干嘛给NV直接去设置ID,这是没有问题的,但是我说了,当浏览器解析到NV时候,他知道这里面装的是什么,是我们的导航啊,是我们的导航,OK,这就是咱们的这些布局的语化标签,那么另外还有一个标签叫什么呢?叫做。Ad ress,这是一个什么标签呢?它是一个地址标签,也就是说你这里面的地址写到这里就可以了啊,叫做地址标签啊,你所涉及到地址写到这里来刷新一下,你看这里边有个地址标签对吧?那地址标签长什么样呢?那咱们也一样看它是块状的还是什么,还是行内的啊,ADD res这里边直接给它一个border的移项素,实现的红色,好,那么接下来我再来刷题,看它是不是也独占一行了,哎,也就代表什么,它也是什么,也是块状的对吧?那地址这里边咱们就可以直接给地址了,对吧?比如说给什么地址呢,北京市。
31:17
昌平区。昌平区回龙观。啊,育荣教育。园区。好了,那现在你们来看,我再来刷新OK地址是不是就有了?哎,好了,这些就是我们常用的这些语义化标签,也包含着我们布局的羽化标签啊,那OK,咱们来看一下,这里边我给大家也都记了啊。OK,头部标签,底部标签,导航标签,地址标签以及区块标签,文章标签,还有什么?还有我们的侧边栏,好,那么当我们第二个项目布局的时候,就会使用这些标签进行布局,所以大家这些标签一定要去给他记住啊,好了,那这节课我们先到这里。
我来说两句