00:00
根据设备宽度的不同,让展示出不同的效果来,那么咱们来看啊,比如说在这里边ul,然后Li,然后这里边,比如我们随便给几个像素啊,比如说500像素的。500像素的,我让他变换背景颜色啊,然后呢,比如说这个呃。600像素的,嗯,乘以七百二的,这个是不是有高度的限制了,对吧,我让它变换颜色对吧,然后再来Li,然后我再来一个,比如说八代像素的,诶,我让它变换颜色啊,然后再来Li,比如说这个1024的。啊,我让它变换颜色,就这么几个效果,能明白吧,就看你设备多宽,但是这个不光有宽,还有一个高的限制,当然我能看宽,我是不是也可以单独看看高啊,能明白什么意思吧?我就不给大家举的那么详细了,可以吗?啊,那么咱们来看啊,在这里边那style标签,然后at media开始进行查询,你要查的是什么,我要查的是。什么意思啊?
01:00
屏幕吧,哎,然后呢,在这里边开始去给他条件啊的,并且并且什么呢,并且它的这个叫做。WTH宽度对吧,宽度等于多少呢?宽度等于这个500匹差的时候,那么这个时候我让Li冒号NTH杠的第一个能理解吧,哎,让他的BB变成红色,那么好了,这个时候你来看刷新,刷新以后现在没有变对吗?诶,500。五。有吗?准备吗?来现在是不是整整500的注意这个背景颜色有变吗?没有,也就相当于根本就没有走到这里边来,对吧?那么大家注意,只要是你需要去做这个响应式的时候,或者做移动端的时候,你必须再去设置一个mate标签。Meta mate标签啊,Mate标签还记得。
02:00
我笔记呢?在我们最开始讲M的时候,有一个最下边就是hi,里边能放的标签有哪些,然后在下面有一部分标签我没有讲,还记得吗?还在这里边是不是。这一组标签我没有没有讲啊,对吧?那么咱们来看阻止移动浏览器自动调整页面的大小对吧?大家注意啊,只有PC端的浏览器是可以调整大小的,对吧?我们可以进行缩放对吧?或者是怎么样,或者是通过这种方式,比如说我可以通过这样拽对吧?哎,只有PC端浏览器是可以的,移动端可以吗?移动端是不可以的,对吧,移动端浏览器是固定的,你屏幕分辨率多大它就是多大,对吧?所以呢,我们需要通过这个name等于winport去设置它的视口属性,设置出口属性有这么几个,那么CT内容第一个是这个初始化的这个大小啊,它是2.0,那就是相当于它最大允许放大到2.0,明白吧,但是呢,咱们要做完美四口的话,需要做两点,第一点是宽度等于设备的宽度,这是必然要设置的,这是第一点,第二点呢,就是它的这个大小为1.01.0是不是正常宽度,对吧?这两个同时设置就叫做完美四口,这是我们用的最多的啊,用的最多的,那么这个里边对每一个有解释说明,这个ma的标签定义的是是否属性,然后这个呢,意思是将页面放大什么呀,两倍对吧,然后宽度等于设备的宽度,是告诉浏览器页面的宽度能与设备的宽度对吧,等于不是能与。
03:32
然后再往下来,那么你看微po这里面又多了,还是一样宽度等于设倍宽度,但是最大的缩放是多少呢?是三,最小的缩放呢是0.5,这什么意思呢?就是允许用这个用户将页面最大放置到多少啊,三倍啊,最小呢就是什么呀?就是宽度的一半对吧?我不知道大家有没有,就是有没有用过,就是手机端浏览器,我不知道现在能不能了,苹果的应该是不能,你们可以试下安卓了,然后你们打开任何一个页面都无所谓啊,只要浏览器打开就行了,然后你双手托住嘣放大,看它能不能放大。
04:05
试试。没事,忍了,允许了,拿一个试一下。随便打开一个浏览器,苹果的不用试了,拿安卓的试不用试?就看你们安卓里的这个能不能就俩手一拖放大,你别以为平时我们用图片来,手机里打开一个图片,不能俩手一托,图片放大了,一缩回去图片放小了对吧,你看浏览器可以吗。可以。安卓的可以,苹果的好像不行,苹果的是不行,你是苹果还是安卓的。啊,张帅的可以,你的可以吗?我试试苹果的。啊,苹果的也可以啊。看到了吗?啊,苹果的也可以啊,它就是指的是这个就是用呃,这个最大放大大多少,最小放大多少,就是这个意思啊,然后呢,再往下这一条你看好了啊,Name等于winport,然后它的初始大小就是1.0,然后user什么玩意为no。
05:14
啊,什么意思呢,就是禁止用户缩放,禁止用户缩放一般加这个属性的时候,他是做什么呢?是做APP的时候才会用。明白吧,因为APP,你看任何一个APP,手机APP,它能俩手指点放大吗。不能吧,任何一个APP都不能了啊,它是为了更逼真的去模拟APP的时候才会加这个属性,所以我们要想去用它的话,那这个时候我们也需要去给它设置漱口属性,Name等于。Vwpt winport不是这么拼的是吧?WPT对吧?看一眼别写错了,Vw po,对啊,然后再往下来content内容con content是我的这个with宽度,With等于什么呀?设备的宽度DV-WTH。
06:09
没打错吧?来哪去了,这呢,WT等于D-with然后接下来就是什么呢?就是我们的这个缩放的这个。比例。In ni-SC等于多少呢?等于1.0啊,我不让你进行输放,这么设置就是一个完美的S。外卖思考啊,所以大家就记住,你就记住这一句话就够用了,明白吧,当然了,有没有一些其他可能我们在这里边还没见过的,有的有的他就会加,但是那个是给他自己用的,不是给所有人用的,明白吧,这些是给所有人用的,就是我们共用的东西。能理解什么意思吧,就跟传参数一样,我们传参数问号往后是不是有好多东西我们都看不懂啊,对吧,我说了那是人家网站自己设置的啊,所以说你不用去管它啊,这个记住就可以了,那么当我把这个设置好以后,这个时候我们再来看变没变颜色。
07:11
宽度当前是500对吗?如果大于500没了,小于500没了,但是我调到五,诶诶。有没有看明白了吗?是不是我加上这个属性以后,他才能去给我干嘛去感知我的四口啊对吧?好了,这是500像素的,那么还有可能什么呢?是600乘720的对吧?那就是爱media media继续screen查查什么呢?查and。这个叫做width,宽度是。600像素对吧,再安的并且并且什么呀,并且这个高度是多少呢?是七百七百二像素,好了,这个时候我让Li冒号NTH杠的第二个让BA background,比如说变成这个颜色,那么这个时候我们来看啊。
08:02
呃,多少来着,六百六百乘七百二是吧,那你看放放放放,诶六百六百六百六百。600有变吗?没有,因为什么高度是不是没达到啊来高。看到刚才变一下了吗?看了诶。七百二好了。是不是600乘720才能变,看到了吗?这个时候不管你的是宽度还是高度,只要差一项数它都没有了。看明白了吧,啊,然后还有什么呢?还有800的,那800的我是不是可以继续再继续查询呢?Screen的浏览器,然后并且and,然后这里边with是800吧,对吧,然后Li冒号NTH刚的第三个,然后BA。
09:04
CK呢,给他一个蓝色,那么现在你来看,当我拖到800的时候。诶。哪,大框没了?嗯。好了,这个是不是变了会了吧,这就是媒体查询呢,会玩了吗?但是呢,媒体查询的时候,我们不会去指定固定的宽度。不会去指定固定的宽度,我们会指定区间的宽度,而且大家记住,只要涉及到移动端布局,如果这个页面是响应式的,那么响应式的布局一定是移动端设备优先,然后逐级放大。明白吧,就是先支持最小的,比如说最小宽度就是500像素,那么好了,500像素什么样,700像素什么样,800像素什么样,一千二以上什么样,是这种情况,明白吧,比如说500到700是一个区间,对吧,700到900是一个区间,900到1200是一个区间,超过1200又是一个区间,那就是大屏设备了。
10:12
明白什么意思吧,哎,所以说在我们实际上去做想应数的时候,不会去给它固定好这样的宽和高,那么一般我们会通过什么呢?通过大鱼和小鱼,或者是说叫做。MN-he gd高度在想应试着,基本上用不上,明白吗?我就不给大家写了,但大家只要有就行了啊,那是什么呢?是这个对width。还有max-WD啊,这是在我媒体查询上是频繁用的,为什么说用不着高度,因为手机的高度是无所谓的,对吧?哎,就算是就算是你的屏幕的高度,比如说就固定了是900,但是你不要紧,我做完的页面它是可以有垂直滚动条的。是不是这个道理,哎,但水平的是一定不行的啊,所以说我们经常会用什么呢?用的是这个,那么咱们就来试一下它啊,比如说爱的爱的media media我把上面的注释掉啊,注释掉了ADD media还是一样screen,然后and查,查什么呢?查注意我的格式啊,看好了,我每写完是不是都给一个空格,对吧,你也要这么去写啊,然后MN最小的宽度,比如说我500像素的时候,我让Li,随便哪个Li都行,我就哪怕让ul。
11:27
BA background变红色背景,这没问题吧,那么现在咱们来看是红色不,我给的是最小宽度500对吗?那么也就相当于这个实际上是什么样的符号,Min是不是就相当于是大于500的都会去改变。能理解吧,哎,那么好了,那如果它小于500呢,来看看小于500来。小于500是就没有了,看明白了吧,那好了,那再来比如说爱的media mediaia,然后。
12:02
安。Max max杠杠WTH我也给他500啊,也给他500,但是呢,这个时候我把它注释掉了啊,咱不受他的影响,先,那么这个时候我再给他ul。嗯,B background,给他一个。这个颜色好保存,保存以后现在有变吗?没有好,我往里边说说说再说5753525。你看小于500的时候是不是没问题。看到了吗?所以说当他给的就是最大宽度是500的时候,实际上就相当于我们的分辨率是小于500像素的时候,这个呢,相当于我们的分辨率是什么呀?大于500像素的时候,这么记能明白吗?大家。可以是吧,那好了,那我要想掐一个区间,我要怎么写呀。掐一个区间,比如说我们去掐一个55560560。
13:03
加一个560到780的区间。到780的这个区间,我们要怎么写呀。爱的me。然后按怎么写,最小的宽度多少。啊。最小宽多少?五百六百六,然后安的。And。马克斯最大宽度多少?嗯,行,780,咱们就给他七百八就行,对吧,好了,咱们只需要设置这个区间,看看好不好使就而已啊来Li ul啊,然后直接BA back给他一个绿色吧,保存,保存完以后咱们现在看啊,刚才给他多少来的,现在是小于五百六的,不好使对吧,大于5A2对吧,再往上再往上倒倒倒倒倒七七。
14:12
七八没问题,再往上没了。看到了吗?会色区间了吗?会了吗?那OK,这就可以了啊,剩下的移动端布局不需要学,移动端布局没有东西,你PC端布局写的是什么?就是把它的样式写到这里边,PC端的这个最大宽度,比如说with。错了啊,比如说这个包对吧,我们再去做页面的时候,大家知道之前我们做那个PC单,它的宽度普通下来的是多少,980吧。对不对,那好了,那比如说你这个是PC端区间,那我宽度就是980啊对吧,那如果是移动端的区间呢,比如说这里边我肯定是C,我再复制一个,比如说是移动端的区间,那我这个比如说就560,就这个意思。明白什么意思了吧,你的宽度测完,剩下的所有的移动端的样式,你就往这里面写吧。
15:01
能理解了吗?能理解了吧,所以媒体查询你只会这一个就行了啊,甚至我连手册都没给你们看,这里面当然会有更多的东西啊,咱们可以看一下来。在这里边CSS3。但是你不用记啊,我说归说,你不用记,你只需要给我记住这一句话。这一句话和。这一句话就可以了,明白吧,然后在这里边,我们去目录里边再找找语法跟规则,里边有一个爱的media媒体查询,看到了吧,然后呢,在这里边他说他说他说有吗?没有没有没有没有没有没有没有。啊,这呢,指定样式表规则用于指定的媒体类型和查询条件,看到了吗?哎,指定样式表的规则啊,用的是哪一个媒体查询和这个条件,那么在这里边我们要想查的话,你看爱的maybe后面是跟他的列表对吧?然后我们点进来看一下,诶诶诶诶tap。这是所有可以去使用的这些。类型我们用的是什么screen干嘛呢?用于计算机的显示器对吧,当然可以用很多什么触觉反馈,反馈设备,什么语音音乐合成器,小型或手持设备,打印机,然后幻灯片对吧?这个电视类的对吧,语音类的是不是所有的它可以都可以查呀,然后你也可以用奥奥代表什么,代表的是所有,但是咱用不上,直接就是screen就可以了,明白吧,然后再往上上一步,然后这里边还有呃,按这个再去什么值值值值。
16:30
宽高,刚才我们用了对吧,然后D。Dce这是什么?设备的宽度吧,对吧?哎,等于设备宽度,它定义输出设备屏幕可见宽度对吧?那么一般我们在这如果说你直接是就是针对移动端,就是要移动一个移动端页面的情况下,那是不是我就可以固定设备宽度了,对吧?但是你不能说啊,我作为移动端我就固定500像素,那不行。明白吧,你的苹果有可能500,但是有的安卓机它就达不到了,对吧,或者有的安卓机达到达到500像素,你的苹果达不到啊,明白什么意思吧,所以只能做响应式,只能用区间。
17:07
啊,就是大于多少分辨率,小于多少分辨率的,明白我说什么意思吧,然后呢,它是向上兼容的。啊,就是向大的去兼容,比如说我当前设置了这个在500像素的时候是隐藏的,对吧,那么600像素隐没隐藏一样隐藏,七百八百九百一千都是隐藏的,明白吧,在我没有设置那个显示的那一刻,它都是隐藏的。能理解说什么意思吧,比如说啊,你看嗯。在这里边,嗯,我再去定义一个属性啊,比如说我注意啊,我没在这个媒体查询里边,在外边是不是就是相当于全局的了,对吧,在外边定义全局的,嗯,我想想啊,在外边定义全局的,定义全局的不行啊,我得在里边定义,在这里边来D-D-no。D-SM小平的n na等于什么呢?等于this play为n na,好,我这定一个这这个属性,知道什么意思吧?
18:05
是不是隐藏啊,隐藏元素啊,对吧?能隐藏元素是不是点D-SMSMSM的小屏对吧?点这个block b BL,那这个就是this play等于BL,好然后呢,同样这个是560,诶我这是什么区间,五百六七八零五百六七八零,嗯。复制谁复制的?我干啥了复制。哦哦,我把它注释掉了啊,那咱就从再来一个来,比如说这里边再来media media,然后and。嗯。我要大于它最小的min慢宽度,这回应该是多少781PX对吧。嗯,最小到781,那是不往上都都可以了,对吧,那这个时候我在这里面,比如说点D。
19:04
杠no。然后play为on,然后点D杠,呃,BBCCK,那么这个时候就是play等于BK,好了,我就是设置这两个属性啊,但是我没有用对吧,然后在这里边咱们就看啊,一个可以它class c LA ss这里边,比如说我给的点不是点是D-SMNN,我的隐藏掉对吧?那么现在咱们来看有没有有没有隐藏啊。我也不知道分辨率是多少,反正是。小于这个区间呢,是不是隐藏掉了,看到了吗?但大于的时候,诶是不是它就显示了对吧,过了800多它就显示了,那显示的话,那么对于800条以上的,也就是说对于大屏的时候,大屏我是不是肯定是需要它显示的,对吧?所以说在大屏的时候,它会自己默认显示,但是这么样的情况下。他是不对的。
20:01
他应该是一直都隐藏的。一直都隐藏着,也就代表着我们去查的有问题。想一下啊,比如说我是五百六像素的时候,我让他是。隐藏的。那么往上一直都要隐藏才对。对,因为这个设置是区啊,这个是我们刚才条件是给他设置个区间是吧,我本来那咱不用它了啊,不用它了,不用它了,我只用这个啊,这个是最小的了。给的781对吧,那这个叫D-N-N好吧,然后是最小到781,这个时候你看啊。怎么还在走没?没注释吗,注释。美术社没有影响我也没用啊。地抗吗来,这是多少最小?
21:03
宽度七百八十一七百八十一的时候,他才能执行到,才让他隐藏对吧。来。隐藏了吗?隐藏了对吧?隐藏了看到了吗?四个现在变三个了,往上往上往上一直都是三个了,看到了吗?这叫线上兼容,能明白什么意思吧?哎,但是带781781诶。啊,它向上没有向下没有兼容,看到了吗?向下的你就得再调了,明白什么意思吧,就是你因为你小于781的,你肯定是781那个屏幕了,比如说这里边再来一个爱media I的me IA media,那我要是向下的话,我应该怎么写呀?是不是max的宽度是780吧,对吧,那这里边我杠D-SM我还是把这两个加回来啊,不用写了,我把这俩拿过来。CTRLC。CTRLV好了,这个时候你来看啊,嗯,小于的时候这块没有变对吧,然后我们开始往上加,我比如说让它啊800这个像素,这个叫D-SMN吧,来这个时候刷新。
22:19
对吧,一直都少的是吧,那800像素那个啊,大于78787878。800像出没出来,800小时出没出来了,而刚才这个这个的是不是就没有了,对吧?哎,同样,那么比如说这里边。你看啊,咱们还操作这一个啊。哎,我出事了。把它删掉啊,不用它,比如说我就用这一个那个两两个要求的啊,现在你看啊大没有,然后呢小有了。再小都有对吧,好了,我想让它小瓶也没有的时候怎么办?那是不是D-SM-N。走,你。看到了吗?是不是都没有,不用看颜色,颜色无所谓,你就看多没多那一句话,这是不是都没有了?
23:06
看到了吧,哎,就是相当于我在设置的时候,肯定是先从最小屏开始去设置,然后一点点大屏,大屏再超大屏,是这个意思,能理解什么意思吧?哎,那么咱们在做的时候,就是你们后期再去做移动端布局的时候,我不要求做到整个页面都是就完全是响应式的,但你只需要给我兼容两个设备就可以了啊,其实两个设备就已经能达到整个页面了,这两个设备的尺寸怎么算呢?不会算不要紧,你也不用百度,你直接看这个这里边这里边这包啊,有一个快速入门进来以后往下拉拉啦啦啦不对。嗯,布局。好了。四存在这儿呢?看到了吗?看好了,它给定义的小于576像素的这是一个范围对吧?然后呢,大于576的是一个,大于768的是一个,大于992的是一个,大于1200的是一个,看到了吗?它定的已经很详细了哦,这个是正正宗的移动端布局,然后它这里面只是表示什么意思呢?如果你用的是这个属性,就是用的是这个class的名字的话,那么在这个分辨率分别带数,它的宽度就是100%,这个分辨率就是540像素,这个分辨率就是720像素,这个分辨率的时候就960像素,这个分辨率的时候就1140像素,看明白了吗?如果你用的是这个,呃,Connect当负的话,这个分辨率是100%,这个也是也是就所有的都是什么100%了。
24:30
看明白了吗?啊,所以说你们再去定义的时候,你只需要给我定义一个小于576的,大于576,小于922的,中间768,不用管它明白吧,然后呢,再一个大于1200的就可以了,你看这是超小屏,小屏中等屏,大屏超大屏。对吧,哎,它有五个区间,你不用你给我做俩区间就可以了,能明白什么意思吧,也就相当于媒体查询,你记住只要是媒体查询,你多查了一遍。
25:00
你的所有代码都要增加一遍,对吗?能明白什么意思吧?啊,你想想之前你们在布局的时候写那csi样式是不是只是针对于PC端呢,对吧?那么一旦你查了一种设备,那好,那里面所有的样式你都要改动。对吧,哎,然后你又查一个,那好了,那里边样子又要加一点。明白什么意思吧,所以说这就是响应式的一个弊端,它不好用啊,所以只有一些小公司他这个懒啊,然后呢,他要求首页是响应式的,其他页面基本上都不是了,就基本基本上不需要了,就做一个首页响应式的,或者是其他,比如说他这个针对于。给客户看的方便对吧,那客户看哪几个页面,把那几个页面单独的调整想象式,剩下的人家全都是正常PC端,如果是大公司的话是干嘛呢?他完全不会用这种方案,它就是针对于不同的设备去匹配不同的页面。明白我说什么意思吧,啊,所以说大家这个不用担心啊,然后这个框架你现在你也不用看,你要愿意看你就看,不愿意看你先不用看,后期我给大家讲这个框架啊,这个框架里面布局就是用用那个三格系统来进行布局的啊,它是用三格系统来勒出格,然后里边配合伸缩盒啊,是这么样去布局的啊,所以这个你先不用管它啊。
26:16
好了,这就是咱们的这个媒体查询,这回会了吧,要想查这个尺寸上哪来查,能找着了吧?在哪呢?在V4Bo.CSS里边。V4B ootcss.com,我把它过来吧,来。我就放到这个代码里了,好吧。来我就放到这了啊,那么打开它以后,就相当于进入到了什么呢?进入到了首页对吧?进入首页以后有一个快速入门,快速入门里边有一个布局,布局这里边就是要要的就是这个图,因为咱们只需要看一下这个尺寸而已。明白吧,能找着吧这个了吧,啊,然后我说的是一个什么,一个是小于他的对吧,一个是它在它的区间的,一个是它,你就做这三个就可以了,明白什么意思吗?哎,那OK好了,这就是咱咱们移动端布局,然后爱的me去查,然后你看最大宽度,其实它这都有案例,你看最大宽度是576的时候,然后最大宽度是768的时候,最大宽度是它的时候,最大宽度是它的时候你看。
27:14
是不是给你查,给你都代码都给你给出来了,你只需要干嘛,在这个宽度的时候给什么固什么样的固定钥匙,在这个宽度时候给什么固定钥匙,这个宽度给什么固定钥匙和这个给什么固定钥匙。那你不就用你人家的CSS文件吗?那能行吗?得用自己的CSS文件啊啊。自己写的那个,我不是让你们把所有的样式都提取出来,公共样式都提取出来了吗?什么宽度啊,高度啊,马景啊,拍顶啊,边框啊,背景啊,对吧?呃,还有什么文字颜色呀,文字大小啊,这些都是公共样式呀,都可以作为公共样式吧,什么浮动啊,伸缩盒呀,你比如说像你们写的伸缩盒,伸缩盒为什么?其实我跟你讲到现在为止我都记得不算太清,你要说让我把这些单我跟你讲,如果我现在就是我现在啊。
28:04
我现在的自身情况,如果你把我的代码提示关闭了,我在就是在新的这些属性里边会有很多我都写不出来。真的,因为在新的属性里边,我就没有那么去练过了,老的属性如果是三二的,你随便问我全能给你写出来,基本上都在脑子里了,现在就是需要靠什么,确实需要靠代码提示了,那靠代码提示就要给自己去找更简单的方式,你比如说我们再去做的时候,那可能比如说我们去选择了一个这个这个一个选择器,对吧,然后呢,这次playsles是不是伸核对吧,设完伸数盒以后,紧接着扎出C,这是必用的属性。对不对,设置它主轴方向,不管你怎么设置的,那是必用的,然后还有什么,还有这个A,这也是必用的属性。对吧,一这是沿着这个侧轴的方向,那你像这种都是公共属性啊,你比如说我在这里边,你看啊叫点D-X那它就设置了display,能明白吧,一条搞定,然后下面再来点just。
29:05
Fi-con。杠center。打错了CT。那就是,呃,这个just content center。下回你用的时候,你是不是直接用这属性就行了。明白我说什么意思吗?他但是他不光就这几个,他可能还有别的的,比如说go不叫center,叫什么呢?叫做这个between be。对吧,然后扎content这个SP比between明白什么意思了吧,就这些你都给它提取成公共样式来,然后去设置去,OK,明白吗?嗯,好了。先去把这个文件全部给我完善啊,今天下午你要把这个文件全部给我完善了,好吧,啊好了,这就是咱们的这个响应式,然后那个什么那个那个叫什么来着。还有一个。三格是吧。
30:01
三格系统。价格布局吗?啊,网格布局,网格布局先不说了,等到明天明后天再说吧,啊现在这些就够了,我这里我这里面连网格布局的这个笔记都没有啊,这几个就够了。然后网格布局,我就是给大家介绍一下而已啊,你就是知道它是什么样的,什么形式就可以了啊,不需要用网格布局,你就还是用三轮核布局,你把三轮和练好了就可以了,浮动的话对于你们来说已经够了,不用再看了。啊,不用再看浮动,你只需要记住一句话就行了,就是你的负元素,只要把宽高定位好,只元素在里边随便浮动。就记这一句就足够了啊,然后呢,不管是浮动元素也好,还是伸出核元素也好,只要是你加了这两个,它原有的data play属性就失效了。这么说现在能明白什么意思了吗?是不是就是原有原来的块状元素不再是块状了,原来的行内元素也不再是行内了,均可以设置了宽高属性,他也不会独占一行了,是不是就是data play属性属性失效了?这不能明白了吧?就够了啊,不用再看了,剩下的你们就需要是拼命的做页面,练这些样式就可以了,因为到后期你们学到了vuee以后,这vuee的语法它就那么点,没有多少东西,那么剩写更难的是什么呢?就是改组件。
31:22
就是他会给你提供一些组件,你比如说。VANT。不是小VV,那主角叫啥来着,我看看有没有了。啊,我都给忘了。我在这里看一下啊。我看一下网站是多少。嗯。
32:03
骄傲。VAT-contrib杠。GITE。下面的VAT。好了,这就是这个vuee给提供的这个移动端的组件,然后你比如说后期啊,你比如说我们想用图片相关的组件,我就直接点到image,你看各式各样的图片在这边展示呢,你需要用哪哪一种的。你需要用哪种呢,你就拿哪个,拿这边对应的就有啊,这就是他的代码。拿过来就可以了,对吧?但是它完全跟你的样式一样吗?未必吧,那怎么办?我们就需要去改它的样式了。啊,所以后期难都难到这儿了,那前期你为了要后期不难,前期你就得拼命的训练,明白吧?啊,你比如说用这个叫什么。这个这个这个这弹框对吧,你看底部弹的,左侧弹的,右侧弹的,你看这都有现成都给你写好的,你只需要干嘛呢?拿过来,直接拿过来,按它的方式,第一步先去引入,第二步再引入它,然后直接去创建就可以了,然后下面代码你就可以直接去拿过来用,就是这么一个过程能明白吧,哎,所以越往后其实它越简单,但是简单的前提是什么呢?你前面底一定是打好的。
33:21
啊,就是你前端做的是什么,就是样式。明白吧,前端就是做样式,所以说我说了HTM标签现在为止你全忘都行,我不再查你们了啊,但是接下来就是到以后都是样式。啊,这是最重要的,一个是选择器,一个就是设置样式,设置样式倒好说,对吧,最难的是什么呢?就是你找不到东西,找不到东西你就没法设置。是这样吧,就包括你们再去写页面布局的时候,也经常什么就是选择器没选择到,没想到在那咔咔咔熟悉的没少写,写完之后,哎,老师你看我看一下,不好使是不好使,你选择题你们选择对他能好使吗?对吧,所以你的重点,第一重点一定要先放到选择器上,选择器完事以后,第二个重点才放到属性及属性取值上。
34:05
能明白吧,哎,你只有先找到他了,你才能去设置它,你找不到他,你没有,你会再多属性都没有用。对吧,这两个绝对是紧密关联的啊,所以你会这两个就可以了,那这里边这些看不懂不要紧,你把它翻译成中文。你可以看一下,就平时我们在这个页面上看的东西,诶点哪去了。右键翻译成中文。再来一次。再来一次。好了。你看按钮的图片的布局的,你看人家也有布局的,你是想要这么布局的还是这么布局的,你看你要哪个拿哪个就可以了,看到了吗?然后什么呃,日历的。对吧,你看。日历的,这是咱在手机端经常见的吧,不用你写,你写那个还不一定有人家的好呢。是这个道理吧,哎,所以说你记住啊,为什么我说程序员最终我们学到最后学到什么呢?学到基于百度的CV编程,这就是本事。
35:07
明白吧,真的是这样的,你想想这里面的主角一大堆,你说真的挨个你都去写吗?你比如说这个这个吉联的。对吧,让你去选你看。这个脏。正。浙江杭州。虾仁。啊,下城。嗯,是吧,你看他都有,你你就随便随便选就行了,明白吧,啊,就是各种各样的什么时间日期选择的,你看这不都有吗?不就这玩意吗。看明白了吗?哎,所以你不需要去挨个说,我都要都要去给他自己写出来,没用啊,不会用你的,而且你在工作中你要自己去写这主件,我跟你讲,你老板看着都得骂你。真事,他要求的是快,他不要求你自己写的东西,而且他也不会认为你写的东西是好的,你做到了极致的优化吗?肯定没有。
36:06
对吧,哎,然而他能共享出来这些东西,他已经都做到了极致优化了,比如像这种徽章,你看。见过这小徽章吗?购物车里不就有徽章吗?对不对,嗯,然后。这里边你可以挨个的都去点看,但现在没有用啊,你现在看没有用,现在你就看我给你演示演示就得了啊,这些组件因为后期你们要做了。我让你们做的。啊,你也看了,刚才我大概跟你说了,你把这个东西一拿过去,把这个代码一拿过去,组件就能用了,那咱们也得这样,你做出主件,别人把你的这个HTM代码,这就相当于HTM代码了,一拿过去,这就相当于CS样子了,一拷过去你就可以用了,多一个多余的代码都没有。明白什么意思吧,你别上来,你比如说像你们现在写的页面似的哪去了,随便比这个吧,我想用这个左边的这个这个导航条,我可能得得复制一大堆乱七八糟的代码,还得一大堆乱七八糟样式,扫哪个样式好像还不行,我还得找的特别费劲。
37:03
对吧,哎,你就没有给他做好区分。啊,没有达到主件化,就是这个意思,能理解了吗?啊。行了。把它关了啊,现在先不做啊,先不做这个啊,先去布局页面,你们的页面水平还没有没有到现在你们布局几个页面,咱们。你是四个了,大家总总共呢来三个是吧?啊,那正好还有俩,就是布局五个页面以后才算是页面布局的入门。明白吧,啊才算是布局页面入门,然后呢,你们现在啊,就是可能大家在学的这个过程中,包括再去学CSS的时候,跟HTML学法又不一样,对吧,HTML呢,就是你一个标签,它就是这一个样,没有什么思路灵活性,可变性,对吧,所以大家觉得它是简单的。那加入CSS以后呢,大家会觉得稍微复杂复杂原因什么呢?因为它会变了。对吧,然后呢,每个人做法又不一样了,那CSS重点就不在于这儿,在于什么呢?在于你的思想了,就是你的思路问题了,就是同样看到了这一个板块,比如说看到了这个折叠菜单,对吧?那么看到这个板块你的思路构建是什么样的,这个时候是思路的转换了。
38:17
明白吧,等到到GS阶段,那更是思路加思维的转换,更难了。但是难他没有难到什么,就是你的思想上就难到思想上基本语法就那么多啊,就跟我们学这个。呃,什么呀,学这个中文一样,我们先学的什么阿博斯德波泼诺夫,是不是先学这个这些东西是吧,这个叫什么,这这叫什么拼音啊,先学的拼音对吧,这叫字母吧,啊对,声母韵母什么什么啊,什么玩意,嗯,对,先学的是这些对吧,学完这些以后,你才开始学的是什么东西,学的是这个汉字。拼音对拼音,然后汉字,这都是什么基本语法,然后呢,造句造句。
39:05
造句啊对主持,主持完了以后是造句对吧,造句的时候才会干嘛,涉及到你的思思路。对吧,哎,你比如说这个同样是这个造句,我说我说王明伟你长得真丑,这就很得罪人,就代表你说话就是太直白了,那这个造句就是失败了,那就证明你这个思路就有问题,是这样吧,但是我换一种方式,我说嗯,王明伟你长得不算是太磕碜是吧,但我也没夸他好看是吧,哎哎,这个就是一个思路的一个。转换能明白什么意思吧啊,所以在座的就是可能在座的有些人会感觉到压力大,尤其是看旁边的人哗哗一写都写你要知道人家在入行的时候就比你早。对吧,人家有可能在之前就已经接触过HTMLCSS,他过了那个期限了。对吧,等我一再说的时候,他就明白了啊,他就大概知道了,他过了那个期限了,但你们还没有。
40:02
知道吧,就每个人都要经历过这一段,就我学的时候也一样哦,我刚开始学的时候,我们那时候学什么呢?学那个。VB,是吧,学那些东西,那刚开始学也一样,老师都不讲,你知道吗?就造书敲自己敲,我跟你讲,我连大环境我都不会。你知道吗?我只能干嘛呢?打开记事本,改成点点BAT吧,好像是点BAT,然后再打开,打开以后我就照着那个输入,一个字母一个字母敲。完了,敲完之后我还不知道什么意思。我也经历过这样的,甚至我都给老师投诉过,我给那老师都投诉,学校都给他开了,真真干过啊,就是我领着我班,因为我学计算机的男生比较少,知道吗?女生多,在我们那个时候女生多,我们全班是20几个人,我是不是我是我们男生是六个,就是打篮球嘛,我们所有人必须上场,一个都少不了,我还不会。你知道我可以,我可以达到什么呢?在对面那那一方投篮,往我那边撇,我就是这个选手,我不会玩,那没办法,没有人,你说那你不能让女生上啊,对吧,然后呢,我就领着我们所有的男生集体考试嘛,那考我就直接写了名,写了名我们就走了,就认这科挂了。
41:17
然后。我们就上网吧去了,当我们刚出去的时候呢,这个主任看着了,问我干啥去,我说。考完了,他说刚考试你就考完了,我说不会呀,他说考哪科,我说考的未必,那你没学啊,我说你上班看看有有会的吗?我说有会的就是我没学。然后可能主任去看了看,我们班答的确实不怎么的,你知道,然后后来我们那个老师就那时候我们就聊QQ嘛,没有微信了,QQ发叫我说那个你回来。
我来说两句