00:00
最后呢,我们来实现首页的这个食品列表,下面一起来看。打开代码,来到这个home负的例子,同样的,我们把其中一份负,这意思啊,这样呢,我就不用再去写重复的结构了。OK,删掉内容,然后这里叫的。删掉全部就叫for类。呃,整完了这个组件之后呢,我们在后面引入,然后再去使用。好了,呃,那么待会儿呢,就应该会显示这福利色,福利色整体的背景色呢,是一个这个颜色是个灰色的一个背景,大家看是个灰色的背景,那么同样的我们可以打开任何一个页面啊,找到这个取色器工具,在这里可以取一下色,可以知道它这个背景色啊,大概是这个意思,OK,我们缩小。
01:04
接下来呢,我们来去写这个相应的结构和样式,整个结构呢,其实就是个列表,列表里面这些内容我们先样式,第一个背景色可以给一个红富绿色的白光color。是我复制的这个颜色,OK,然后呢,它这里面是每一个都是一个这样的一个卡片。我们只要能写成一个啊,后面的都是这个效果好,整个结构呢也很简单啊,就是上面是一个内容,这是一段文字,下面呢有一段区域好评度越受这一根线,对吧,所以我们大致上就可以这样去写。首先最上面是一个图片image。那么图片的地址呢?它到底渲染了什么样的一个图片呢?我们来到image下面去找啊,这时候要找的是这个shop shop里面的故事图片。
02:12
哎,这样呢,我们就一张图片出来了,下面呢是一段文字。我们就随便写一点,查查文字,这是一段文字。对吧,然后再下面呢,它是稍微复杂一点,下面这块内容有好评度是一块约束一块,中间有一根线啊,所以下面是由三部分组成的。好评度。然后一根线对吧,然后呢,以及咱们的这个线呢,用U就好了,它不是文字,然后下面这个呢,就是一个月兽。
03:04
好了,那么整个结构就出来了,就是这样的一个结构,我们后续只要把这个结构复制N份就完成了我们小的需求,现在我们给它加为负的。下面的是负的image。OK,这里是负的title。是它的标题。然后呢,这是下面的一段容器啊,附带的一个。信息吧,就叫信息的一个容器吧,好,那么这些呢,它其实它的样式是一样的,就中间这个竖形,它的样式不一样,其他的样式都一样啊,所以我们可以叫for的for test。中间这根线的话呢,我们就要负info lamp好了,那么这样的话呢,我们就把整个样式都给取好了,下面呢,我们来个来个几份啊,待会儿就能够一起看效果。
04:03
下面就来去写这个相应的样式。首先整个容器呢,它的宽度应该是占50%的,对吧,然后到时候我们想办法给他一些间距啊,给他一些间距,这个间距呢,我们后续再来考虑,再怎么去给他。给他啊,那么给进去就好了,呃,线宽度50%高度的话呢,这个高度你可以写死,也可以说后面我们这样内容撑开也行啊,这个都行,OK,呃,下面的是这个image image呢,它有一个宽高,同时它有一个这样的一个圆角啊,有个圆角。呃,宽度的话呢,明显是很大的。宽度就直接占百分百啊,高度的话呢,这个其实可以直接写死,高度我们就为200 PS我们看效果,看看现在它会长什么样子,同时呢,Fair它的这个display也是为啊。
05:02
Fla direction也是应该水平排列,同时里面的是能够换行的,所以是flashper应该是为we可以换行的。好了,那么我们这样呢,就能够去看一下我们现在效果啊,那么显然现在效果会比较丑啊,我们没有给他添加这个滚动区域,所以说它会想办法在一个页面中撑挤在一起啊,所以就出现这种溢出的情况,我们要解决这个问题的话呢,非常简单啊,我们只要给下面这两个区域,它能滚动的去包一个。的话呢,就是一个。滚可以滚动的区域嘛,对吧,这样的话呢,它就不会啊,不会这样就可以滚动了,你看我现在操作了一下这个。手机啊,那么就可以达到一个这样的滚动的效果,所以就是这样子。OK,那么接下来我们继续来整啊,继续来整,继续来调整它。呃,整个宽度呢,它其实应该有一个pen顶的一个效果啊,有一个pen底效果对吧,它有一个这样的盆底效果,我们应该给最外层一个pen底效果就好了。
06:09
定为10P。这样的话呢,它就不会全都点在一行,然后这两块之间呢,它中间有个区域有的pen,那么这个该怎么设计呢?因为中间有有的有有的没有啊,咱们又不能用这个CS的一些什么选择奇数啊,选择偶数的这些选择器,所以我们操作是这样的啊,我们pending的话呢,上下十。上下10PS没错,右是零对吧,然后左边10PS上右上左都是十,就是右边不一样有10PS,这样的话呢,我们整体的结构就是这个右边没有10P对吧?然后再给这个weaponper呢,来一个marin right为识,这样呢就可以达到我们想要的这个效果把marin right可能不太行啊,应该要pending right。
07:00
为视,哎这样的话呢,就达到了这样的一个我们想要的效果。然后这个图片呢,这个高度显然是有点大啊。那我们对齐一下,高度呢,有点大,我们要砍去至少50啊,我们为一百五吧。OK,这个高度就差不多了,然后呢,我们要给个圆角,注意看啊,整个区域的圆角是这里这个圆角。对吧,这里也有这个圆角,我们尝试给整个区域那个border radiOS来个20PS,这个圆角面写大一点,我们看看能不能把这个图片也给遮住。OK,我们尝试给一个圆角的话呢。我的确给了border radiOS为这个20PS,但是对于图片来讲呢,它这块区域呢,好像并没有成功啊,而且它的整个颜色backone color应该是白色。因为我们显示区域的是白色,然后下面还得用这个margin button为10PS,既然marin button有10PS的话,那么我们paint定上右下下的力应该是零。
08:11
好了啊,这样的话呢,诶,你看这个区域就不会有任何突兀的地方啊,就是达到我们想要的这个效果。OK啊,我们一起来看啊。整个区域。这个颜色我们看看有没有什么问题的地方,现在就是这个边距呢,这一边它并不能变啊,因为是图片的关系,所以说我们这个board radio呢,不能给这个区域,这个区域是可以给啊,但是这个区域只需要给这个下面的border radiOS,而上面的border radiOS给图片设置才行,因为你不给图片设置,就会出现这样的一个区域,这一块没有设置上去。没收上去这个图片和容器之间的一个,它这里渲染的一个问题啊,所以说我们这里呢,得给图片一个上。上左上右和整个容器的下左和下右。
09:05
来怎么看呢?找到这个border radiOS,就是你border radiOS。它在这里可以设置啊,比方是button。Leftus啊,这是。下左,然后。这是下右对吧,那么我们左右就有这个radiOS,同时我们再把这个复制一份来到这个上面。来到image image呢,它不是它,它也是left和right,但是它是top。他top,哎,这样的话呢,就达到这个效果啊,拿出效果,当然20好像有点大,我们来调十吧。OK,调十的话呢,这个就达到一个类似的一个效果,当然类似一个效果好了,这个妈不用妈的话呢,它这个背景色还是一个白色连接在一起不太好看啊。
10:03
不太好看。所以我们这里。呃,Roie。Right的话呢,它这块区域。也行啊,我们直接makeize,但是我们不给它一个区域,不给它颜色啊,我们给下面的这个颜色就好了,下面这个full的in for它的一个这个颜色。呃,我们看看给他也是的话呢,应该下面。是没有问题的,下面是没有问题的,然后呢,我们还是要给这个文字也是这个颜色。OK,那么它们都是白色的,首先这个内容呢,这个文字啊,它的大小是要大一点啊,所以说我们要调风size,同时呢,它上面应该有些间距啊,有些间距。
11:07
左右上下左右的一些间距,所以说我们需要做一些调整,我们就从title这里调整起吧,TWELVE10嘛。然后其实整体就是上下左右,上下左右都是十,但是下的话呢,我们就调一个下的话就不要下那个那个零就好了。在日本地。OK,那么这个文字在这风size调大一点。20、看看效果。OK,这个20的话呢,它是稍微有些大的18吧。应该没有多大问题啊,18差不多,然后下面这段文字呢,它大小应该要小一点,我们来设置。而且它的水平排列啊。所以说flash。
12:07
为肉水平排列,然后找到这个文字啊,我们把它的风size调为12PS,然后呢,它的颜色也改了。喂,调呢,已经调好了,然后呢,他们应该有些边距,边距的话呢,我们来陪你。左右下。OK,那么就调成这个样子啊,大小是OK的,但是颜色我们要调一下,看我随便调一个色。OK啊,差不多啊差不多,但这个颜色大家也可以按照方式啊去吸一下,就知道它的这个颜色是多少了,好了,那么最后呢,就是这个线啊,它是一个这样的一个线。
13:04
Y呢,为1PS,高度的话呢,我们为12PS,然后呢,Background color的话呢,为这个GR。它就有这样一个颜色啊,OK,然后呢,我们让整个内容都要居中。奥莱汤姆斯威center,他进行了尝试的居中,但是明显这个线的话呢,它没有达到我们想要的一个效果。同时它它的左右是有边距的啊,稍微的奇怪一点。呃,我们给线的话呢,应该是没有指定任何的宽度的。我们就是direction,为肉OK。Connect为的话呢。
14:01
靠左布局没有问题,这个是没有问题的,呃,现在问题就是他呢,这个间距稍微有些多啊,我们试着不调整高度。或者高度先调为百分百。OK,高度百分百显然是不合理的。高度为10P。它呢,整体布局还是没有啊,还是没有对齐啊,我们就为Fla star。看效果。拉萨会顶在太上面的,好来为center。他好像也没有成功的对齐到想要的位置。它对齐的位置比较偏下,那么原因就是因为它应该也是没有指定这个pending的啊,他也没有指定这个pending,我们也需要给它指定pending。我们来看一下,它没有指定depending。
15:02
呃,整体pening的话呢,我们不是给他制定,是给这个外per制定。OK,他来一个妈,OK,它这里marin应该就不需要了,我们给整个容器指定应该就好了,前面我们给文字指定的搞错了,好Mar上下为零,左右为五,PS,这样的话呢,他们就会稍微隔开一点,距离就不会靠得太近。好了,这样的话呢,我们就把这个基本给写好了,10PS有点短10PS。差不多啊,你可以自行调整好,这样的话呢,我们就把咱们整个内容的一个静态组件给搭建好了。整体呢,就是一块区域啊,宽度为50%,通过样式的设计啊,让它有些间隙对吧?然后呢,上面是一个图片,中间是一个文字,下面是一段文字,图片的话呢,想要这个圆角啊,你直接去给容器指定好像不太行,需要给图片单独的去指定这个top和这个top的这个left和right的一个radiOS,那么底部的话呢,也需要去指定,所以我们给不同的地方设置它的一个border radiOS。
16:17
好了,到这儿呢,我们就完成了首页的静态组件。
我来说两句