00:00
好的,我们继续啊,那到上一节课为止呢,那我们这个视频页啊,相关的内容我们就做完了,好的,那现在呢,我们要做的是这个页面啊,我来到我写好这个项目里面,在主页这儿呢,在有一个每日推荐的选项啊,我们可以点击一下它,那么跳转进来的就是每日推荐的页面。那么接下来呢,我们去写一下这个页面,好的,那现在呢,来到咱的项目里面啊,我们就把这些都关了。嗯,然后呢,在配置下面,我呢新建一个文件夹。哎,我们就叫他一个recommend吧,Song叫推荐歌曲的页面,来那建了个目录以后呢,为了方便的话呢,我们来到这个啊,开发工具里边啊,在page下边找到这个文件夹,我们右键让他去帮我们快速的创建一下这四个文件,就是command放一回车。那么四个文件有了以后呢,对应的啊,它会把这个路径写入进来。那么接下来啊,为了调试方便,我们先去协议页面里面的内容,再说跟其他页面的交互啊,那这个时候呢,我们可以把这个页面呢,提到上面去,同时别忘了啊,把下面的逗号去掉,上面的给它加上来。
01:14
好了,那现在呢?我们来到的是一个新的页面。那这个页面呢,首先我们需要做的是修改一下这个页面的标题以及对吧?啊这个窗口的颜色来,那因为这个页面呢,是单独的一个标题颜色,呃,标题以及这个窗口颜色啊,所以呢,我们需要呢,在当前页面的阶层中。单独的去配置一下。那么这个不是,这个是否使用主件呢?我们现在不用啊,我就先把它删掉了。那么要设置这个窗口的标题呢,比较简单啊,啊,一个是这个颜色对吧,一个是这个标题,我们可以先给他拿过来啊,对应的标题我们也拿过来。来,来到当前的页面这。那现在呢,我们要去改一下这个标题啊啊每日推荐。
02:04
嗯,每日推荐,那么这个窗口的颜色呢,是我啊之前怎么来的呢?我是从这个下边啊,我是随便上网去找了一张图片,然后呢,用取色器呢,从这个上面吸了个颜色啊,为了就是好看一点。那这个对应的颜色呢,我直接就在这儿啊,设置一下啊是它。好,那这个时候呢,看一下咱的项目。嗯,大家看窗口的这个颜色跟文本我们就改过来了,在这儿呢,可能有的小伙伴忘了啊,我们说设置窗口的标题,那局部设置跟全局设置的区别是全局是不是需要在window这个对象里面去设置呀,而局部设置呢,是不需要的啊,不需要的直接写就好了。好的,那么这个窗口的标题设置完了以后呢,我们去搭一下它页面的结构以及对应的样式来过来。那么结构啊,默认的我们给它撤掉啊来,首先呢,这是这个recommendor,嗯,它的包裹器对吧,在这个里边呢,我们先去写它上面的啊头部区域,那这个所谓的头部区域呢,对应的是哪是这个板块。
03:14
哎,是这个板块,这个板块里面呢,比较简单啊,它呢是一张图片,在这个图片上面呢,定位的啊,有有什么有这个文本。好的,那现在啊过来,首先我在这里先去创建一个头部啊,我们来一个head。啊,在这个下面呢,我们整一个image标签,嗯,来src呢,我们去索引一下,所一下在这呢,我去用一下这张图啊,它呢在images下面,嗯,Image下面呢。有一个什么呀,有一个我们去找一下吧。在这个下面呢,我们要的是这张图片。啊,这张。好了,那现在呢,来到它的下面呢,我们去把这个图片呢,哎,直接引过来啊,对应的呢是JPG对吧,JPG把这个啊补充进来,那那这样的话呢,我们隐完了以后呢,把这个收起来啊,避免大家看的乱。
04:12
来到我们的项目,我们看一眼图片是不是进来了?哎,接下来呢,我们去设一下它的样式过来。把这个样式呢,我们干嘛呢,给它移动到右侧对吧,那么接下来来我们要设置的是,呃,这哥们下边的header。对吧?啊,那它对应的handle呢,是多宽多高,我们可以去量一下啊,打开这边的调试器来走。宽100%不用说高的话呢,150,也就是说对应的我们最终呢,要设一个多少呢?320PX的一个高度来写一写啊啊宽。100%呗,啊高的话呢,是300RPX对吧,那么它下面的图片。啊,它下边的这个图片面啊,它的宽高呢,那就是100%啊,高呢也是100%的。
05:07
那我们看一下效果啊过来,嗯,图片就这样了,那这是我随便找的一张啊,然后呢,我发现诶这正好好像有个小黑板一样的东西,那这样的话呢,我们在这儿呢,显示一下什么,显示一下当天的日期,效果会好一点。对吧,那所以打卡我写好这个,那这呢对应的就是当天的日期啊,几月几号呗。没问题,那这样的话呢,我们先去干嘛啊,先去在这个结构里面,我们去给它写一写啊,日系的话呢,因为有两个,我就先用个date啊包裹器去包裹一下里面的文本呢啊,我们分别给他一个class吧,那这个前面的是date啊就是。哪天那对吧,我们随便先写一个,比如来个17吧,啊,跟这个保持一致,那复制一份啊下面呢,比如十月份。
06:01
那这个呢,对应的就叫Mo尾月份。对吧,好的,那现在呢,我们先去看一下效果。这个日期呢,现在在这儿呢,来中间呢,我们是不是应该加个反斜杠给它隔开啊,那这样的话,为了方便的话,大家看我加到这加个斜杠呗。啊,不用反斜杠就用它就行了,来那斜杠也有了,关键是这个文本在这儿呢。那我提一个要求啊,我让你这个文本呢,在当前这个头部水平垂直居中。应该怎么做?来,大家看我怎么写啊,为了方便去设置它呢,首先我会选择给这个date去设置一下它的宽高。那么这个头部啊,下边的这个date来,我呢先给它一个宽高啊,比如说我们来一个Y300RPX吧,啊高的话呢,我们来个一吧,同时呢,我们给它来一个border啊,Erpx solid,然后呢,井号我们来个red红色,哎,便于我们待会去。
07:03
调试。嗯,那么有了这个以后。这个框是么出来了,首先我们是不是可以控制这个文本在当前这个包裹器里面水平垂直居中呀,来,那怎么去做呢?也比较简单啊,Text line,哎,Center对吧,Line t为100RPX,那这样的话呢,文本水平垂直居中了。那其实接下来我们要做的就是将这个红色的边框这整个区域放到我们这个负元素的。居中位置是不是就可以?啊,没问题,那接下来我们就要考虑如何让一个元素。基于负元素水平垂直居中。那其实能写的有很多方案,有很多方案来,我去写一下,首先呢,我们要设置一下这个hander下边的这个date吧,嗯,这哥们水平垂直居中的话呢,那我们肯定要用到这个定位,哎,Absolute呗,我呢先用一种方式,比如说left为50%啊,那top的话呢,我们也来50%呗。
08:12
他也来50%。对吧,那这个我看这date有了,或者这样吧,我不单独写了,我给它放到这儿,注意啊,要写定位的地方,最好是放到上面去。哎,你写定位的这个样式代码呢,放到这个当前这个样式块里边的最上边啊,因为定位呢,它会对吧,脱离文档流或者有层级。比较特殊啊,所以我们放到上面,那这样的话呢,我们看一眼啊,它们要基于负元素定位啊,所以呢,我们最好是给负元素也是handle这的开一个什么relative相对定位。那我们看一下效果。哎,那这个时候呢,大家能看到的,呃,是这样的一个效果啊,注意现在的50%,50%是这个点,就是当前这个子元素的左上角这个点。
09:01
那这很明显不是我们想要的,我们想要的是这个元素水平居中,所以呢,这个元素往上是不是应该拉它自身的一半,往左往回收它自身一半就可以了。啊,那这样的话呢,我们可以怎么做呢?来在这里啊,我们去设置一下,首先啊,它的market left为负的,负的多少呢?它的一半是吧,一百五呀,往回拉。因为它宽300嘛,高的话100,所以呢,呃,我们这儿的market top为负的52PX。就OK了,那这样的话我们再来看一下效果,诶你看是不是拉到中间了,没有问题啊,同时啊字体颜色调成白色,然后把这个红色边框干掉就好了。来。呃,这儿的color啊,井号FF对吧,白色,那这个边框呢,我们就不要了。没有问题啊,边框我们就不要了,来,那这个时候我们再看一个。那就好了。
10:00
好的,那呃,如果你想再设的话,大家看啊,我这个天这啊,我是把它的这个字体大小呢,往大调了一点啊,就是这个D,那我们也可以去设置一下。对吧,呃,我这就这样写吧啊,Hazer下边的这个date的下边对吧,这个day你看size我们往大调一点啊,比如说来个38RPX我们瞧一下。嗯,这是不是很明显比后面这个大一点。OK啊,那以上的样式呢,啊,就是这样啊,就是这样好,那这个头部的静态样式搭建完了以后啊,我们先整到这儿啊,先整到这儿,那下一节课呢,我们可以把里边的数据给它写成动态。
我来说两句