00:01
来下面呢,我们主要来去写一下这个。嗯,这个东西这个是我们那个焊的组件吧。那首先我们需要去干嘛?如果我们写的话,按组件文件我们创建了,你首先我们要干嘛。是得去把这个静态组件写出来,说白了是不是要写布局,这个布局里有一个可能稍微麻烦点,这个大家写过吗?向上或者向左向右向向右的箭头对不对,这种类似的写过吧,啊,应该写过啊,这种是用样式去写一写啊,这是一个还一个,就这里面会涉及到发请求这个数据。这个天气的信息是动态发请求获取的。啊,而且这个请求的接口呢,它需要发接生P的请求,他支持的是接生P请求。是一个在线的请求接口,能懂吧?啊,这里面就涉及到GP的一个理解以及使用。
01:06
最后就是我们要实现我们这个动态的效果了。有了这些封装处理以后,那基本上就这几个部分了。而充的效果里面包含我们这个时间是不断变化的呀,啊这个其实并不来都显示我的这个也没什么问题,对吧,这个用户我们不存在内存里面的吗?包含最后有还有一个什么功能呢?退出其实这个功能实现起来比较简单,不难。明白了吧,那我们先啊,一般写组件就先把静态组件先实现了,找到我们的什么,还有其实主要就是要写结构写布局去,是不是好来这个里面我们写布局啊,首先是应该整体应该分为一个上态结构吧,上面是一个div,下面是个div,而上面div是不是有一个底部的一个横线,一个像素的横线就可以吧,一个边框嘛,是不是。
02:07
不啊,里面是一些文本是吧,里面是这个文本,好接着这个下面呢,有一个有一个部分啊,右边是一个部分,大概这个样子吧,嗯,来我们来写一写。先把结构大概写一下,再来一个div啊,写个类名,因为我们现在样式呢,都通过类来控制,所以一定要去对应啊,好等于比如说我就叫它它泡泡,那下面这个应该叫什么。能不能听懂,来这个里面啊,大概呢,有两个部分,一个是这一个文本,一个是右边的这个先链接的了解是吧,来我们来写一个,先来一个里面来个SPA可以吧,啊嗯,写的是啊,欢迎。
03:00
中间是不是有一个逗号啊,有还是没有,我看一下有是吧,来接着是谁,我先解释好吧,啊先写是九二的命是不是。接着右边是不是下下个链接,那我写个链接,但它不是又没有链接的那个特性,什么意思,我点它进行页面跳转了不是。那我就这写可以吧,这样他点他就不会跳了吧,嗯,好。啊,加少一个T是吧。哈哈。整个结构没什么了,好没问题啊,我们先把上面写好以后再写下面的啊,先把上面写好来。找到我们的样式。整个是看的对吧,我们说这个80,那我就准备说,哎,上面40,下面40可以吧,可以好先来把上下给写好啊哪一个。
04:03
呃,点hand干什么?错,这是一个,下面一个是点hand bottle,另外一个是不是?没问题吧,没问题,好,我们现在去想办法去看一下,先先看一下我们当前是什么样子,是这个样子。是吧,这样子好,我们的整个背景啊,应该是个什么背景白色的。听懂了,不是一个白色的,所以这个时候来看好了啊,应该给我的这个加一个BG color白色背景啊,这个时候需要去改一下那个下面中间的这个部分的那个处理啊,什么意思呢?来找到我们那个me。就这里面要处理一下,这个本来我不加是个什么颜色。
05:01
啊,是个灰色的。我看一下啊,我这,诶刚才你什么这个是不是能掉了。嗯。啊,这里是一个能看出来吧,它其实是什么是这样的啊,我我这个内这一个呢,内部的内容是白色的,但是它可以加进market,那个market部分不就是灰色的吗?这能听懂不看好了,是这样一个意思,这个是白色的,白色没问题,我同时加一个。Muddy。能听到不那马的话来试试啊,比如说我上下啊那个看一下哪个大一点。我看一下这个啊,嗯,这个都还差啊,先倒个一样的好吧,嗯,比如说我就直接写个20什么意思。
06:04
43左右都是80啊,先搞个简单的可以吧,啊搞个简单先看一看。能看到了吧,能看到吧,那这样的话,到时候我如果有这个东西是不是就能看出来了啊,也隔开了啊,相互也隔开了好来。接着呢,我们最好我最好先,因为它是分为两个部分,是不是我把这个中间那根线给它导出来,这样看着比较明显,是不是来把这个线搞出来怎么做。来就是给他看的加一个,呃,波波是一个像素对不对啊,实线接着来一个,嗯,绿色的这个差不多吧,好,这样不就分隔开来了吗?当然要给他们俩是不是都有一个高度,都有一个高度那。来给它假设啊,给他哪一个高度40呗,每个人我们说过了,刚才说的是都分40,是不是都分40。
07:10
能看到吧,能看懂好,那下面呢,我们说的事情要将这个是不是要靠到右边去,这个好整吧,靠到右边去怎么做text来,为什么right过去是吧,接着是不是希望这个文本水平居中啊。指定一下什么高度就可以啊,对行高也,为什么40这是套路是不是啊,接着是要让它向左移动。向左右跟右边有的间隙是不是右边间隙是不是可以用,或者是呃pen,那我应该用什么呢?应该用pen,如果用什么问题就连用线。也会跟着过来,就不是完全水平上充满了,对不对?应该用什么好一点,盆顶pending right啊,假设来个20,我先看一下是吧。
08:13
能看懂这意思吧,啊,你要觉得20啊少一点,你可以写个30啊,让他再过来一点点都行是吧。当然如果啊,你是有圆形图或者标注图的话,应该根据它指定的那个大小去写是不是好,再一个啊,接着是我这个中间,我这里面得有一点什么间隙,那里面是不是有一个SPA呢?第一个SPA,第二个是A标签是不是,那我就干嘛给失败。加一个什么,比如说来个我来个十吧,就差不多了,隔开一点点就。能听懂吧,当然你要觉得字体小,你也可以把字体稍微改一改是不是?
09:00
现在听到吧,哎,这这一个好,那下面一个啊,下面一个大家注意观察啊,这个时候啊,它分为左边和什么呢。右边啊,左边和右边,而且。好。这个左右两边啊,它是有一个大家注意观察啊,是有一个比例分配的,看到了吗。明了不有了比例分配以后,这个左侧的高度就确定了,确定以后再把它文本居中,而且我们那个向下的箭头是不是就在这个正中间,其实写这个跟我最复杂啊,来等一忍啊,等一下啊,什么意思?看好了,上面的已经搞定了,是不是再把下面的下面呢?啊,我们先把那个结构先写一写是吧。结构写一写来结构我们分为左边是不是右边呢?左边来个div啊,写个名字,写个类名,我就叫hand的杠杠left,以及什么right。
10:12
能听懂不能听懂,呃,这个里面是不是就有一个文本啊,这个文本实际上就是我们那个某一个路由的标题吧,这个最后应该是个变化的值,但是我可以先写一个静态值,是不是就先写一个首页。那下面里面这个右边是不是三个部分组成,左右两边是文本,是不是失败就可以,中间是一个什么。是不是image这个图片,是不是,那很简单,来一个什么SPA,再来一个SPA,中间来一个image image是不是关联一个图片呢?好,我就用一下这张图片得了,它不有张图片吗?在线的图片,这是个天气预报的图片。啊,我随便写一个差不多的提示就行啊。
11:02
OK吧,OK,那这个呢,是这个文本把它复制一下得了。复制给我们就行,看C。这这个当前的时间值吧,啊,特定格式这一个是那个天气信息啊,比如说当前今天的事情,那就写不行,当然这些值是不是都是动态的,现在我们写静态组件就写静态的就行。好,现在看一下我们当前的是什么样子,就这个样子,而且是上下排开的,对不对,一上来我是不是让他水平排开,用了一个套路,怎么做。Flex。来写之前先把那个那两个类名先写好。其实先把结构摆好一样啊,写这种嵌套的方式,最好是先把结构摆好,这是like吧,那like的下面是什么?Right,拜拜。再一个一个去写,能懂吧,能懂,那这个我们想让next right水平排开,非常简单,第一,为什么black要垂直居中,怎么做?
12:12
等于什么?So easy是吧?而且我们刚刚说是不是一个比例分配的呀,说一下左边是在25%,在1/4,右边在3/4,能听懂不?那也就是说它的宽度是什么啊,Y10是百分之什么25。能听到不,而下面的是什么Y的是啊,是百分之什么75啊,没有什么太大问题对吧,那这样分开了,而且我们需要左侧的那个文本居中啊,那太简单了,用什么text line,为什么center。而右侧的这一个是不是为什么。
13:00
跑右边去类似的,为什么过去是吧,好,过去以后这个地方。这个文字是不是稍微要大写?这个文字时大写20个像数应该差不多,来来一个什么帮它S,为什么20个像素来看一下啊。哎,怎么是我的。这个才是我们的对不对,没什么问题吧,右边的这个啊,是不是要隔右边有点距离是吧,类似的搞画法,类似的方法,也就是说现在我搞一个monkey right啊,也跟他是,他刚才不是30吗?它是多少。嗯,跟右边的距离是30,那我也是30,跟它对齐可以吧。可以吧,可以啊,看一下呗。过来吧,接着这个片,这个图片跟左边右边是不是有距离,所以我怎么办imagine。
14:06
对吧,那你写多少呢?上下是不是都是没有动的,你左右来个十五行吧。能不听懂,还有一个这个图片,大家看看真正最后图片是不是比较小一些,呃,这个图片比较大一些,可以指定一下图片尺码跨高啊啊一个最后是我设计是30和20啊。啊,这都我就都设置一下啊,看一下是可以的吧,嗯,好,那这个时候啊,我们的整体结构就差谁来了,就是那个向下的一个什么箭头,对不向下箭头,这次啊,我们是用一个尾元素来做的阿的尾元素来做的。他以前可能是用单独D来写的是吗。啊,用过五元书写吗?没有来,我给大家写一写看好了啊,看着我是要去啊给。
15:07
给这个给他给这个首页,给这个首页加一个什么伪元素,也就是给我的这个。是不是加一个。啊阿法的尾元素啊,来试一下,试一下这东西是不是怎么知道呢?那因为这个时候以前写是不是要加上尾元素,是不是要加上这个类名后面加冒号阿,这里这样,那写写就再加什么阿。首先它有内容吗?没有。它是靠什么形成那个形状的,那个箭头是靠什么靠靠那个边框,听到不靠边框,而边框是分为上下左右,是不是都加上。听懂了不啊,先我来加顶部的,从上面开始,因为我们写一下,写那个玻键不是从是一个逆时顺时针旋转吗?啊先加顶部的,比如说我加一个先加个20个像素,Sony的库,不是接着整个什么颜色,是不是颜色,比如说来个红色,先来个颜能比较好看出来颜色啊,接着复制四个。
16:23
改什么呢?这是什么啊?啊,右边是吧,那你接着这个颜色改改,等会你来看啊,红黄啊黄色yellow。好,来绿常用的就这些颜色是吧,比较常见,好把这个都改一改,这一个改成波。这个改成什么呢啊。那这样的话会形成一个什么样的形状,正常情况下面会形成正方形,正方宽高是多少,是20吗?不是是40乘40,因为你你这个你这根线的宽度是20嘛,它这个线宽大加上不起就40。
17:14
听懂了吧,啊,但是啊,开始的时候不是这样的,这不对,这个高度被其实是被这个文本撑开了啊,得做一个什么事情呢?得做一个大家看一下,得写一个po给它定位,用绝对定位写一下,到时候还可以需要定位的来看一下,知道现在才是比较对的。正常的样子,就是这个样子。这就没有被它的这个文本撑开的一个效果,也就是说它的这个高度是多少呢。40。是40乘以40的。嗯,我们当前是在这个里面。能看到吧,因为变化都是嘛,没有内容嘛,内容没有框高嘛,是不是。
18:03
最后我应该留下哪一个部分,上面的部分,那也就是说把其他四个部分给它什么透明。不能给它干掉,不是干掉,而是让它透明看不见。看不见怎么做?是不是穿看看打开撑诶是吧,后面就想办法让它什么往下移往左移,哎是不可意移动就可以,那下面比如说啊,这个时候我们后面是不是要加些定位,加些位置对不对,也要加些拓值以及什么。啊,Map的值或者值都行是不是。能听到不啊,能听到好大家看啊,我比如说我加个right为50%,什么意思,这个地方就要说一个事情相对谁的50%。相对于就是开启定位的,最近的那个不元素是不是我希望跟谁来去占50%会比较好了,大家说这个地方,这个说对吗?这个时候啊,大家看一下,应该是相对于他比较好。
19:17
这样就比较,因为跟他我是相当于他在中间对不对,因为我的文本是不是也在它的中间,这能听懂不,所以我要给这一个div。开启定位是不是这能听懂不,那也就是说是不是给他开启定位,那最简单的方式就是position为,那这个时候再来看差不多了,但是它是什么呢?它是它的右边,大家看看这个right什么意思,是我这一个40的这个正方形。这个右侧在那个负元数的什么正中间,你说还要做一个什式才能真正的叫正中间了,是不是还要向右移动,我这个宽度的什么就可以。
20:07
听懂了不啊,那这个其实好做吧,好做是X多少。是正的50%还是负的50%正的吧,因为我们现在需要向右移动,只是说你其实就要知道向哪边移动合适,是不是这能听懂吧,啊这个啊,这个不是靠记的,是你自己调。能听懂不能听懂,那接着我是不是向下移动啊,向下移动呢,你可以指定一个具体值,也可以这么做,怎么做呢?看好了啊,那就来一个top,向下是不是应该正子吧,啊等于啊等于什么呢?比如说100%。就是负元素高度的什么100%是吧,大家看看是不是差不多了啊,没有必要说一定要把这个往下面拿到最下面,大家看到我再改一丁点就好了,把这个颜色改为什么呢?白色走里。
21:11
B。是不是可以了,就这么来了。能听懂吧,啊嗯,当然你还可以,现在最好,我觉得这个当然你可以指定一个指一个具体的像素的值也可以啊,这能听到吧,嗯。那基本上我们的这个组件。的静态界面布局就完成了。大家一定要有这样一个自信,什么自信?你给我布局啊,我肯定能写,只是快慢的问题。你给我一个功能效果,那这个就要想一下把它分析分析到底行不行,是不是啊,布局它你不一定要说写的多好,他至少能能布出来吧,要给它画出来啊,这是这样一个事情啊,那基本上呢,我们就给它画出来了啊行。
我来说两句