00:00
来咱们学完上面的知识点以后,那么咱们利用剩下的两节课时间呢,哎,主要是做这个实战练习,做这个实战练习呢,我们先把这个写好的打开啊,其实上午给大家看到过一次。啊,就这样。我们最终要实现的效果,哎就是这样,哎,它就是一个,呃,这个页面,首先它每一个板块都是满屏的,然后里边这些都是图片,哎,这都是图片。然后呢,现在我们能看到的效果是,当我页面每个页面一加载完里面的图画,呃,图片开始动画,然后呢,我们还可以利用手指的滑动来进行页面的切换,以及它动画的一个过渡。利用的技术呢,就是说我们采用GS交互以及C3里面的啊一些动画。好,这是大概的一个啊需求,然后呢,呃,这个是写好的prepare的,我们看一下我们这个实战的,我先大概的给大家看一下。
01:10
CSS里面有一个CSS,这个相信大家应该是用过。主要用它是来重置一些样式的啊,然后image里面是我们需要的所有的图片啊,在这呢,这个我们并不关心它。然后呢,这有个GS文件。GS文件里面分为这么三部分,这两个呢是我们需要依赖的一个库。然后呢,这个1EX,哎,是我到时候要外接的一个GS,现在没空。这边是我们的这个页面,哎,这个备用咱们先不去管它,先看这边。首先上来这边我用viewpointd进行了适配,然后呢,另一个这边我已经把这个重置的样式是不是引用进来了。下边这一个板块,这是我们需要依赖的库,用re to去写好,因为我们外接了个GS,所以说上来就可以把它先引入进来啊叫。
02:13
我电脑的大小显示会自动切换的,你们有时候可能会发现。不太好用。好,现在这个GA引入进来了啊,我们开始先去实现静态的页面啊,先实现静态的页面。实现之前,我们先来分析一下它。上来你看到的是第一个板块,这一个板块其实就是一个div。然后它的特点是撑满整个屏幕。里面摆放的是。里面的图片,然后你再切换一个,不管是切换到哪张,你都发现了它每一个板块都有一个共同的特点。他们宽高都是100%。只不过是背景颜色不一样,然后里边图片可能说引入的不一样,这倒不是什么难点。
03:04
也就是当我们分析完这个以后啊,你最起码能确定下来,我马上要写好几个板块,而这些板块最起码有一个共同的特点,是不是都有一个。哎,宽高是100%的这个共性,那如果说大家自己能分析出来这点啊,有助于你们接下来去开发,是因为当你知道了他们有共同点的时候,你到时候肯定要定义一个公共得利去写它的样子,不会分别去写。如果说你现在没有分析出来,你一步一步去开发,开发到最后你肯定代码还要优化呢,那个时候回头再来做这些就比较烦。这第一点。然后我们就开始写吧。来再包一下边,因为它有好几个板块,我呢先先给他来一个div。然后呢,给他来一个ID。叫contain,这表示什么?几个板块的一个容器,然后呢,我给他定一个ID。
04:05
定义ID通常会这样做,它里边有很多相同的子元素,里边通常用class类来控制它。外侧用ID是因为如果是正式的开发当中,你通过ID去找一个目标的话,找的快。如果是通过class找的话比较慢,为什么?因为ID是唯一的,他一旦找到了你,以I以几号开头的,找到了他就不再往下走。但是class它的效率差一点是因为什么。它可以有多个。即使我找到了这个,我还会继续把你下面的代码读完。好容器,有了我的鲜血,我们第一个页面。就是我们上来这个页面。然后呢,我们刚刚说了它有一个公共的呃特点,那我就上来可以先给他一个class,比如说我定1PAGE,表示是他们接下来几个板块的公共类。
05:04
哎,这是公共类。那接下来我再去定一个样式来区分一下,表示他当前自己的类。我在这起的名字叫page杠一杠一,我先来给大家说一下为什么叫这个名字。这个倒不说必须是这样,那么我刚起的是配置杠一杠一,首先这个配置,哎,我们可以作为是我们当前这个起名字的一个命名规范。命名规范,这个大家听过没有?我之前发现有的同学起类别起到最后实在不知道起什么。杠,Left。这第一个,下一个杠大,再加个杠right,最后上下左右都用完了,都不知道杠杠哪个方向了,哎,起到最后累特别长。而且这个类名没有什么规范,这样的话就有一些问题,就你在实际的开发当中,没有一个标准的命名规范的话,有什么问题呢?很有可能你的一个项目是协同开发,协同开发的意思是有,比如说几个人有三个人去开发这一个项目。
06:13
你刚开始分开去开发的话,哎,每个人写自己一个板块,那写完了最后我肯定是要这几个板块要拼到一块的。那这个时候你在开发的时候,有时候你需要去定义一些类。或者说是你在GS里面是不是有可能去定义变量,尤其是全局的变量。你比如说你玩一个name,玩一个user name,你定义的全球变量叫他,然后接下来使用这user name,但是呢,另一个人他根本不知道你定义过U2内,那么他是不是也有可能定义UR代码?尤其是咱们刚出去的同学,哎,我发现一个问题,哪个老师教完了,大家都有一个共性。可能是立,呃,立超老师教完大一个月,Name等于悟空是吧?你们是是有这个习惯是吧?嗯,等到我教完了,我发现有的女生她根本不认识科比是谁,Your name等于科比。
07:10
啊,这都是固性啊,不要把这个习惯带到公司里边啊,啊这一看就是之前有人在影响你啊,那个时候呢,又命名规范避免就是说项目在整合的时候。有冲突,命名规范通常怎么设计?也就是说你在开发的时候,你会拿到一个文档。这个文档里面可能有一部分专门针对的就是我们的命名规范。比如说你A这个人去开发,你拿到这个文档,你想定义一个全局变量,不是说你随便定义的,你应该是先去查一下这个文档。检查一下我想定义的这个名字在我的文档里面有没有,如果说有,你就不能定义了。如果说没有,那你可以定义,定义完千万不要忘了把你这个变量给人家记录进去,因为别人也会使用这个文档。
08:07
别人也会使用这个文档,那这样的话,他一看如果说你定义了,他就不去定义了,这样的话是不能解决命名冲突这个问题。再有一个就是说,你在定义样式的时候,我们很有可能去定义这些class。不能说是卡杠left-right。你总得开头有一个规范。啊,有一些小公司为了解单,他会这样去做。比如说哎,我姓严,也说他规定我再去定义class的时候,我必须以这个万字开头,万告,后边的随便我写。然后哎,还有开发人员,他心里就L开头杠后边的,哎随便他写这样的话有什么好处啊。第一个你的结构清晰,第二个在整合的时候,如果说哪一个地方出了错误,我能快速的明确是谁的责任。
09:04
谁的就是谁,干活没干好,你把这个问题解决了就OK了,没有关系。没有关系,还有的公司呢,比如说人家那老总的问题,他们有这种说你你命名规范,我们公司有三个啊开头的,比如说吧,其实老总你比如说姓严啊,你以老总的这个首字母开头,他以副总的比,下面有五个副总,这五个副总的首字母就可以给下面人去用。当然这是老总的一个癖好啊,这个咱们管不着,那我刚刚定义的名字叫配杠一杠一,我们这个配置就当做是我们的命名规范。而后边这个两个杠代表的是我当前页面所处位置的坐标。第一个比如说表示是纵向的坐标,第二个表示是纵横向的坐标。大家想我这上来是不是第一个页面,那我就说横向纵向都为一,那接下来如果说我下来要写这个页面的话,大家觉得我的坐标应该怎么去定义它。
10:09
配置告警。应该是二杠一,能懂吗?你想它纵向就是往下加了一位吗?不应该是所在的位置是二杠一吗。然后我这个二杠一右边是不是还有可能有一个页面啊,那这个时候这个页面应该怎么定义。哎,首先你是横向去发展了,那么我的纵向坐标是不会变的。而横向是不是要加一,哎,大家能理解这个就行了啊,来看这里。那么在这个里边啊,容器里边其实告诉大家它都是image,都是image。我们来看一下这个写好的,你可以看一下。呃,我把这个收起来,这不是配置杠一杠一吗?你看这不是有三个image吗?然后至于说这些图片我到底赢哪个,我直接就从这拿了,这不是什么难事,你找的话,我这不是有你面的文件夹吗?其实图片就在这里边。
11:10
那你找的话,其实也是从这里面拿过来的啊,然后下边那这复制还有两个这个alt是干嘛的。对当前的图片进行描述。能懂不啊好,那我们再来看一下这啊,把这个拿过来。然后需要你去放到这儿,那紧接着还有一个啊。这样说以后。现在我们三个图片就有了,图片有了,来打开我们当前的页面。这不已经图片引进来了吗?啊好,图片引进来了,那接下来我们需要做的是去设置一下当前这个图片的一些样式。
12:00
没问题吧?首先哎,这个配置是公共的类,那创建样式的话到这来CSS下边我去给它,哎,这是HTML。是不是它来个index,当你创建个样式的文件的时候,先不要着急去写,你应该第一步是先考虑把它引入进来。哎,大家要有这个习惯,CSS下边的CSS。之前有同学犯犯过这样的错误。先创建文件,写了一大堆,死活硬是出不来,调了一晚上。到天快亮了,发现这没雨啊,一直在修改样式一直出不来,你们喜欢写GS,呃,还是喜欢写CSS?都不喜欢,其实到后期的时候,更多人会发现他们喜欢写GS,第一个是GS比较有意思。是因为它逻辑性比较强,再一次GS如果说哪块写不下去,他会报错。
13:00
我们根据错误大概能判判断出来哪块地方有问题,你写一个样式,你出不来就是出不来。他不报错,死活出不来。好,那引入进来了,我们先写一写,大家看啊,先把这个GS不写,关掉它,我这有个容器,那我可以先去写一下它井号康啊,因为他们都是满屏的,所以我是不是能给他设一个100%。这没问题吧,啊宽高是不是都可以是100%,那我就可以把这个来改一下,Here减T。好,这是外边的容器是100%,那它下边有个公共的位叫做page,那其实我可以在这儿也给它设一个它。这就差不多了。没问题吧,然后我们需要做的是,哎,给第一个页面,人家是不是有背景色,这个背景色怎么取,大家有取色器吗。
14:01
啊,你们取得器可能还和我的不一样,你们取得器有什么?我都忘了我骑车器在哪了。Get color,我用这个用哪个都行,取色器嘛,就拿个颜色。啊,我把取色器打开。然后呢,来这不是有个小米吗?放我这儿来复制一下。这不就这个颜色吗?我现在是不是需要单独给我第一个页面也是P节杠一杠一设置一个背景颜色,Bank brown卡一卡。那在这儿啊,写一下注释,这是定义啊,页面的背景。的背景色啊,那定义有了,接下来我们要定义的是它里边图片的样式。图片的样式,而这些图片大家看一下它摆放的位置,其实它都是通过定位的方式放到指定的位置的。
15:06
能懂不?你说这个图片就这么大,它是通过定位的方式。啊,那再说一下。你们开发的时候通常就是拿到这个需求,这肯定有一张设计图。设计图,如果说标准一点的话,UI会给你两张两套设计图,一套就是你所看到的这种方式。就这样,就静态的告诉你,最终我的样式大概是这样,还有一套。样式跟这个一模一样,但是里边给你标清楚了各种。试错。见过这种图没有?啊,见过就行了,好说了,那我们到时候是不是根据人家这个设计图上的尺寸自己去设置啊,那在这儿的话啊,我就。就拿这个吧,这个这有个图片的这个样式嘛,我先把这个拿过来啊,这个东西不难。我们先去整一个东西,首先你看我这下边每张图片,它摆放的位置不一样,也就是说我得先给他一个类。
16:07
Class,比如这来个image杠一。啊,Class image杠二,再来一个吧,Class,如果说你们以后的命名能像这样的话,其实就没啥问题。别人一看就足够清楚。那接下来我先去整一下第一个P杠一杠一,下边的第2IMAGE杠一啊,它的样式其实就是这么多东西,而且接下来的图片的样式都是这样,所以我就不一行一行取消。看样子这这就不说了啊。这,这是干嘛的?绝对定位吧,然后我问大家一个问题,这mark left设置它的左半边距吧,但是为什么是复制的?赋值是什么意思?就拿这个图片来说,我设置左外边距的话,我是肯定是想往这边推塔。
17:04
对不对,然后你设置成负值是什么意思。你是想往回拉一点,能理解我的意思吗?那我们来看一下这这个负V124是什么意思?你看一下它的宽度是多少。宽度是248,然后它设置的life值是不是52%。再往回拉,你会发现正好是不是拉他的一半。这样做的目的是什么?水平居中。对不对。可能有的同学不太理解这个。我本来页面这么宽,比如说有一个盒子什么在这儿,本来是这样的,我现在推50%的话,大概是推到这儿。但这样的话,他现在这个位置很明显不是在这条线居中吧,我现在要做的是是不是把这一半再挪挪到这儿。没问题吧?知道这些,那下面这些题都一样。
18:03
往这边拉拉都一样。他开。大小姐老是自己切换。这不一样的吗?没什么问题,哎,接下来还有一个为什么让你们拿到需求,不要着急去开发,先去分析呢。你看一下我这个上面,其实这不是一共有三张图吗?我们第一张和第二张定义完了,但是你看第三张其实就是这个箭头。你如果说提前哎,明确了你的需求的话,你会发现每个页面都有这个接头。而且摆放的位置一样,那这个时候我需要单独的去给这个箭头。用一妹子三去给他设置样式吗?咱们是不是可以考虑给他定一个。公共的队。那这个公共能力接下来其他的板块是不是也有可能去用。
19:12
是不是就是它,哎,那这个公共的类也是对应的是我第三个箭头的啊这些样式,这个样式大家看一下都是定位是不最终的目的是摆放在中间。啊,至于说这个图片设置多大啊,对于你们来说不是什么难事,到时候照着设计图啊输入就行了。行。把这些整完以后,还有个东西我们没做,大家看一下,现在是我下边的,也是我div下边这些子元素是不是都开启的是。那其实这个时候我们应该干一件事情。给它的负元素,你现在下面是不是开启是绝对定位啊,那它的负元素是不是配减。K不就是这个D吗?我是不应该给他开启一个叫相对定律的东西。
20:05
啊,这哪来个他。没问题吧,接下来我们来看一下我们的这个走底。啊,现在大概是这样的,现在有一个问题啊,背景色没有。然后你还发现一个问题,这些位置摆放的,说白了他们定位的这个基基点不一样。我本来你看现在相当于基于哪定位呢,你们说。所有东西是不是都汇集到这个上边框,然后中间了,那是因为它相当于这个点定位的。为什么会出现这种问题呢?我可以给你移到这个配置,你看一下这个配置为什么背景色没有,是因为它的高度为零。为什么会出现这种情况?我下面的image什么都开启的是。
21:00
啊,你绝对定位有一个特点是它会脱离文档流。而我负元素现在没有明确的宽高,它是不是就指望你子元素给我撑开?开启BFC啊。注意了,开启BFC解决的是浮动的问题。我现在用的是定位。那如何去解决它?现在我负元素没有高度的本质原因是它和子元素不在同一个层级,你比如说这的范围是文档流,子元素还在天上飘着呢。对不对。最最简单的解决办法,让负元素也飘上去。飘上去的意思是在天上还是包着它?你跑到哪儿,我跟到哪儿。懂我的意思吗?让它飘上去也简单。首先我这是必须开吗。
22:02
不是你开,你只要开启定位是不是就可以。走,你。是不是出来了,但是有一个样式肯定是有问题了。首先背景色是不是有了,是这个最靠谱互联网公司,这个我肯定是哪边你看啊,这个样式不对。这个宽高。是不是粘错了,哎,这这都是小意思啊。你们一直到一是不是这个家伙?是不,他。这就下来了。哎,刚刚这个问题大家要知道,哎,有时候我们是会这样,如果说哎以子元素。地位,把绝对定位脱离文档流了,负元素靠大,现在的话让负元素也上去。就完了,而我们现在什么正好是满屏的,没有关系。现在这个静态的页面就出来了啊,这些东西呢,倒不是难点到这儿,哎,我们实现了一个页面,既然说这个出来了,哎,现在我要。
23:03
上来没没整这个事大家看咱这有备用,是因为下边的所有套路跟我这个一模一样了,所以我是不会一个一个去写,耽误咱们时间,能懂不?咱们重点是下边的那个,哎,动画还有交互。我这儿不是备用了两个div吗?这两个div我需要放在哪放在这。你看这不是一个吗?下面这是公共的位,然后呢,杠二杠一,二杠一是第一个页面,下边这个页面。下面还有二杠,二是它右侧的这个页面能懂不。为什么要写这两个,你看一下它第一个页面左右根本没有。它水平方向只有一个。然后翻到第二个,我开始是不是右侧才有一个,所以我们先把这三个写完,下面这些都不是难事。啊,把这两个拿过来,图片呢,我已已经印好了,这个其实我提前自己敲完,我又把它拉出来。
24:07
好,那这两个有了以后,我们现在唯独缺的是不是它的样式?这个大家知道我在干嘛吧?我感觉这个样式咱其实也没有必要想。样式一模一样,都是这些。要是我看吧,拉倒吧。咱们不要在这种。实际上耽误的时间太短了,要是的话,我看一下从二杠一这不是一位之一吗?走,你走到哪走。再走走。哎,差不多到了就这。来把这个复制一下,咔放过来。放过来以后我们来看,还有大家看我现在。现在有三个div,对不对,三个div,然后我去给你刷新一下页面,你看一下。是不是叠在一起了,现在你三个div有一个问题啊,你只能同时去显示一个。
25:05
其他的两个都应该去隐藏掉。能懂我的意思吗?所以呢,我上来应该是,这不是咱们的样式吗?来找到我的公共的类,这不公共样式吗?我在这去定一个类,来个head。我来个display为,那我应该上来先把这两个类。给了,按理说我应该是不是给了这个div,还有这个div。但我为了看一个样式,我应该先我先给了他,给了第三个。咱们是不是现在要拍第二个?刷新一下。是不是出来了?现在唯独就差一个背景色了吧?差背景色的话倒不是什么难事。背景色我刚刚有写注释,这不是定义背景色的地方吗?现在我们差的是。
26:00
这应该是二杠一。这个换成二杠二啊,背景色来取一下它的。这不第二个吗?一过来哈,哎。复制一份。二和三的背景色一样,所以我直接把这个拿过来。没啥问题。看一眼。看到那个大箭头没有大箭头,为什么他没有,是因为我刚刚我自己是不是在这定了公共的类,我得给谁啊,你看这个图片叫I up,看这。不就他吗?还有一个。是不是他?就好了。这不就摆到这了吗?好,那我们再来确认一下第三章,第三个板块没问题,我应该是把第三个的head先移除掉。给了第二个。这我就相当于把前两个板块是不是隐藏掉了。走你没问题吧,静态页面啊,我们就快速的搭一下,好我先把这个题。
我来说两句