00:00
好的,我们继续啊,那我们再把这个头部啊,今天搭建完了以后呢,啊,那其实这个啊,字体的颜色呢,写成这个呢,也不是太好看啊,在这里呢,我就是想告诉大家啊,这个place holder的样式呢,我们可以专门去设置了,那这样的话呢,我就把这个字体颜色给大家撤掉了,那么这节课呢,我们去做一下下面这个列表的静态搭建,叫热搜榜,好的,那首先啊,我们来到我们的结构里面呢,我们先把头部的区域呢啊收起来,在这里呢,我们要做的是这个热搜榜,对吧?诶,热搜榜。啊来,那在这换一行啊,这呢我们叫它一个热搜啊,那我们就叫hot hot就是热的意思啊,Container热搜榜里边有什么呀?上面呢有一个热搜榜对吧,还有一条线是它的下边框,下面呢是一个列表。哎,那这个时候啊,呃,写我们写之前大家看啊,热搜榜这左右两侧其实有个留白,哎,你看这一条线呢,你就能看得很清楚,包括上面其实也也有留白,这都是一致的,那说明啥,说明这个留白呢,我们是整体的加给整个页面的包裹器的,那所以啊,我们先去干嘛呢?先去给我整个页面。
01:19
谁呀,就是这个search container,我们给它呢加一个pad哎,比如说上下为零,左右来20像素的内边距啊,这样的话呢,头部之前加的十个内边距,我们就左右的内边距啊,就不需要了啊,那这样的话就上下为十,左右为零啊,左右为零,我们用的是正内边距。就OK了啊,那现在呢,还看不出什么问题啊,看不出什么效果,我们接下来往下写啊,好的,热搜榜这呢,首先啊,我们应该有一个什么呀,有一个标题啊,所以呢,来一个什么title,诶title吧,那这个标题的内容是固定的啊,就叫什么就叫热搜榜对吧,下面呢是一个啊列表,热搜的列表吧。
02:07
哎,热搜列表来,那这个呢,我们再写一个叫它hot list,那么里面呢,每一项呢,那就是哎hot item呗,那每一个个体呢,都有啥呀,注意看我们以这个为例啊,前面是个序号,后边是啊搜索的名称,热搜啊,这个歌曲或者是什么关键字的名称吧,对吧,这个hot其实最终是个小图片啊,那这呢,我们可以先不用管,因为有的有有的没有,这个呢,最终是需要我们拿到动态数据以后才可以做的好的,那现在呢,我们先去写什么,先去写它那个排序,首先它有个序号对不对,我们序号的话就叫它一个order吧,Order啊,我们先写死一个,比如说这为一。对吧,下面有个呃,这个热搜的名字啊,比如说叫偏好的,那这相当于就是一个个体啊,没有数动态数据之前呢,我们先手动的啊,多给他复制几份。
03:07
对吧,然后啊,我们去写一下对应的样式来。哎,这里呢也往下滑一点,我们接下来呢,要写的是热搜榜的啊钥匙,嗯,首先热搜榜hot。嗯,哎,这个耗子container下边的这个title,我们去写一下它的样式呗。对吧,看到title啊,我们先来一个字体的大小,比如说来个28,嗯,同时呢,我们给它设一个高度啊,比如说来80RPS,然后呢,对应的我们再给一个line t为80,那这样的话呢,就是垂直居中啊,我们也看到了有一个下边框啊,我们就来个erps分类的啊井号我先来个三三三重一点,让大家能够看得到它。看一下效果就这呗,啊,那看到了这个以后呢,我们可以把这个东西呢,就给它颜色淡一点,调成一一好的,那这样的话呢,标题的样式啊,我们就写完了,那么写完了以后呢,我们去写一下下面的样式。
04:13
那么这个列表的话呢,很明显啊,这是一个流式布局,然后呢,左右排列对吧,左右排列这样的话呢,我们也可以用什么呀,也可以去用这个flex布局啊,去搞定它,那hotless这呢,那我flex一下对吧,那很明显啊,它一行就两个,那肯定是我们要让它什么换行,嗯,而下面的这个hot h哎,就是它里面的每一个个体,那么因为左右只有两个啊,所以呢,它的宽度应该是50%。啊,高的话呢,我们也来一个啊,来个80吧,嗯,RPX,嗯,没有问题啊,那它的行高呢,我们也给它设一个80,同时设一下它的字体颜色啊,我们来个26RPX来瞧一瞧看一看啊过来。
05:05
大家看,嗯就好了。啊,没有问题啊,而这个E跟这个偏这是不是挨的太近了啊,哎,我们可以干嘛呢?可以找到里面的序号啊,就是这个order啊,注意啊,那下面这呢,这些我应该复制错了啊,为什么呢?因为这个下面这个text不应该是order了,只有上面的是么order呀,好的,那我们重新啊,多给他复制几份啊。嗯,没有问题啊,那接下来呢,我们去设一下这个order,左右两边的边距啊,不要挨的太近,好的,那找到这个order,嗯,我们来一个什么样啊,来个me吧啊上下为零啊,比如说我们左右来十个像素的偏移量,我们再看一下效果。过来好,那这个时候啊,大家看距离就有了。嗯,没有问题,最终我们显示的应该是这样的啊,只不过现在我们没有数据,对不对,等到有了数据啊,就会好看一点啊,会好看一点。
06:06
好的,那以下呢,呃,就是我们这个热搜榜的这个静态页面搭建啊,这儿呢,等到拿到数据以后呢,我们再把这个图片给它加上来就好了,那这节课呢,我们先讲到这里。
我来说两句