00:00
好,那我们来继续啊,那么这节课呢,我再把这个导航给它做出来,但现在呢,我们还没学GS对吧?我们没办法做出这样效果,但不要紧,我们可以先把鼠标放上来,让它先显示对吧?等到后期我们学完这个GS以后,我们还会这个平复的过来来去改这个页面的啊好了,那这个先给它一样,先给它缩小,那么最终都是鼠标放上来对吧?鼠标放上来让它显示。但在移动端鼠标放上来显示能好使不?我们试一下来,因为现在我们没学GS嘛,对不对,好了,那去找找到什么呢,找到这一块。对吧,在哪在这里边注意这是不是我的这个导航啊,在鼠标放上它以后,我要它下面的东西去显示吧。没错吧,那也就是说在这里边,比如先给他一行一去占位啊。来刷新,你看好了。这里。刷新。他始终是在这对吧,那我要给他干嘛,我要给他这里边的内容,给他设置一个让他浮动啊,我给他换一个selection,不是设置浮动,设置定位啊,来看好了,我给了一个selection标签啊,刷新。
01:00
是不是在这呢?哎,咱先不管它导航到底长什么样,对吧,咱先把它给它设置了这是什么,这是咱们移动端的导航对吧,那直接给它设置一个class叫做什么叫做这个呃,SM杠。NAV是吧,注意我没有用NAV标签啊,为什么?因为大家知道我这个页面中最终会产生两个导航出来,对不对?呃,因为你没有办法去调整,就是说我就写一个导航行不行,你看好了,人家两个导航完全不在一个位置,看到了吗?这个导航仪是在下面的对不对?而等你到这个缩小的时候呢?哎哟,那你说到这个时候呢,人家导航是在这块在这里的,对吧?所以你没有办法去做做这么一个对吧?所以我们只能是做两个,那好了,那先在这块有这么一个东西啊,有这么一个一行一,我们先给它调整好完,然后再往里面加代码就可以了,对吧?那这是小平的,小平的,我是不是要跑。跳出这个这个范围之内,对吧,这里面继续我们要写的是叫做移动端导航。移动端导航样式好了,那么移动端导航样式的话,那这里边我们刚才给他起的名叫什么点AV叫SM-AV是吧?SM-n AV好了,给它进行一个设置,那注意它的宽。
02:09
Width,你给他设置100%,这是没有问题的,因为他本来就是100%的,对不对,那现在你看好了,如果我给他设置100%,他是跟谁100%的。刷新。有看出效果吗?没有是吧,我们可以给它加边框来包的移像素实现的井号CC不行,井号红色啊,我让它红色red,这样的话我们看的会更清楚啊,好了来刷新。你看它是不是只在它这个负类下进行100%啊,哎,所以这个时候我们需要干嘛呢?给他一个this play,不是this play叫做posi,等于阿8UT叫他干嘛,绝对定位嘛,绝对定位以后你看刷新。这回是不是就出来了,出来以后注意它应该什么,应该是满屏的,是不是到这你看好了啊,人家一点是不是相当于从这块儿开始,对不对,那OK,那也就是说在这里边。其实这个代码格式啊,我们都应该让它。
03:04
变一下不应该,我不应该把这个代码放到这里啊,放到这里面会很乱,我应该拿到下面来会好一些,知道吧,是这个意思啊。嗯。但是我不放到这里面的话,我就没有办法让how能让它显示,是这个意思啊,咱们可以先看一下啊,比如现在它是隐藏显示的,对不对,然后呢,我们给它设置隐藏叫做display为这个no隐藏了,那什么时候显示呢?是不是这个当鼠标也就是点。我们先找一下,我忘了他叫什么名了。好。他他他好了。是不是这个意思啊,你看。点它,它下边的谁呀,下边的I标签冒号last-child最后一个I标签对吧,但最后一个I标签冒号号啊,当我把鼠标放上去以后,当我把鼠标放上去以后干嘛呢?我让他。
04:01
里边的谁呀,里边的这个叫做点SM NAV,让它这play,为什么呀,为这个BCK,是不是这样它才能显示出来,对吧,那现在你看啊刷新一下。好了,没有了,鼠标放上来。鼠标放上来。是不是菜单样的显示看到了吧?哎,那OK,鼠标方向来拿走鼠标方,但是我我注意啊,我这里边都用了一次点击啊,我都用了一次点击看到了吧,哎,所以我注意我们后期学完GS,我肯定要把这个东西再调整,但我们现在先写出来啊,大家先明白怎么回事就可以了啊好了那点因为它是移动端嘛,我肯我鼠标放上来,它肯定不识别,它不像在PC端,PC端你鼠标放上来它是识别的对不对,那现在我只能点击一次,它会显出来,然后鼠标拿走它会这样,然后接下来干嘛,接下来我是不是就开始去给它设置它的这个。它的宽度不是设置它的宽度啊,设置它的定位方式对吧,那定位这里边在这儿了,我让它干嘛呢?距离左侧为零像素,好了,距离左侧为零像素啊,这回你再来看。
05:02
走,你。看到了吧,这回是不是才满屏的,那我这个因为给他边框了,我给他设置一个叫什么。For books,让它变成模型啊。刷新。哎,这回是不是对了,哎,但现在我不能让它,不能让它老老隐藏啊,我先把隐藏给它去掉啊,隐藏先去掉,因为当我们调这个样式啊,好了,那接下来注意这个时候宽度100%没问题了,对吧,那我高度呢。我高度应该是多少啊。高度是不是也要占整个屏幕的宽度,对屏幕的高度对不对?但是谁能确定我屏幕高度到底是多少呢?我屏幕高度是不是还会往下拉。没错吧?所以我这里面的高度是不是要给也要给它设置100%啊,哎,那OK,我们就来给他设置一下啊,也就是这里边的高也要给他一个100%,好,那现在我们来看周一。高度过来了,有了吧,咱们来看啊,高度是不是也是100%对吧,那这个高度满满的这个屏幕肯定是它要有一个什么,有一个这个叫做呃,叫什么色类的叫做叫做透明色吧。
06:10
啊,不叫透明色,就是这个跟它一个颜色的,你看这里边是不是也一样的一点下来,是不是跟它要有一个颜色的,对不对,哎,所以这里边我们这里边也是,那它的这个BA克color为井号F1吧,咱们这个颜色,那现在再来看啊,返回来周尼。OK,井号F1有了对吧,有了以后呢,接下来这个叫什么这个呃。这叫什么东西来着,V吧V让他再往下一点啊,往下一点,往下一点的话,我给他一个马景吧,马镜杠top,让它距离上边五项数,看能不能下来啊来。下一项。OK,下来点对吧,下来点之后边框我们就可以给给它干嘛给它去掉了啊,在这里面这个大红色边框我们就不要了。然后。搞定了,这回看啊,它与上面是不是有一项素的白白边啊,对吧?哎,这个白边是靠什么,是不是靠我这个顶的,那可以让它没有边边,比如说我给它设为三项素。
07:10
走你对吧,我为什么不敢设置它的top值,注意啊,为什么不只设置LA,我要设置top,它是绝对定位,一旦设置top是不是根据这个点去定位它了,哎,所以那就把它给覆盖掉了啊,所以不行啊,那OK,那现在它搞定了,搞定以后那么一样,这个红色边框啊,我们再开起来,开起来以后我要去往里面去写它的内容了,对不对,写什么,写我们的这个UL了吧。来找到我们这个标签。啊,在这个标签里边啊,我还要给他一个注释啊,方便我后期来查找。叫做。学完GS之后啊调整。吃醋。内容啊好了,那这里边。给他一个u Li u lil里边我们要放的是a Li对吧,Lil里边我们再放的A,然后这里边第一个是首页对吧,CTRLCVVVV好给这么一堆,然后最后一个我们还应该还再加一个对吧,他还最后一个什么,最后一个是这个叫做登录注册。
08:13
登录。再来一个。注册好,那现在我们来看。走,你。OK,没问题对吧,大家注意啊,这里面的字,你看这里面字都比较大对吧,你看好了这里面字都多大来。找一个字体。这里面的内容。往下拉看看有没有默认的值,你看放到size。它这里面的字体通过谁,是不是通过它来设置HY的CSS的第40行看好了啊,是我SM-RA里的,因为我是不是设置了它呀,所以它这里面的都会大了,你看我把它缩小,这是不是缩小了,看到了吗?哎,所以这块的内容,这块的字体我是不是还要单独给它设置一下,哎,那OK,那先不管它啊,因为我要把这个整个内容还得先调整一下,那咱们先来调这里边SM里边的。
09:07
L。第二。里边的ULUR,我给他一个什么,给他一个marn Mar Mar g,我给他marin也行,我不给他marin了,我给上面的pading嘛,来paddg pading-left杠。Left行单独设置吧,左边距离左边十像素,Padding down top距离顶部也给他十像素好了,因为我设置了这个东西了,我不怕了,对吧,那现在咱们来看,我只是让他把这个内容往里边移,移动一下啊,移动一下以后,接下来呢,就是ul的问题了,对吧,那ul这里边。嗯,我要给他先设置的小一些。他不需要了啊,它这里边的Li先把字设小吧,Li里面的A对吧,我也不需要给他做什么,做伸缩的一些操作了,对吧,Li里的A直接是放杠size给它设置e re是不是就是16项座对吧?那这个时候你看我再来刷新。
10:11
诶是不是就小了,小了以后一样,那这里边的这个什么,这里面的这个叫呃,字体颜色我再改一下吧,叫做方杠S为井号666。走,你。哎,设置错了。放到size color啊,Color。OK,都变过来了对吧,然后这个树干,这个树干是怎么出来的,这个树杠是我手打的吗。这里边。哦,是我手打的对吧,也就在这个Li里边最后的一个Li对吧?那OK,我就单独调最后的Li,那点SMV下边u Li下边的Li冒号last杠是不是最后一个Li,最后一个Li的found-size为也让它变成最小,那现在你再来看。
11:08
走,你。好了,这回是不是就协调了,哎,协调了以后呢,一样该写什么东西写什么东西,对不对,那这里边如果要有二级分类呢,我一点开以后,是不是也让它显示二级才行啊,那这里面继续。红色边框我们就可以给它去掉了,因为现在我们已经有文字的这个撑开了啊,就不需要这个效果了,对吧,那现在你看下边我们拉到最下面来啊,也没有什么太大影响,看到了吧?哎,因为往上拉,它跟着我这个高度在走,看到了吧?哎,但是实际高度在这呢啊,因为我这个调调的这个样式嘛,好了,那接下来就是什么,接下来咱们要做它的这个二级类啊,二级类那一样,这里边我们随便找一个在这块下边。哎,我做一个就行了,因为后期都是循环的,对吧,编程系列。然后给他ul。Lia,然后继续这里边要写的什么,这里要写的是,嗯。
12:04
细说pap。CTRLCVV,好,给这几个。来这位啊,稍息。你看好了,我新加的这个内容是不是也变得大了,因为什么都符合这个要求。对不对,那现在我想让它都变成小,那怎么办?这会儿你看好了我是怎么设置的啊,那这里边就不要给它设置了,直接什么Li空格A,那只要是这里面的A,只要是Li里面的A是不是都可以了,那现在你看好了是不是这样的啊,来刷新。是不是这样的,然后这里边一样,它是二级的,那二级的你看好了,我们这里边研究二级的。是不是正好要有一个距离啊,哎,所以这里边我也给他挪一些距离啊,那这个距离我们应该怎么调。找到二级这里边。这儿呢啊。点。S m NAV下边的u Li下边的Li对吧,Li里边是不是还有u Li,那我先给这个UI,给他一个包,ER1项数实现的红色我们先。
13:11
返回来刷新。看好了,它是在这儿呢,对吧,那么咱说了它这里边应该是干嘛,是不是也应该再往里面再缩进,因为它是它的子类,对不对,所以再给它缩进一层的话,那我这里边直接给他一个。叫做。Mar Mar刚left对吧,比如说这个妈刚才我给多少,我给给的这个三有3M的太大了吧,不大好,五才一百六对吧,我给的3RE吧,16像素,三个16像素嘛,对不对,那来走你。好了,这回你看是不是在这块了,哎,那在这块以后接下来干嘛,接下来那我这个点点还要吗?呃,不要的话我们就给他取消呗,但是我记得我取消了ul没取消是吧?那OK,来list-style为na好把点给它取消它。
14:06
刷新。点现在是不是也没有了,哎,点没有了以后一样,咱们每个Li也可以,这个外层Li也可以调一下行高的要在这个稍微高一些,对吧,也可以啊,那这别的就不管了,那直接把这个边框我就去掉了啊,边框去掉,边框去掉。移动端导航样式在这儿啊。这块一样,我给它再解个注释,叫做移动端导航样式结束啊结束好了,咱们来看把它去掉,去掉以后接下来这里面东西没什么可调的了,因为它本身我们就不用去改什么样式,对吧,但它默认应该什么,默认应该是没有的,鼠标放上来是不是才显示。对吧,所以这里边我们要给它调一下叫什么,叫做this play为no,然后再往下来点SM。杠NAV下边ul下边的Li冒号,当我鼠标放到这个Li的时候,我再让它里边的它里边的u Li对吧?干嘛呢,这play为B让它进行显示,那现在你再来看啊,我来刷新。
15:15
默认隐藏的对吧,当我鼠标放来我得点一下啊,是不是才显示,因为这我说了这是在移动端对吧,哎,上我我现在点一下显示了,我上别的地方再点一下它才没有,你看这才没有看到了吧,哎,点一下它才显示。诶。好了啊,看这是不是才好使啊。OK,点一下没有了,再点一下显示。为什么点这了不老,那什么你看啊,为什么点它老出来啊,因为是它这里边有个A标签,我1.a标签,A标签是不是重新刷新了,对吧,重新刷新了这个页面是不是重新回来了,所以我要点Li,我点到这都没事,看到了吧,这都是属于Li的范围内吧,哎,我点到这都没事,点别地方就行,只要不点文字就行,因为文字归A所有,我一点文字,它重新刷新了,你那一点文字是不是重新请求这个页面了,就是这个意思啊。
16:03
好了,这里面的Li我们还需要去调整吗?就这样我觉得挺好看了啊,调整一下吧,嗯,Nv u Li不是它。对吧,我们可以给它加一个糖高了,那比如说这里边来。比如每个行高三次像素。刷新。就相当有点距离嘛,对吧,包括后面咱们可以给他什么,给他这个箭头吧,哎,但这个箭头我只能给一个对吧,鼠标放上来换箭头也行啊,那先给一个吧。给他一个箭头Li这里面来。B芽孢的一像素实现的红色,我要给谁给这个Li放箭头了,对吧?来看好了啊。Li都在这儿呢,对吧,给这个Li里边的内容,哎,我这个Li怎么默认还是斜体呢。是不加边框,怎么还变成斜体了?我在R里面有A吗?有这个I标签吗?
17:02
啊,正常啊正常OK。好了。来先把红色给他,给他以后啊,我们来看。我这个要往哪儿放会比较好,比较合理啊。Li注意了,Li后面肯定是挺长一趟对不对,那这个箭头如果我放的话,肯定都都跑后面来了,肯定都跑后面来了,对不对,那我要的什么,就是不是只能要么就放后面,要么就放前面呗,那比如说放后面的话,咱就不能给Li就要给谁,就是给A标签了,为什么给A标签,你看好了在这里边。来把它再复制一个出来啊。但是这里边我需要加一个箭头,直接找到子类的这个A吧,然后给他一个包的移项数,实现的红色red好。你看啊,我A标签是多大,A标签是不是这么大,哎,所以我在A标签的元素后面加一个什么,加一个那个小箭头是不是没有问题。对不对,哎,所以这里面大家要注意啊,包括那比如说我就想给Li设置,那行不行也可以,那比如说把Li再改一下呗,叫什么display,咱们是不是有一个叫什么。
18:07
Block,那把它设置为inline block的话,那它是不是就不占据。一行了,但不占据行了,这是不是就不行了,对不对啊,所以这里边我们要想调整它的话,那怎么办?我们用很多种方式,明白吧,就不一定非要用一种方式给它做出来,对不对?那比如说Li外层是谁,Y外层是ul,那比如说这里边咱们看啊。嗯,我不给他设置什么设置这个了,我给谁呢?我给点V,咱们然是用什么用这个叫做核,那我就继续Dis play为feel,但是大家知道我一旦深核以后,是不是就跟现在这个效果是一样的了。你看是不是跟现在效果一样了,但是我可以干嘛呢?我是不是可以给它设置以纵轴为主轴啊。对吧,叫做FL。Ex等于可c Lou什么MN这个对吧,现在你看是不是又回来了,这是不是以纵轴为主轴来了。
19:01
对吧,啊,以纵轴为主轴,那接下来一样,我是可以在这里边进行什么进行相应的设置,但是你注意这个Li还是什么,还是很大的啊,你看Li是不是又给我占满格了。看到了吧。看到了吧。哎,Li又给占满格了啊,RI又占满格了,好了,那RI占满格了,那就算是不行的话啊,这个我只给大家演示啊,咱不用这么做啊,我只是讲有很多种方法啊,一样我再给它删掉啊,那看来再看。刷新还是回来,现在我们是正常了,对吧,也没有生成盒,什么都没有,还是还原默认了,那么这个时候咱们怎么办?比如说我就想在文字后面加,那么文字有长有短,我们也不确定对不对,那你看好了,我在HTMMR这里边,你看啊,每一个外层的标签后面,我是不是可以给他再加一个I标签啊。也就是说Li里边不一定非要有A,也可以加个I吧,对不对,那比如说我就给这一个了啊,以这一个为例。L。诶给个这个来你看好了,我在他后面我加个一啊,就先给个一就好了,来你看刷新。
20:04
一有没有有吧,那一样,我点开点这点开出来下面是不是没有影响这个一要放什么,这个一要放的是不是就是我们这个内容啊。对吧,所以这里边我这个一也要改一下啊嗯,A。没问题。CTRLC还有一个。里面的I。好。刷新。这不是不是变小了,点开放大对不对,哎,那这回就放有的这个I标签了,那我放个小小这个小图标是不是就轻松了,那直接给他一个class等于I对吧,其实有很多种方法对吧?哎,就不一定我们说用就你就记住啊,在现在我们练习这个页面阶段,你不管用什么码,只要你能够布局出来这个样式就可以了。明白吧,现在也没要求大家说你要给我精确这里面多少像素,一个像素不能浪费对吧,而且是等比的,这个这块是一个像素,那个对应PC端也是一个像素,没要求这么多,对吧,你只需要能够布局出这个就可以啊,好了,那这里面一样,我再去找一个这个小图标去啊。
21:14
呃,先是什么下箭头对吧,完了再是这正好这俩箭头就他俩了啊。来。先是一个这个。我没有办法换。因为它是类。对吧,哎,我只能换类才行啊,只能换类才行,我就给一个了,到时候后期我们用这个反正都用GS或期用GS换啊,那你看一点开一点开是不是就过来了,哎,而且这个是不是就放在这,那你一样,你比如下面是首页,那我这个Li你看好了,首页这里面就两个字对不对,但是它也不会有影响啊,它是不是也仅在紧挨着它后面的。你看是不是也紧挨它后面的,诶,我怎么放了这么多。刷新一下。我是不是复制错了。I。
22:09
结束的爱好。好了,这回就不对了,哎,那当然他没有没有子类对吧,没有子类的话,那。这个东西就没有什么用了,有此类的一点是不是就出来了,哎,那OK啊,这就是咱们的这个导航那么一样,他的一点再说过去啊,好了,那把这块内容该注释的地方我们就都注释掉了啊,该给大家演示的也告诉大家了,就是说在我们去布局的时候,不要局限于一种方法,你这种方法做不了不要紧,没人,没有人拦着你,你可以马上变方案,再继续做下一种方案啊。好了,那这块就是我整个移动端导航的样式,那那后期呢,我们会通过GS,我还会再去调整它啊,先来刷新一下,我把这个这些东西都没有了,那这个东西我还要让它隐藏掉,那隐藏掉的话也就这里面的这个play ne我要给它开起来好了刷新。OK,这就完事完事了,对吧,点S,它显示点S,呃,点别的地方,点别的地方点别的地方。
23:03
嗯,对,点到这个别的地方就别点到他的范围内,对吧,点到别的地方它就没有了,因为这是在这个手机端啊,那一样我再调整一下,你看这回再放大,放大对他也没有影响,对不对,哎,其他的一切都是正常了啊好了,那现在这个导航头部的内容我是不是就不完了,那布局完头部以后,那么还有公共页面,什么公共页面是不是就是我们的这个。底部啊,底部缩小的时候是这样的,对吧,放大的时候呢,是带了一个这个内容的,没错吧,其实小的时候呢,我们已经做完了啊,就是已经有这个东西了,那么只差把文字夹里头就可以了,没错吧,那OK,这节课我们到这里,下一课我们来布局我们的公共。
我来说两句